/*
Theme Name: ACE Aesthetics
Theme URI: https://www.aceaes.com
Author: ACE Aesthetics
Description: Custom WordPress theme for ACE Aesthetics (Paula Shuster, NP) — converted from the studio's hand-built static design. Preserves the original editorial dark/light layout system, sticky rail service menu, and all custom interactions exactly as designed, with key content made editable from the WordPress admin via Advanced Custom Fields.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: Proprietary — built for ACE Aesthetics
Text Domain: ace-aesthetics
*/
/* -----------------------------------------------------------------------
Everything below this line is the site's original design CSS, carried
over unchanged from the static build so the site looks identical.
----------------------------------------------------------------------- */
/* =============================================================================
Ace Aesthetics — static rebuild
Editorial greyscale (paper & ink) with a single champagne accent.
Display serif: Cormorant Garamond. Body/labels: Jost.
========================================================================== */
/* Font loading moved to tags in index.html — @import here would block
CSS parsing on a second network round-trip before the fonts are even discovered,
delaying first paint of the whole page. A lets the browser fetch fonts and
this stylesheet in parallel instead of one after the other. */
:root {
--radius: 0rem;
--background: oklch(0.982 0.003 80);
--foreground: oklch(0.17 0.005 60);
--card: oklch(1 0 0);
--primary: oklch(0.17 0.005 60);
--primary-foreground: oklch(0.982 0.003 80);
--secondary: oklch(0.952 0.004 75);
--muted: oklch(0.952 0.004 75);
--muted-foreground: oklch(0.5 0.01 70);
--accent: oklch(0.682 0.082 82);
--accent-foreground: oklch(0.17 0.005 60);
--border: oklch(0.905 0.005 75);
--input: oklch(0.82 0.006 72);
--ring: oklch(0.682 0.082 82);
--ink: oklch(0.145 0.004 60);
--ink-foreground: oklch(0.955 0.004 80);
--ink-muted: oklch(0.66 0.008 75);
--font-display: "Cormorant Garamond", "Times New Roman", serif;
--font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}
/* ---------------------------------------------------------------------------
* Reset / base
* ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body { }
#smooth-content { will-change: transform; }
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.5;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
address { font-style: normal; }
fieldset { border: 0; }
legend { padding: 0; }
::selection { background-color: var(--accent); color: var(--accent-foreground); }
.site { background-color: var(--background); position: relative; }
/* Subtle film-grain texture for an editorial, printed feel */
.site::before {
content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
opacity: 0.035; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Ornamental section kicker — thin rule + diamond, used ahead of eyebrows */
.ornament { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-bottom: 1rem; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 2.25rem; background: var(--border); }
.ornament span { color: var(--accent); font-size: 0.7rem; transform: rotate(45deg); display: block; width: 6px; height: 6px; border: 1px solid var(--accent); }
.wrap {
margin-inline: auto;
max-width: 80rem; /* max-w-7xl */
padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .wrap { padding-inline: 2.5rem; } }
/* ---------------------------------------------------------------------------
* Type helpers
* ------------------------------------------------------------------------- */
.eyebrow {
font-family: var(--font-sans);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
}
.italic { font-style: italic; }
.font-display { font-family: var(--font-display); }
/* ---------------------------------------------------------------------------
* Signature utilities
* ------------------------------------------------------------------------- */
.nav-link {
position: relative;
display: inline-block;
padding-block: 0.25rem;
transition: color 0.35s ease;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.field-line {
width: 100%;
border: 0;
border-bottom: 1px solid var(--input);
border-radius: 0;
background: transparent;
padding-block: 0.65rem;
font-size: 0.9rem;
letter-spacing: 0.02em;
color: var(--foreground);
outline: none;
position: relative;
}
.field-wrap { position: relative; }
.field-wrap::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
transform: scaleX(0); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.field-wrap:focus-within::after { transform: scaleX(1); }
.field-line::placeholder { color: var(--muted-foreground); }
select.field-line { cursor: pointer; }
textarea.field-line { resize: vertical; min-height: 4.5rem; }
.frame-zoom { overflow: hidden; }
.frame-zoom img { transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.frame-zoom:hover img { transform: scale(1.06); }
/* ---------------------------------------------------------------------------
* Motion system
* ------------------------------------------------------------------------- */
/* =============================================================================
Cinematic Reveal System v2 — 5 distinct animation types
Tuned fast/light on purpose: shorter travel distances, shorter durations,
than the original pass (which the client felt was too slow/heavy). These
trigger via IntersectionObserver in script.js and fire once per element.
========================================================================== */
/* Default: elegant upward drift + fade */
.reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Slide from left — headings, labels */
.reveal-left {
opacity: 0; transform: translateX(-28px);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-left.is-visible { opacity: 1; transform: none; }
/* Slide from right — images, media */
.reveal-right {
opacity: 0; transform: translateX(28px);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-right.is-visible { opacity: 1; transform: none; }
/* Scale reveal — cards, photos */
.reveal-scale {
opacity: 0; transform: scale(0.94) translateY(16px);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-scale.is-visible { opacity: 1; transform: none; }
/* Skew reveal — bold editorial headings */
.reveal-skew {
opacity: 0; transform: skewY(2deg) translateY(20px);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-skew.is-visible { opacity: 1; transform: none; }
/* Mask-reveal: clip from bottom — the "curtain lifts" cinema effect */
.reveal-mask {
overflow: hidden;
}
.reveal-mask-inner {
display: block;
transform: translateY(105%);
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-mask.is-visible .reveal-mask-inner { transform: translateY(0); }
/* Word-by-word mask reveal — used for the closing CTA's big statement line.
Each word sits in its own overflow-hidden mask and rises up from behind it
in sequence, driven by the same .reveal.is-visible trigger on an ancestor. */
.word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.word-inner {
display: inline-block;
transform: translateY(108%);
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--word-delay, 0ms);
will-change: transform;
}
.is-visible .word-inner { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
.word-mask, .word-inner { transform: none; transition: none; }
}
@keyframes hero-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
/* Cinematic "focus pull" entrance — rises into place while a soft blur
resolves into focus, like a camera racking focus onto the subject. */
@keyframes hero-fade { from { opacity: 0; transform: translateY(26px); filter: blur(9px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes banner-rise { from { opacity: 0; transform: translateY(14px); letter-spacing: 0.32em; } to { opacity: 1; transform: none; } }
@keyframes scroll-cue { 0%, 100% { transform: scaleY(0.3); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
/* Hero entrance — plays whenever the hero section actually scrolls into
view (JS toggles .in-view on the section via IntersectionObserver),
not just once on page load. Land on the homepage and it plays; scroll away
and back up to the hero and it plays again. Base state below (pre-.in-view)
is each element's own "not yet revealed" starting point, so it's ready to
replay every time. */
.animate-hero-zoom { transform: scale(1.14); }
.in-view .animate-hero-zoom { animation: hero-zoom 3.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-hero-fade { opacity: 0; will-change: opacity, transform, filter; }
.in-view .animate-hero-fade { animation: hero-fade 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-banner-rise { opacity: 0; animation: banner-rise 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.animate-scroll-cue { animation: scroll-cue 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-skew { opacity: 1; transform: none; transition: none; }
.animate-hero-zoom, .animate-hero-fade, .animate-banner-rise, .animate-scroll-cue { animation: none; opacity: 1; filter: none; }
}
/* =============================================================================
Press Banner — kinetic, layered (ported from Mockup 2)
========================================================================== */
.press-banner {
position: relative; background-color: var(--ink); color: var(--ink-foreground); overflow: hidden;
}
.press-banner__bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
}
.press-banner__scrim {
position: absolute; inset: 0;
background:
radial-gradient(1100px 320px at 50% -40%, oklch(0.682 0.082 82 / 0.2), transparent 70%),
linear-gradient(180deg, oklch(0.09 0.004 60 / 0.88), oklch(0.09 0.004 60 / 0.8) 55%, oklch(0.075 0.004 60 / 0.94));
}
.press-banner__glow {
position: absolute; left: 50%; top: 50%; width: 32rem; height: 14rem; transform: translate(-50%, -50%);
background: radial-gradient(closest-side, oklch(0.682 0.082 82 / 0.16), transparent 75%);
animation: press-glow-pulse 5s ease-in-out infinite;
pointer-events: none;
}
@keyframes press-glow-pulse { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.press-banner__sheen {
position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 20%, oklch(0.955 0.004 80 / 0.07) 32%, transparent 44%);
transform: translateX(-120%);
animation: press-sheen-sweep 6s ease-in-out 1.2s infinite;
}
@keyframes press-sheen-sweep {
0% { transform: translateX(-120%); }
35% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
.press-banner__inner {
position: relative; margin-inline: auto; max-width: 84rem; padding: 1.05rem 1.5rem 0.85rem;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
text-align: center;
}
@media (min-width: 640px) { .press-banner__inner { padding: 1.35rem 2.5rem 1.1rem; gap: 0.75rem; } }
.press-banner__label-wrap { display: flex; align-items: center; justify-content: center; }
.press-banner__label {
font-family: var(--font-sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--ink-foreground);
}
@media (min-width: 640px) { .press-banner__label { font-size: 0.875rem; letter-spacing: 0.34em; } }
/* Logos build up one by one (fade + rise in) and each STAYS on screen once it
appears — logo 1 appears, then logo 2 joins it, then logo 3 joins both — they
hold together as a full trio, then all three fade out together, pause briefly,
and the whole sequence repeats. Each chip gets its own keyframe with the same
9s duration/delay so the shared "hold together" and "fade out together" beats
land at the same moment for all three. */
.press-banner__logos {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(1.75rem, 4vw, 3.5rem);
min-height: 42px;
}
@media (min-width: 640px) { .press-banner__logos { min-height: 48px; } }
.press-banner__logo-chip {
display: inline-flex; align-items: center; justify-content: center;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
animation-duration: 9s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.press-banner__logo-chip:nth-child(1) { animation-name: press-logo-build-1; }
.press-banner__logo-chip:nth-child(2) { animation-name: press-logo-build-2; }
.press-banner__logo-chip:nth-child(3) { animation-name: press-logo-build-3; }
.press-banner__logos:hover .press-banner__logo-chip { animation-play-state: paused; }
.press-banner__logo-chip:hover { transform: translateY(-3px); }
@keyframes press-logo-build-1 {
0% { opacity: 0; transform: translateY(10px) scale(0.94); }
4% { opacity: 1; transform: translateY(0) scale(1); }
78% { opacity: 1; transform: translateY(0) scale(1); }
86%, 100% { opacity: 0; transform: translateY(-10px) scale(0.94); }
}
@keyframes press-logo-build-2 {
0%, 16% { opacity: 0; transform: translateY(10px) scale(0.94); }
20% { opacity: 1; transform: translateY(0) scale(1); }
78% { opacity: 1; transform: translateY(0) scale(1); }
86%, 100% { opacity: 0; transform: translateY(-10px) scale(0.94); }
}
@keyframes press-logo-build-3 {
0%, 32% { opacity: 0; transform: translateY(10px) scale(0.94); }
36% { opacity: 1; transform: translateY(0) scale(1); }
78% { opacity: 1; transform: translateY(0) scale(1); }
86%, 100% { opacity: 0; transform: translateY(-10px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
.press-banner__logo-chip { animation: none; opacity: 1; }
}
.press-banner__logo {
height: 34px; width: auto; display: block; opacity: 1;
filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.6)) drop-shadow(0 0 1px oklch(1 0 0 / 0.9)) drop-shadow(0 0 10px oklch(1 0 0 / 0.4));
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.press-banner__logo--enews { height: 38px; }
.press-banner__logo--intouch { height: 30px; }
.press-banner__logo:hover { transform: scale(1.06); }
@media (min-width: 640px) { .press-banner__logo { height: 42px; } .press-banner__logo--enews { height: 48px; } .press-banner__logo--intouch { height: 38px; } }
.press-ticker {
position: relative; border-top: 1px solid oklch(0.682 0.082 82 / 0.45); background: oklch(0.08 0.004 60);
overflow: hidden; padding-block: 0.4rem;
box-shadow: 0 -1px 0 oklch(0.682 0.082 82 / 0.15), inset 0 1px 18px -6px oklch(0.682 0.082 82 / 0.18);
}
.press-ticker__track {
display: flex; align-items: center; gap: 2rem; width: max-content; white-space: nowrap;
animation: press-ticker-scroll 26s linear infinite;
}
.press-ticker:hover .press-ticker__track { animation-play-state: paused; }
.press-ticker__track span:not(.dot) {
font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
color: var(--accent); text-shadow: 0 0 18px oklch(0.682 0.082 82 / 0.5);
}
@media (min-width: 640px) { .press-ticker__track span:not(.dot) { font-size: 0.75rem; } }
.press-ticker__track .dot { color: var(--accent); font-size: 0.6875rem; opacity: 0.85; }
@keyframes press-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .press-banner__sheen, .press-ticker__track { animation: none; } }
/* =============================================================================
Navbar
========================================================================== */
.navbar {
position: sticky; top: 0; z-index: 50;
border-bottom: 1px solid transparent;
background: transparent;
transition: background-color 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
}
/* Any in-page anchor target needs breathing room under the sticky navbar (5rem tall)
so jump-links and scrollIntoView never land a heading flush against/behind it. */
section[id], footer[id] { scroll-margin-top: 6rem; }
.navbar.is-scrolled {
border-bottom-color: var(--border);
background-color: oklch(0.982 0.003 80 / 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.navbar__row {
margin-inline: auto; display: flex; height: 5rem; max-width: 80rem; align-items: center;
justify-content: space-between; padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .navbar__row { padding-inline: 2.5rem; } }
.navbar__logo { display: flex; align-items: center; }
.navbar__logo-img { height: 2.5rem; width: auto; display: block; transition: opacity 0.3s ease; }
.navbar__logo:hover .navbar__logo-img { opacity: 0.7; }
/* Logo removed from the navbar (it now lives, larger, in the hero below) — keep the toggle/CTA pinned right on mobile once the links are hidden. */
@media (max-width: 1023px) { .navbar__row--no-logo { justify-content: flex-end; } }
.navbar__links { display: none; align-items: center; gap: 2.25rem; }
@media (min-width: 1024px) { .navbar__links { display: flex; } }
.navbar__links a,
.navbar__links .nav-link {
font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em;
color: oklch(0.17 0.005 60 / 0.8);
}
.navbar__links a:hover,
.navbar__links .nav-link:hover { color: var(--foreground); }
.nav-dropdown { position: relative; }
.nav-link--caret { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.caret {
display: inline-block; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: rotate(45deg); margin-top: -2px; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-dropdown:hover .caret { transform: rotate(225deg); margin-top: 2px; }
.nav-dropdown__panel {
position: absolute; top: calc(100% + 1.1rem); left: 50%; transform: translate(-50%, 8px);
min-width: 15rem; background-color: var(--card); border: 1px solid var(--border); padding-block: 0.85rem;
opacity: 0; visibility: hidden; z-index: 50;
box-shadow: 0 30px 60px -20px oklch(0.145 0.004 60 / 0.22);
transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s;
}
.nav-dropdown:hover .nav-dropdown__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dropdown__panel a {
display: block; padding: 0.55rem 1.5rem; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted-foreground); transition: color 0.35s ease, padding-left 0.35s ease;
}
.nav-dropdown__panel a:hover { color: var(--accent); padding-left: 2rem; }
.navbar__actions { display: flex; align-items: center; gap: 1rem; }
.btn-book {
display: none; position: relative; overflow: hidden; isolation: isolate;
background-color: var(--foreground); padding: 0.75rem 1.75rem; font-size: 0.6875rem;
font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--background);
transition: color 0.45s ease 0.05s;
}
@media (min-width: 640px) { .btn-book { display: inline-block; } }
.btn-book::before {
content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--accent);
transform: translateX(-101%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-book:hover::before { transform: translateX(0); }
.btn-book:hover { color: var(--accent-foreground); }
.navbar__toggle {
display: grid; place-items: center; height: 2.5rem; width: 2.5rem; color: var(--foreground);
}
@media (min-width: 1024px) { .navbar__toggle { display: none; } }
.navbar__toggle svg { width: 1.25rem; height: 1.25rem; }
.navbar__toggle .icon-x { display: none; }
.navbar__toggle.is-open .icon-menu { display: none; }
.navbar__toggle.is-open .icon-x { display: block; }
.navbar__mobile {
display: grid; grid-template-rows: 0fr; opacity: 0; overflow: hidden;
border-bottom: 1px solid var(--border); background-color: oklch(0.982 0.003 80 / 0.95);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
transition: grid-template-rows 0.5s ease-out, opacity 0.5s ease-out;
}
@media (min-width: 1024px) { .navbar__mobile { display: none; } }
.navbar__mobile.is-open { grid-template-rows: 1fr; opacity: 1; }
.navbar__mobile-inner { min-height: 0; }
.navbar__mobile-links { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.5rem; }
.navbar__mobile-links a {
padding-block: 0.75rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
letter-spacing: 0.28em; color: oklch(0.17 0.005 60 / 0.8); transition: color 0.3s ease;
}
.navbar__mobile-links a:hover { color: var(--accent); }
.navbar__mobile-links .btn-book { display: inline-block; width: fit-content; margin-top: 1rem; }
/* =============================================================================
Hero
========================================================================== */
.hero {
position: relative; display: flex; min-height: 92vh; align-items: flex-end; overflow: hidden;
background-color: var(--ink);
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media video {
height: 100%; width: 100%; transform: scale(1.1); object-fit: cover; object-position: 60% 25%;
}
.hero__scrim-1 { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.145 0.004 60 / 0.85), oklch(0.145 0.004 60 / 0.2) 60%, oklch(0.145 0.004 60 / 0.3)); }
.hero__scrim-2 { position: absolute; inset: 0; background: linear-gradient(to right, oklch(0.145 0.004 60 / 0.55), transparent 60%); }
.hero__inner { position: relative; margin-inline: auto; width: 100%; max-width: 80rem; padding: 10rem 1.5rem 6rem; }
@media (min-width: 1024px) { .hero__inner { padding-inline: 2.5rem; } }
.hero__eyebrow { color: oklch(0.955 0.004 80 / 0.7); }
/* Enlarged eyebrow — now the hero's main line of text since the headline statement was removed */
.hero__eyebrow--lg { font-size: 0.9375rem; letter-spacing: 0.32em; }
@media (min-width: 640px) { .hero__eyebrow--lg { font-size: 1.125rem; } }
@media (min-width: 1024px) { .hero__eyebrow--lg { font-size: 1.3125rem; letter-spacing: 0.28em; } }
.hero__logo { width: 5rem; height: auto; margin: 0 0 1.5rem; display: block; opacity: 0.95; filter: drop-shadow(0 2px 14px oklch(0.145 0.004 60 / 0.4)); }
@media (min-width: 640px) { .hero__logo { width: 6rem; } }
.hero__logo--lg { width: 13rem; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .hero__logo--lg { width: 18rem; margin-bottom: 3rem; } }
@media (min-width: 1024px) { .hero__logo--lg { width: 22rem; margin-bottom: 3.5rem; } }
/* Full signature treatment — this line has gone through a few rounds and
still wasn't landing, so this pass combines everything: real hero-headline
scale, a heavier Playfair Display weight for presence, and (below) a
word-by-word mask reveal instead of a plain fade — each word rises up out
of its own mask on load, staggered, rather than the whole line just
appearing at once. */
.hero__statement {
margin-top: 1.75rem; max-width: 36rem; font-family: "Playfair Display", var(--font-display); font-weight: 600; font-size: 2rem;
line-height: 1.3; letter-spacing: 0; color: var(--ink-foreground);
}
@media (min-width: 640px) { .hero__statement { font-size: 2.5rem; margin-top: 2rem; max-width: 40rem; } }
@media (min-width: 1024px) { .hero__statement { font-size: 3rem; margin-top: 2.25rem; max-width: 44rem; } }
.hero__statement em { font-style: italic; color: var(--accent); font-weight: 500; }
/* Word-by-word rise-in for the hero statement — a load-triggered CSS
animation (matches the other .animate-hero-* elements' timing system)
rather than the scroll-triggered .reveal system, since the hero plays on
page load, not on scroll. Reuses .word-mask (already defined above) as
the overflow-hidden mask each word rises out of. */
@keyframes word-rise { from { transform: translateY(108%); } to { transform: translateY(0); } }
/* Same replay-on-scroll-into-view behavior as the rest of the hero entrance
above — only animates once .in-view is present. */
.in-view .hero__statement .word-inner.animate-word-rise {
animation: word-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.hero__statement .word-inner.animate-word-rise { animation: none; transform: none; }
}
.hero__ctas { margin-top: 3.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.hero__cta-primary {
position: relative; overflow: hidden; isolation: isolate;
border: 1px solid oklch(0.955 0.004 80 / 0.6); padding: 1rem 2rem; font-size: 0.6875rem;
font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--ink-foreground);
transition: color 0.45s ease 0.05s, border-color 0.45s ease;
}
.hero__cta-primary::before {
content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--accent);
transform: translateX(-101%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hero__cta-primary:hover::before { transform: translateX(0); }
.hero__cta-primary:hover { border-color: var(--accent); color: var(--accent-foreground); }
.hero__cta-secondary {
font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em;
color: oklch(0.955 0.004 80 / 0.8);
}
.hero__cta-secondary:hover { color: var(--ink-foreground); }
/* Enlarged hero buttons — scoped to .hero__ctas--lg (homepage hero only) so the
shared .hero__cta-primary/.hero__cta-secondary classes stay unchanged everywhere else they're reused. */
.hero__ctas--lg { margin-top: 2.75rem; gap: 1.75rem; }
.hero__ctas--lg .hero__cta-primary { padding: 1.25rem 2.75rem; font-size: 0.8125rem; letter-spacing: 0.26em; }
.hero__ctas--lg .hero__cta-secondary { font-size: 0.8125rem; letter-spacing: 0.26em; }
@media (min-width: 640px) {
.hero__ctas--lg .hero__cta-primary { padding: 1.4rem 3.25rem; font-size: 0.875rem; }
.hero__ctas--lg .hero__cta-secondary { font-size: 0.875rem; }
}
.hero__scroll {
position: absolute; bottom: 2rem; right: 2rem; display: none; flex-direction: column; align-items: center; gap: 0.75rem;
}
@media (min-width: 768px) { .hero__scroll { display: flex; } }
.hero__scroll span:first-child {
font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.4em; color: oklch(0.955 0.004 80 / 0.6);
writing-mode: vertical-rl;
}
.hero__scroll-bar { display: block; height: 3.5rem; width: 1px; background-color: oklch(0.955 0.004 80 / 0.5); }
/* =============================================================================
Press strip
========================================================================== */
.press-strip { border-bottom: 1px solid var(--border); background-color: var(--background); overflow: hidden; }
.press-strip__inner { margin-inline: auto; max-width: 80rem; padding: 3.5rem 1.5rem 0; }
@media (min-width: 1024px) { .press-strip__inner { padding-inline: 2.5rem; } }
.press-strip__label { text-align: center; font-family: var(--font-display); font-size: 0.875rem; font-style: italic; letter-spacing: 0.14em; color: var(--muted-foreground); }
.press-strip__marquee {
position: relative; margin-top: 2.25rem; padding-block: 1.5rem;
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.press-strip__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.press-strip__marquee:hover .press-strip__track { animation-play-state: paused; }
.press-strip__logos { display: flex; flex-shrink: 0; align-items: center; gap: 3.25rem; padding-inline: 1.75rem; }
/* Every logo sits in a fixed box and scales to fit it via object-fit: contain, capped by
whichever box dimension it hits first. A wide single-line wordmark (Vogue, Cosmopolitan)
always hits the WIDTH cap, so it renders at full box width. A stacked two-line lockup
(NewBeauty's tagline, Harper's BAZAAR's "Harper's") is nearly as tall as it is wide, so a
short box makes it hit the HEIGHT cap long before it reaches full width — that's what was
still making those two read smaller. The box height below is deliberately generous (not
just tall enough for a single line) so a stacked logo has room to grow until it also hits
the width cap like the others, instead of being squeezed by a tight ceiling. */
.press-strip__logo-box { display: inline-flex; align-items: center; justify-content: center; height: 60px; width: 100px; }
@media (min-width: 640px) { .press-strip__logo-box { height: 84px; width: 132px; } }
.press-strip__logos img {
height: 100%; width: 100%; display: block; object-fit: contain;
opacity: 0.92;
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.press-strip__logo-box:hover img { opacity: 1; transform: translateY(-2px) scale(1.05); }
.press-strip__dot { color: var(--accent); font-size: 1rem; opacity: 0.6; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .press-strip__track { animation: none; } }
/* =============================================================================
Experience
========================================================================== */
.experience { background-color: var(--background); }
.experience__inner {
margin-inline: auto; display: grid; max-width: 80rem; gap: 4rem; padding: 6rem 1.5rem;
}
@media (min-width: 1024px) { .experience__inner { grid-template-columns: 1fr 1fr; gap: 5rem; padding: 9rem 2.5rem; } }
.experience__images { position: relative; order: 2; }
@media (min-width: 1024px) { .experience__images { order: 1; } }
.experience__img-a { position: relative; z-index: 10; width: 75%; }
.experience__img-a img, .experience__img-b img { aspect-ratio: 7 / 10; width: 100%; transform: scale(1.18); object-fit: cover; }
.experience__img-b {
position: absolute; right: 0; bottom: -4rem; z-index: 20; width: 60%; border: 10px solid var(--background);
}
.experience__big-a {
position: absolute; left: -1rem; top: 2rem; font-family: var(--font-display); font-size: 9rem; font-weight: 300;
font-style: italic; line-height: 1; color: oklch(0.682 0.082 82 / 0.25); user-select: none;
}
.experience__form-col { order: 1; }
@media (min-width: 1024px) { .experience__form-col { order: 2; } }
.experience__form-col .eyebrow { color: var(--accent); }
.experience__heading {
margin-top: 1.25rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; text-transform: uppercase;
line-height: 1.2; letter-spacing: 0.06em;
}
@media (min-width: 640px) { .experience__heading { font-size: 3rem; } }
.experience__heading em { font-style: italic; text-transform: none; }
.experience__intro { margin-top: 1.5rem; max-width: 28rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.experience__form { margin-top: 3rem; display: flex; flex-direction: column; gap: 2.25rem; }
.form-row { display: grid; gap: 2.25rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field-label {
display: block; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em;
color: var(--muted-foreground); margin-bottom: 0.4rem;
}
.services-grid { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr; gap: 0.75rem 2rem; }
@media (min-width: 640px) { .services-grid { grid-template-columns: 1fr 1fr; } }
.service-check {
display: flex; cursor: pointer; align-items: center; gap: 0.75rem; font-size: 0.875rem;
color: oklch(0.17 0.005 60 / 0.8); transition: color 0.2s ease;
}
.service-check--wide { grid-column: 1 / -1; align-items: flex-start; }
.service-check--wide input { margin-top: 0.2rem; }
.service-check--wide span { flex: 1 1 auto; min-width: 0; }
.service-check:hover { color: var(--foreground); }
.service-check input {
height: 0.875rem; width: 0.875rem; flex-shrink: 0; cursor: pointer; appearance: none;
border: 1px solid var(--input); transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
position: relative;
}
.service-check input:checked { border-color: var(--accent); background-color: var(--accent); transform: scale(1.08); }
.service-check input:checked::after {
content: ""; position: absolute; left: 2px; top: -1px; width: 4px; height: 7px;
border: solid var(--accent-foreground); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.btn-send {
position: relative; overflow: hidden; isolation: isolate;
margin-top: 0.25rem; width: fit-content; background-color: var(--accent); padding: 1rem 3rem; font-size: 0.6875rem;
font-weight: 500; text-transform: uppercase; letter-spacing: 0.32em; color: var(--accent-foreground);
transition: color 0.45s ease 0.05s;
}
.btn-send::before {
content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--foreground);
transform: translateX(-101%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-send:hover::before { transform: translateX(0); }
.btn-send:hover { color: var(--background); }
.experience__thanks { margin-top: 3rem; border: 1px solid var(--border); background-color: oklch(0.952 0.004 75 / 0.6); padding: 2.5rem; display: none; }
.experience__thanks.is-visible { display: block; }
.experience__thanks h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; font-style: italic; }
.experience__thanks p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
/* =============================================================================
Intro (Exclusive Aesthetics)
========================================================================== */
.intro {
position: relative; overflow: hidden;
background-color: var(--ink); color: var(--ink-foreground);
border-bottom: 1px solid oklch(0.955 0.004 80 / 0.14);
}
/* Text/border colors below are set on .intro itself so everything that doesn't
already declare its own color (the heading, pillar numerals via --accent,
etc.) inherits the light color automatically — only the elements that DID
set an explicit light-background color need an override here. */
.intro .eyebrow { color: var(--accent); }
.intro .ornament::before, .intro .ornament::after { background: oklch(0.955 0.004 80 / 0.28); }
.intro .intro__body { color: var(--ink-muted); }
.intro .intro__pillar { border-top-color: oklch(0.955 0.004 80 / 0.2); }
.intro .intro__pillar h3 { color: var(--ink-foreground); }
.intro .intro__pillar p { color: var(--ink-muted); }
.intro .intro__cta { border-color: var(--ink-foreground); color: var(--ink-foreground); }
.intro .intro__cta:hover { border-color: var(--accent); color: var(--accent-foreground); }
.intro__inner {
position: relative; margin-inline: auto; max-width: 78rem; padding: 6rem 1.5rem;
display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: center;
}
@media (min-width: 1024px) { .intro__inner { grid-template-columns: 1.05fr 0.95fr; gap: 5rem; padding-block: 8.5rem; } }
.intro__copy { position: relative; z-index: 1; }
.intro__heading {
margin-top: 1rem; font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; text-transform: uppercase;
letter-spacing: 0.04em; line-height: 1.1;
}
@media (min-width: 640px) { .intro__heading { font-size: 3.25rem; } }
.intro__heading em { font-style: italic; text-transform: none; color: var(--accent); }
.intro__body { margin-top: 1.75rem; max-width: 34rem; font-size: 0.9375rem; line-height: 1.85; color: var(--muted-foreground); }
.intro__pillars { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 34rem; }
/* min-width: 0 lets each 1fr column shrink to its fair share instead of the
CSS Grid default (which auto-sizes a track to fit its content's min-content
width) — without it, the longest unbreakable heading ("Personalized") was
forcing its column wider than its neighbors and blowing the grid out past
the viewport on mobile. */
.intro__pillar { border-top: 1px solid var(--border); padding-top: 1.1rem; min-width: 0; }
.intro__pillar-num { font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--accent); }
/* Heading style matched to the Concierge Details "When / Where / How"
columns per client feedback: same display font, same uppercase treatment,
same letter-spacing. overflow-wrap is a safety net so a long word wraps to
a second line on narrow columns instead of ever overflowing. */
.intro__pillar h3 {
margin-top: 0.5rem; font-family: var(--font-display); font-weight: 500;
text-transform: uppercase; color: var(--foreground); overflow-wrap: break-word;
/* Mobile-first default — smallest/safest, sized for the ~98px column on
narrow phones. */
font-size: 0.6875rem; letter-spacing: 0.06em;
}
@media (min-width: 640px) {
/* Full size to match Concierge Details' "When / Where / How" — the pillar
column is already at its full ~165px width from this point up. */
.intro__pillar h3 { font-size: 1.125rem; letter-spacing: 0.1em; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
/* Narrow dip: the two-column layout kicks in at 1024px but doesn't have
room to breathe until ~1200px, so the pillar column briefly shrinks to
~141px — "Personalized" would wrap mid-word at the full size here, so
fall back to a more compact size for just this range. */
.intro__pillar h3 { font-size: 1rem; letter-spacing: 0.06em; }
}
.intro__pillar p { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.65; color: var(--muted-foreground); }
.intro__media { position: relative; z-index: 1; }
.intro__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 40px 80px -30px oklch(0.145 0.004 60 / 0.35); }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.1); transform: scale(1.06); transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1); }
.intro__media:hover .intro__photo img { transform: scale(1.16); }
.intro__photo-frame { position: absolute; inset: 1.1rem; border: 1px solid oklch(0.955 0.004 80 / 0.6); pointer-events: none; }
.intro__cta {
display: inline-block; position: relative; overflow: hidden; isolation: isolate;
margin-top: 2.75rem; border: 1px solid var(--foreground); padding: 1rem 2.5rem;
font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--foreground);
transition: color 0.45s ease 0.05s, border-color 0.45s ease;
}
.intro__cta::before {
content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--accent);
transform: translateX(-101%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.intro__cta:hover::before { transform: translateX(0); }
.intro__cta:hover { border-color: var(--accent); color: var(--accent-foreground); }
/* =============================================================================
Highlights (Ace Aesthetic Experience)
========================================================================== */
.highlights { position: relative; border-bottom: 1px solid var(--border); background-color: oklch(0.952 0.004 75 / 0.4); overflow: hidden; }
.highlights__inner { position: relative; margin-inline: auto; display: grid; max-width: 80rem; gap: 4rem; padding: 6.5rem 1.5rem; }
@media (min-width: 1024px) { .highlights__inner { grid-template-columns: 1fr 0.85fr; gap: 5.5rem; align-items: center; padding-block: 9.5rem; } }
.highlights__eyebrow { color: var(--accent); }
.highlights__heading {
margin-top: 0.85rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; line-height: 1.15;
}
@media (min-width: 640px) { .highlights__heading { font-size: 3rem; } }
.highlights__heading em { font-style: italic; text-transform: none; color: var(--accent); }
.highlights__items { margin-top: 3.25rem; }
.highlights__item {
position: relative; display: flex; gap: 1.75rem; border-top: 1px solid var(--border);
padding-block: 2.1rem; overflow: hidden;
}
.highlights__items li:last-child { border-bottom: 1px solid var(--border); }
.highlights__item-ghost {
position: absolute; top: 50%; right: -0.5rem; transform: translateY(-50%); font-family: var(--font-display);
font-size: 5.5rem; font-weight: 300; color: oklch(0.17 0.005 60 / 0.04); pointer-events: none; line-height: 1;
z-index: 0;
}
.highlights__num {
position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.0625rem; font-style: italic;
color: var(--accent); flex-shrink: 0; padding-top: 0.15rem;
}
.highlights__item h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; letter-spacing: 0.01em; }
.highlights__item p { position: relative; z-index: 1; margin-top: 0.75rem; max-width: 30rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.highlights__photo-wrap { position: relative; }
.highlights__photo { position: relative; overflow: hidden; box-shadow: 0 40px 90px -30px oklch(0.145 0.004 60 / 0.3); }
.highlights__photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; filter: grayscale(0.1); transform: scale(1.05); transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1); }
.highlights__photo-wrap:hover .highlights__photo img { transform: scale(1.15); }
.highlights__photo-frame { position: absolute; inset: 1rem; border: 1px solid oklch(0.955 0.004 80 / 0.55); pointer-events: none; }
.highlights__caption {
position: relative; margin-top: -1.75rem; margin-inline: auto; width: fit-content; z-index: 2;
background-color: var(--card); padding: 0.85rem 1.75rem; box-shadow: 0 12px 30px -12px oklch(0.145 0.004 60 / 0.2);
text-align: center; font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--foreground);
}
.highlights__caption span { display: block; margin-top: 0.15rem; font-family: var(--font-sans); font-style: normal; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--muted-foreground); }
/* Payment plan pages (Cherry / CareCredit) reuse .highlights — this reversed
variant swaps the column order at desktop so the photo can sit on the
left, matching the client's alternating Cherry/CareCredit layout. */
@media (min-width: 1024px) {
.highlights--reverse .highlights__copy { order: 2; }
.highlights--reverse .highlights__photo-wrap { order: 1; }
}
.highlights__footnote { margin-top: 0.5rem; font-size: 0.75rem; font-style: italic; opacity: 0.75; }
.highlights__cta-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }
.highlights__cta-row .intro__cta { margin-top: 0; }
.highlights__cta-row .faq__cta { margin-top: 0; }
.finance-logo { height: 48px; width: auto; display: block; }
/* Full-width payment-plan panel (edge-to-edge photo + copy column) */
.pp-panel {
position: relative; display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--border); background-color: oklch(0.978 0.004 80);
}
@media (max-width: 900px) { .pp-panel { grid-template-columns: 1fr; } }
.pp-panel__media { order: 1; position: relative; overflow: hidden; min-height: 26rem; background-color: oklch(0.145 0.004 60); }
@media (min-width: 900px) { .pp-panel__media { min-height: 44rem; } }
.pp-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.pp-panel__copy {
order: 2; padding: 4rem 1.75rem; display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 900px) { .pp-panel__copy { padding: 6rem 5rem; } }
.pp-panel--reverse .pp-panel__media { order: 2; }
.pp-panel--reverse .pp-panel__copy { order: 1; }
/* =============================================================================
Menu (Comprehensive Aesthetic Menu)
========================================================================== */
/* =============================================================================
Menu (Comprehensive Aesthetic Menu) — dark editorial bento grid
========================================================================== */
.menu { position: relative; background-color: var(--ink); color: var(--ink-foreground); overflow: hidden; }
.menu::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(60% 42% at 50% 0%, oklch(0.682 0.082 82 / 0.09), transparent 70%);
}
.menu__inner { position: relative; margin-inline: auto; max-width: 84rem; padding: 4rem 1.5rem 6.5rem; }
@media (min-width: 1024px) { .menu__inner { padding: 4.5rem 2.5rem clamp(5.5rem, 10vw, 9.5rem); } }
.menu__head {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem;
padding-bottom: 2.25rem; margin-bottom: 4.5rem; border-bottom: 1px solid oklch(0.955 0.004 80 / 0.14);
}
.menu__eyebrow { color: var(--accent); }
.menu__heading { margin-top: 0.75rem; font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--ink-foreground); }
@media (min-width: 640px) { .menu__heading { font-size: 2.75rem; } }
.menu__heading em { font-style: italic; }
.menu__sub { margin-top: 0.6rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); }
.menu__desc { max-width: 30rem; font-size: 0.875rem; line-height: 1.8; color: oklch(0.955 0.004 80 / 0.62); }
/* Centered head variant — small gold ornament, an elevated heading, and the description
set as a centered editorial pull-quote (no boxed/black background, no diamond frame). */
.menu__head--centered {
display: block; text-align: center; border-bottom: none; padding-bottom: 0; margin-bottom: 3rem;
}
.menu__head--centered .menu__ornament { margin-bottom: 1.25rem; }
.menu__ornament::before, .menu__ornament::after {
width: 3.5rem; background: linear-gradient(90deg, transparent, oklch(0.682 0.082 82 / 0.65));
}
.menu__ornament::after { background: linear-gradient(90deg, oklch(0.682 0.082 82 / 0.65), transparent); }
.menu__ornament span {
width: 9px; height: 9px; box-shadow: 0 0 14px 1px oklch(0.682 0.082 82 / 0.55);
}
/* Heading restyled to match the "Empowering Your Aesthetic Journey" eyebrow
label per client request: same small tracked-caps treatment (.eyebrow +
.menu__eyebrow) instead of a large display headline. */
.menu__head--centered .menu__heading {
margin-top: 0; text-align: center;
font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500;
letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent);
}
.menu__head--centered .menu__heading em { font-style: normal; color: var(--accent); }
/* Paragraph restyled to match .menu__outro h3's pull-quote treatment —
same font, italic, weight, line-height, size and color. */
.menu__head--centered .menu__desc {
/* Widened (not shrunk in font-size) so the paragraph settles into 3 lines
on desktop instead of 5 — per client request, the fix is more
horizontal room, not smaller type. */
margin: 1.75rem auto 0; max-width: 78rem; text-align: center;
text-wrap: balance;
font-family: var(--font-display); font-style: italic; font-weight: 300;
font-size: clamp(1.375rem, 3vw, 1.875rem); line-height: 1.4;
color: var(--ink-foreground);
}
/* margin-bottom restores the breathing room the removed "The Aesthetic
Essentials:" subhead used to provide before the card grid — without it
this paragraph sat flush against the first row of cards. */
.menu__kicker { text-align: center; font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: oklch(0.955 0.004 80 / 0.5); margin-bottom: 3rem; }
.menu__subhead { margin-top: 0.4rem; text-align: center; font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; color: var(--ink-foreground); margin-bottom: 4rem; }
@media (min-width: 640px) { .menu__subhead { font-size: 2.125rem; } }
.menu__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background-color: oklch(0.955 0.004 80 / 0.14); }
@media (max-width: 900px) { .menu__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .menu__grid { grid-template-columns: 1fr; } }
.menu__card { position: relative; overflow: hidden; min-height: 24rem; display: flex; align-items: flex-end; background-color: var(--ink); }
.menu__card:nth-child(1), .menu__card:nth-child(2) { grid-column: span 3; min-height: 30rem; }
.menu__card:nth-child(3), .menu__card:nth-child(4), .menu__card:nth-child(5) { grid-column: span 2; min-height: 25rem; }
.menu__card:nth-child(6), .menu__card:nth-child(7) { grid-column: span 3; min-height: 27rem; }
@media (max-width: 900px) {
.menu__card:nth-child(1), .menu__card:nth-child(2), .menu__card:nth-child(3),
.menu__card:nth-child(4), .menu__card:nth-child(5), .menu__card:nth-child(6), .menu__card:nth-child(7) {
grid-column: span 2; min-height: 26rem;
}
}
@media (max-width: 560px) {
.menu__card:nth-child(1), .menu__card:nth-child(2), .menu__card:nth-child(3),
.menu__card:nth-child(4), .menu__card:nth-child(5), .menu__card:nth-child(6), .menu__card:nth-child(7) {
grid-column: span 1; min-height: 22rem;
}
}
.menu__card-ghost {
position: absolute; top: 1.1rem; right: 1.35rem; font-family: var(--font-display); font-weight: 300;
font-size: 5.5rem; line-height: 1; color: oklch(0.955 0.004 80 / 0.07); z-index: 1; pointer-events: none;
}
.menu__card-img { position: absolute; inset: 0; overflow: hidden; }
.menu__card-img img {
width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35); transform: scale(1.06);
transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
}
.menu__card:hover .menu__card-img img { transform: scale(1.16); filter: grayscale(0); }
.menu__card-scrim {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(0deg, oklch(0 0 0 / 0.86) 12%, oklch(0 0 0 / 0.15) 62%, oklch(0 0 0 / 0.05) 100%);
}
.menu__card-body { position: relative; z-index: 2; padding: 1.75rem 1.6rem; width: 100%; }
.menu__card-body .menu__card-num { font-family: var(--font-display); font-size: 0.8125rem; color: var(--accent); letter-spacing: 0.1em; display: block; margin-bottom: 0.6rem; }
.menu__card-body h3 { font-size: 1.1875rem; margin-bottom: 0.6rem; line-height: 1.25; font-family: var(--font-display); font-weight: 400; color: var(--ink-foreground); }
.menu__card-sub { display: block; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: oklch(0.955 0.004 80 / 0.5); margin-top: 0.2rem; }
.menu__card-body p {
font-size: 0.8125rem; color: oklch(0.955 0.004 80 / 0.66); max-height: 0; opacity: 0; overflow: hidden;
transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, margin 0.5s ease; line-height: 1.65;
}
.menu__card:hover .menu__card-body p { max-height: 14rem; opacity: 1; margin-bottom: 0.75rem; }
.menu__card-link {
font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
display: inline-flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid transparent;
transition: border-color 0.35s ease, gap 0.35s ease;
}
.menu__card-link:hover { border-color: var(--accent); gap: 0.75rem; }
.menu__outro { text-align: center; margin-top: 5rem; padding-top: 4.25rem; border-top: 1px solid oklch(0.955 0.004 80 / 0.14); }
.menu__outro h3 {
font-size: clamp(1.375rem, 3vw, 1.875rem); max-width: 44rem; margin: 1.25rem auto 2.1rem;
font-family: var(--font-display); font-style: italic; font-weight: 300; line-height: 1.4; color: var(--ink-foreground);
}
.menu__outro-btn { background-color: var(--accent); color: var(--accent-foreground); }
.menu__outro-btn::before { background-color: var(--ink-foreground); }
.menu__outro-btn:hover { color: var(--ink); }
/* Standalone use on the Cherry/CareCredit pages, where .menu__outro isn't
preceded by the treatment grid it normally sits under. */
.menu__outro--standalone { margin-top: 0; padding-top: 0; border-top: none; }
.menu__outro--standalone-inner { max-width: 84rem; margin-inline: auto; padding: 5.5rem 1.5rem; }
@media (min-width: 1024px) { .menu__outro--standalone-inner { padding: 6.5rem 2.5rem; } }
/* =============================================================================
Concierge Details (When / Where / How)
========================================================================== */
.concierge-details { position: relative; border-bottom: 1px solid var(--border); background-color: oklch(0.952 0.004 75 / 0.4); overflow: hidden; }
.concierge-details::before {
content: "TAILORED"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-family: var(--font-display); font-size: 16vw; font-weight: 600; letter-spacing: 0.02em;
color: oklch(0.17 0.005 60 / 0.025); white-space: nowrap; pointer-events: none; user-select: none;
}
@media (max-width: 767px) {
/* Same issue as .intro__watermark: single-column stacking makes this section
tall, so vertical-centering runs the faint background word straight
through the "Where" column heading. It's decorative only — hide it once stacked. */
.concierge-details::before { display: none; }
}
.concierge-details__inner { position: relative; margin-inline: auto; max-width: 68rem; padding: 6rem 1.5rem; text-align: center; }
@media (min-width: 1024px) { .concierge-details__inner { padding-block: 9rem; } }
.concierge-details__heading { margin-top: 1rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; text-transform: uppercase; letter-spacing: 0.04em; }
@media (min-width: 640px) { .concierge-details__heading { font-size: 3rem; } }
.concierge-details__heading em { font-style: italic; text-transform: none; color: var(--accent); }
.concierge-details__sub { margin-top: 1.25rem; color: var(--accent); }
.concierge-details__grid { position: relative; margin-top: 4.5rem; display: grid; grid-template-columns: 1fr; gap: 3.5rem; text-align: left; }
@media (min-width: 768px) { .concierge-details__grid { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.concierge-details__col { position: relative; padding-inline: 0; }
@media (min-width: 768px) { .concierge-details__col { padding-inline: 2.75rem; } }
@media (min-width: 768px) { .concierge-details__col + .concierge-details__col { border-left: 1px solid var(--border); } }
.concierge-details__col-num {
display: block; margin-bottom: 1.25rem; font-family: var(--font-display); font-size: 1rem; font-style: italic;
color: var(--accent);
}
.concierge-details__col h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--foreground); }
.concierge-details__col p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.75; color: var(--muted-foreground); }
/* =============================================================================
Testimonials
========================================================================== */
/* =============================================================================
Testimonials — editorial dark cinema
========================================================================== */
.testimonials { position: relative; background-color: oklch(0.952 0.004 75 / 0.5); color: var(--foreground); }
.testimonials::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(80% 50% at 80% 0%, oklch(0.682 0.082 82 / 0.06), transparent 60%);
}
.testimonials__heading { color: var(--foreground); }
.testimonials__card {
background: linear-gradient(160deg, oklch(0.98 0.003 80), oklch(0.96 0.004 75));
border: 1px solid var(--border);
}
.testimonials__card:hover {
border-color: var(--accent); transform: translateY(-8px);
box-shadow: 0 30px 60px -20px oklch(0.145 0.004 60 / 0.15), 0 0 40px -10px oklch(0.682 0.082 82 / 0.1);
}
.testimonials__card::before { color: oklch(0.682 0.082 82 / 0.18); }
.testimonials__card::after { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.testimonials__card p { color: oklch(0.17 0.005 60 / 0.75); }
.testimonials__card footer { border-top: 1px solid var(--border); }
.testimonials__card cite { color: var(--foreground); }
.testimonials__card footer a { border: 1px solid oklch(0.682 0.082 82 / 0.35); color: var(--accent); }
.testimonials__card footer a:hover { background-color: var(--accent); color: var(--accent-foreground); }
.testimonials__more { color: var(--accent); }
.testimonials__more:hover { color: var(--foreground); }
.testimonials::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(80% 50% at 80% 0%, oklch(0.682 0.082 82 / 0.08), transparent 60%);
}
.testimonials__inner { position: relative; margin-inline: auto; max-width: 80rem; padding: 4.5rem 1.5rem 6rem; }
@media (min-width: 1024px) { .testimonials__inner { padding: 5.5rem 2.5rem 7.5rem; } }
.testimonials__head { text-align: center; }
.testimonials__head .eyebrow { color: var(--accent); }
.testimonials__heading { margin-top: 1.25rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; text-transform: uppercase; letter-spacing: 0.04em; color: var(--foreground); }
@media (min-width: 640px) { .testimonials__heading { font-size: 3rem; } }
.testimonials__heading em { font-style: italic; text-transform: none; color: var(--accent); }
.testimonials__head-stars { margin-top: 1.25rem; font-size: 1.375rem; letter-spacing: 0.3em; color: var(--foreground); }
.testimonials__grid { margin-top: 5rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .testimonials__grid { grid-template-columns: repeat(3, 1fr); } }
.testimonials__card {
position: relative; padding: 2.5rem 2rem 2rem;
background: linear-gradient(160deg, oklch(0.18 0.005 60), oklch(0.145 0.004 60));
border: 1px solid oklch(0.955 0.004 80 / 0.08);
transition: border-color 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.testimonials__card:hover {
border-color: oklch(0.682 0.082 82 / 0.4); transform: translateY(-8px);
box-shadow: 0 30px 60px -20px oklch(0 0 0 / 0.5), 0 0 40px -10px oklch(0.682 0.082 82 / 0.15);
}
.testimonials__card::before {
content: "\201C"; position: absolute; top: -0.2rem; left: 1.2rem; font-family: var(--font-display);
font-size: 5rem; font-style: italic; line-height: 1; color: oklch(0.682 0.082 82 / 0.2);
pointer-events: none;
}
.testimonials__card::after {
content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0; transition: opacity 0.5s ease;
}
.testimonials__card:hover::after { opacity: 1; }
.testimonials__stars { color: var(--accent); font-size: 0.8125rem; letter-spacing: 0.2em; }
.testimonials__card p { position: relative; margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.8; color: oklch(0.955 0.004 80 / 0.72); }
.testimonials__card footer { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid oklch(0.955 0.004 80 / 0.08); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.testimonials__card cite { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--ink-foreground); }
.testimonials__card footer a {
font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent);
border: 1px solid oklch(0.682 0.082 82 / 0.3); padding: 0.4rem 0.85rem;
transition: background-color 0.4s ease, color 0.4s ease;
}
.testimonials__card footer a:hover { background-color: var(--accent); color: var(--accent-foreground); }
.testimonials__more {
display: block; margin-top: 4rem; text-align: center; font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.3em; color: var(--accent);
transition: color 0.3s ease;
}
.testimonials__more:hover { color: var(--foreground); }
/* =============================================================================
Booking
========================================================================== */
.booking {
position: relative; background-color: var(--ink); color: var(--ink-foreground);
}
.booking::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(60% 50% at 15% 0%, oklch(0.682 0.082 82 / 0.1), transparent 70%);
}
.booking__inner { margin-inline: auto; display: grid; max-width: 80rem; gap: 4rem; padding: 6rem 1.5rem; }
@media (min-width: 1024px) { .booking__inner { grid-template-columns: 1.15fr 1fr; gap: 5rem; padding: 9rem 2.5rem; } }
.booking__copy { position: relative; }
.booking__vertical-label {
position: absolute; left: -1.5rem; top: 0.5rem; display: none; color: var(--ink-muted);
writing-mode: vertical-rl; transform: rotate(180deg);
}
@media (min-width: 1280px) { .booking__vertical-label { display: block; } }
.booking__copy .eyebrow.inline-label { color: var(--accent); }
@media (min-width: 1280px) { .booking__copy .eyebrow.inline-label { display: none; } }
.booking__heading {
margin-top: 1.25rem; font-family: var(--font-display); font-size: 3rem; font-weight: 300; text-transform: uppercase;
line-height: 0.95; letter-spacing: 0.04em;
}
@media (min-width: 640px) { .booking__heading { font-size: 3.75rem; } }
@media (min-width: 1024px) { .booking__heading { font-size: 4.5rem; } }
.booking__heading em { font-style: italic; text-transform: none; letter-spacing: normal; }
.booking__list { margin-top: 4rem; }
.booking__item {
display: flex; gap: 2rem; border-top: 1px solid oklch(0.955 0.004 80 / 0.12);
padding-block: 2rem; transition: border-color 0.5s ease;
}
.booking__list li:last-child { border-bottom: 1px solid oklch(0.955 0.004 80 / 0.12); }
.booking__item:hover { border-color: oklch(0.955 0.004 80 / 0.25); }
.booking__num {
flex-shrink: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
border: 1px solid oklch(0.955 0.004 80 / 0.2); border-radius: 999px;
font-family: var(--font-display); font-size: 0.9375rem; font-style: italic; color: var(--accent);
transition: border-color 0.5s ease, background-color 0.5s ease;
}
.booking__item:hover .booking__num { border-color: var(--accent); background-color: oklch(0.682 0.082 82 / 0.1); }
.booking__item h3 {
font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; letter-spacing: 0.04em;
transition: color 0.5s ease;
}
.booking__item:hover h3 { color: var(--accent); }
.booking__item p { margin-top: 0.75rem; max-width: 36rem; font-size: 0.875rem; line-height: 1.7; color: var(--ink-muted); }
.booking__photo-wrap { }
@media (min-width: 1024px) { .booking__photo-wrap { position: sticky; top: 7rem; align-self: start; } }
.booking__photo { position: relative; overflow: hidden; box-shadow: 0 40px 80px -30px oklch(0 0 0 / 0.6); }
.booking__photo img {
aspect-ratio: 2 / 3; width: 100%; transform: scale(1.18); object-fit: cover;
filter: brightness(1.35) contrast(1.05);
transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.booking__photo-wrap:hover .booking__photo img { transform: scale(1.28); }
.booking__photo-scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, oklch(0.145 0.004 60 / 0.05), oklch(0.145 0.004 60 / 0.35) 100%),
linear-gradient(0deg, oklch(0.682 0.082 82 / 0.14), transparent 40%);
}
.booking__photo-frame { position: absolute; inset: 1rem; border: 1px solid oklch(0.955 0.004 80 / 0.45); pointer-events: none; }
.booking__caption { margin-top: 1.25rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.34em; color: var(--ink-muted); }
/* =============================================================================
About
========================================================================== */
.about { position: relative; border-bottom: 1px solid var(--border); background-color: var(--background); overflow: hidden; }
.about::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(50% 45% at 12% 20%, oklch(0.682 0.082 82 / 0.07), transparent 70%);
}
.about__watermark {
position: absolute; top: -3vw; right: -1vw; font-family: var(--font-display); font-size: 13vw; font-weight: 600;
color: oklch(0.17 0.005 60 / 0.025); pointer-events: none; user-select: none; line-height: 1; z-index: 0;
}
.about__inner {
position: relative; z-index: 1; margin-inline: auto; max-width: 78rem; padding: 6rem 1.5rem;
display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: start;
}
@media (min-width: 1024px) { .about__inner { grid-template-columns: 0.85fr 1.15fr; gap: 5rem; padding-block: 9rem; } }
.about__portrait-wrap { max-width: 26rem; margin-inline: auto; }
@media (min-width: 1024px) { .about__portrait-wrap { max-width: none; } }
.about__portrait { position: relative; filter: drop-shadow(0 30px 60px -24px oklch(0.145 0.004 60 / 0.35)); }
.about__portrait .frame-zoom { aspect-ratio: 4 / 5; }
.about__portrait .frame-zoom img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.1); transform: scale(1.04); transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1); }
.about__portrait-wrap:hover .about__portrait .frame-zoom img { transform: scale(1.14); }
.about__portrait-frame {
position: absolute; inset: 1.1rem; border: 1px solid oklch(0.955 0.004 80 / 0.7); pointer-events: none;
z-index: 2;
}
.about__portrait-corner { position: absolute; width: 3rem; height: 3rem; z-index: 3; pointer-events: none; }
.about__portrait-corner--tl { top: -0.6rem; left: -0.6rem; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.about__portrait-corner--br { bottom: -0.6rem; right: -0.6rem; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.about__portrait-badge {
position: absolute; left: 1.5rem; top: 1.5rem; z-index: 4;
display: flex; align-items: baseline; gap: 0.5rem;
background-color: var(--card); padding: 0.85rem 1.25rem;
box-shadow: 0 16px 34px -14px oklch(0.145 0.004 60 / 0.4);
font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground);
max-width: calc(100% - 3rem);
}
.about__portrait-badge span { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--accent); }
.about__portrait-caption { margin-top: 1.75rem; text-align: center; }
.about__portrait-caption .name { display: block; font-family: var(--font-display); font-size: 1.375rem; font-style: italic; font-weight: 300; }
.about__portrait-caption .role {
position: relative; margin-top: 0.6rem; padding-top: 0.6rem; font-size: 0.625rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.35em; color: var(--muted-foreground);
}
.about__portrait-caption .role::before {
content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 1.75rem; height: 1px; background: var(--accent);
}
/* Layered duo — one composed photo unit instead of two separate boxes. The main portrait
anchors the column; the second photo overlaps its bottom-right corner with a white
"print" border, the same layering technique already used in the Experience section
below (.experience__img-a / .experience__img-b), so it reads as one considered piece. */
.about__duo { position: relative; padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .about__duo { padding-bottom: 4.5rem; } }
.about__duo-accent {
position: absolute; right: -1rem; bottom: -1.25rem; z-index: 5;
width: 54%; aspect-ratio: 4 / 5; overflow: hidden;
border: 9px solid var(--background);
box-shadow: 0 28px 50px -18px oklch(0.145 0.004 60 / 0.45);
/* Wipes up into view a beat after the main portrait — a small standout
moment rather than just fading in with everything else at once. */
clip-path: inset(0% 0% 100% 0%);
transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.32s;
}
.about__portrait-wrap.is-visible .about__duo-accent { clip-path: inset(0% 0% 0% 0%); }
@media (min-width: 640px) { .about__duo-accent { border-width: 12px; bottom: -1.75rem; } }
.about__duo-accent img {
width: 100%; height: 100%; object-fit: cover; object-position: top center;
filter: grayscale(0.12); transform: scale(1.04);
transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.about__portrait-wrap:hover .about__duo-accent img { transform: scale(1.14); filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) {
.about__duo-accent { clip-path: none; transition: none; }
}
.about__eyebrow-row { display: flex; align-items: center; gap: 0.65rem; margin-top: 1.5rem; }
.about__flourish {
width: 1.75rem; height: 1px; background: linear-gradient(90deg, transparent, var(--accent));
transform-origin: left center; transform: scaleX(0);
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.is-visible .about__flourish { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .about__flourish { transform: none; transition: none; } }
.about__star { font-size: 1rem; color: var(--accent); }
.about__inner .eyebrow { margin-top: 0; color: var(--muted-foreground); }
.about__heading {
margin-top: 1rem; font-family: var(--font-display); font-size: 2.25rem;
font-weight: 300; line-height: 1.2;
}
@media (min-width: 640px) { .about__heading { font-size: 2.75rem; } }
.about__heading em { font-style: italic; }
.about__body { margin-top: 2.25rem; max-width: 42rem; text-align: left; font-size: 0.9375rem; line-height: 1.9; color: oklch(0.17 0.005 60 / 0.75); }
.about__body p + p { margin-top: 1.5rem; }
.about__quote {
position: relative; margin: 2.25rem 0; max-width: 42rem; padding: 0.5rem 0 0.5rem 2rem;
border-left: 2px solid var(--accent);
}
.about__quote-mark {
position: absolute; top: -1.1rem; left: 1.15rem; font-family: var(--font-display); font-size: 3.5rem;
font-style: italic; line-height: 1; color: oklch(0.682 0.082 82 / 0.3); pointer-events: none;
}
.about__quote p {
font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.1875rem;
line-height: 1.65; color: var(--foreground);
}
.about__quote em { font-style: italic; color: var(--accent); }
.about__stats { margin-top: 2.75rem; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 32rem; gap: 0.85rem; }
.about__stat {
border-left: 1px solid var(--accent); background: linear-gradient(160deg, oklch(0.952 0.004 75 / 0.7), transparent);
padding: 1rem 0 1rem 1.1rem;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease;
}
.about__stat:hover { transform: translateY(-3px); }
.about__stat-num { display: block; font-family: var(--font-display); font-size: 1.875rem; font-weight: 300; color: var(--foreground); }
.about__stat-label { display: block; margin-top: 0.3rem; font-size: 0.5625rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground); }
.about__signature { margin-top: 2.5rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 300; font-style: italic; color: var(--foreground); }
.about__role { margin-top: 0.5rem; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4em; color: var(--muted-foreground); }
.about__press { margin-top: 3.25rem; padding-top: 2.25rem; border-top: 1px solid var(--border); }
.about__press-label { font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); }
.about__press-links { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.about__press-badge {
display: block; width: 5.5rem; height: 5.5rem; border-radius: 999px; overflow: hidden;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
box-shadow: 0 4px 14px -6px oklch(0.145 0.004 60 / 0.25);
}
@media (min-width: 640px) { .about__press-badge { width: 6.5rem; height: 6.5rem; } }
.about__press-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__press-badge:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 24px -8px oklch(0.145 0.004 60 / 0.35); }
/* =============================================================================
FAQ
========================================================================== */
/* =============================================================================
FAQ — split-column editorial
========================================================================== */
.faq { position: relative; background-color: var(--ink); color: var(--ink-foreground); overflow: hidden; }
.faq::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(70% 40% at 20% 100%, oklch(0.682 0.082 82 / 0.07), transparent 60%);
}
.faq__inner {
position: relative; margin-inline: auto; max-width: 80rem; padding: 4.5rem 1.5rem 6rem;
display: grid; grid-template-columns: 1fr; gap: 4rem;
}
@media (min-width: 1024px) { .faq__inner { grid-template-columns: 0.7fr 1.3fr; gap: 6rem; align-items: start; padding: 5.5rem 2.5rem 7.5rem; } }
.faq__head { position: sticky; top: 8rem; }
.faq__head .eyebrow { color: var(--accent); }
.faq__heading { margin-top: 1.25rem; font-family: var(--font-display); font-size: 2.5rem; font-weight: 300; line-height: 1.15; color: var(--ink-foreground); }
@media (min-width: 640px) { .faq__heading { font-size: 3.25rem; } }
.faq__heading em { font-style: italic; color: var(--accent); }
.faq__sub { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.8; color: oklch(0.955 0.004 80 / 0.55); max-width: 22rem; }
.faq__cta { display: inline-block; margin-top: 2.5rem; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--accent); border-bottom: 1px solid oklch(0.682 0.082 82 / 0.4); padding-bottom: 0.25rem; transition: border-color 0.3s ease; }
.faq__cta:hover { border-color: var(--accent); }
.faq__list { }
.faq__item {
border-top: 1px solid oklch(0.955 0.004 80 / 0.1);
position: relative;
transition: background-color 0.4s ease;
}
.faq__item::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--accent); transform: scaleY(0); transform-origin: top;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq__item.is-open::before { transform: scaleY(1); }
.faq__list .faq__item:last-child { border-bottom: 1px solid oklch(0.955 0.004 80 / 0.1); }
.faq__q {
display: flex; width: 100%; align-items: center; gap: 1.5rem;
padding: 2rem 1.5rem; text-align: left; cursor: pointer;
}
.faq__q-text {
flex: 1; font-family: var(--font-display); font-size: 1.25rem; font-weight: 300; letter-spacing: 0.02em;
color: oklch(0.955 0.004 80 / 0.85); transition: color 0.4s ease;
}
.faq__item.is-open .faq__q-text { color: var(--ink-foreground); }
.faq__q-text::before { content: counter(faq-counter, decimal-leading-zero); counter-increment: faq-counter; font-size: 0.6875rem; font-family: var(--font-sans); letter-spacing: 0.12em; color: var(--accent); margin-right: 0.85rem; flex-shrink: 0; }
.faq__list { counter-reset: faq-counter; }
.faq__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: var(--accent); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; opacity: 0.7; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); opacity: 1; }
.faq__a-wrap { overflow: hidden; max-height: 0; transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.faq__item.is-open .faq__a-wrap { max-height: 24rem; }
.faq__a-inner { padding: 0 1.5rem 2rem; }
.faq__a { font-size: 0.9375rem; line-height: 1.85; color: oklch(0.955 0.004 80 / 0.6); }
/* =============================================================================
Instagram — full-bleed asymmetric mosaic
========================================================================== */
.instagram { position: relative; background-color: var(--background); overflow: hidden; }
.instagram__inner { margin-inline: auto; max-width: 80rem; padding: 4.5rem 1.5rem 6rem; }
@media (min-width: 1024px) { .instagram__inner { padding: 5.5rem 2.5rem 7.5rem; } }
.instagram__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 4rem; }
.instagram__eyebrow { color: var(--accent); }
.instagram__heading {
margin-top: 1rem; font-family: var(--font-display); font-size: 2rem; font-weight: 300; line-height: 1.15;
}
@media (min-width: 640px) { .instagram__heading { font-size: 2.75rem; } }
.instagram__heading em { font-style: italic; color: var(--accent); }
.instagram__desc { font-size: 0.875rem; line-height: 1.75; color: var(--muted-foreground); max-width: 22rem; }
.instagram__follow {
display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.625rem; text-transform: uppercase;
letter-spacing: 0.28em; color: var(--foreground); border: 1px solid var(--border); padding: 0.85rem 1.6rem;
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.instagram__follow:hover { background-color: var(--foreground); color: var(--background); border-color: var(--foreground); }
.instagram__follow svg { width: 1rem; height: 1rem; }
.instagram__mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
gap: 0.5rem;
}
@media (max-width: 767px) { .instagram__mosaic { grid-template-columns: repeat(2, 1fr); } }
.instagram__post {
position: relative; display: block; overflow: hidden; background-color: var(--ink);
transition: box-shadow 0.5s ease;
}
.instagram__post.reveal {
transform: scale(0.96) translateY(16px); opacity: 0;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease, box-shadow 0.5s ease;
}
.instagram__post.reveal.is-visible { transform: scale(1) translateY(0); opacity: 1; }
.instagram__post:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; --reveal-delay: 0ms; }
.instagram__post:nth-child(2) { aspect-ratio: 1/1; --reveal-delay: 80ms; }
.instagram__post:nth-child(3) { aspect-ratio: 1/1; --reveal-delay: 160ms; }
.instagram__post:nth-child(4) { grid-column: span 2; aspect-ratio: 2/1; --reveal-delay: 240ms; }
.instagram__post:nth-child(5) { aspect-ratio: 1/1; --reveal-delay: 320ms; }
.instagram__post:nth-child(6) { aspect-ratio: 1/1; --reveal-delay: 400ms; }
@media (max-width: 767px) {
.instagram__post:nth-child(1) { grid-column: span 2; grid-row: span 1; aspect-ratio: 2/1; }
.instagram__post:nth-child(4) { grid-column: span 2; aspect-ratio: 2/1; }
}
.instagram__post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; filter: grayscale(0.15); }
.instagram__post:hover img { transform: scale(1.07); filter: grayscale(0); }
.instagram__post-overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.4rem;
background: linear-gradient(160deg, oklch(0.145 0.004 60 / 0.7), oklch(0.682 0.082 82 / 0.3));
opacity: 0; transition: opacity 0.4s ease;
}
.instagram__post:hover .instagram__post-overlay { opacity: 1; }
.instagram__post-overlay svg { width: 2rem; height: 2rem; color: var(--ink-foreground); }
.instagram__post-overlay span { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.22em; color: oklch(0.955 0.004 80 / 0.8); }
.closing-cta { position: relative; overflow: hidden; min-height: 32rem; display: flex; align-items: center; justify-content: center; }
.closing-cta__bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
filter: grayscale(1); animation: press-bg-drift 22s ease-in-out infinite alternate;
}
.closing-cta__scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, oklch(0.145 0.004 60 / 0.55), oklch(0.145 0.004 60 / 0.78));
}
.closing-cta__inner { position: relative; z-index: 1; max-width: 44rem; margin-inline: auto; padding: 6rem 1.5rem; text-align: center; }
.closing-cta__eyebrow { color: oklch(0.955 0.004 80 / 0.75); }
.closing-cta__eyebrow::after { display: none; }
.closing-cta__heading {
margin-top: 1.25rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; line-height: 1.25;
color: var(--ink-foreground);
}
@media (min-width: 640px) { .closing-cta__heading { font-size: 3rem; } }
.closing-cta__heading em { font-style: italic; color: var(--accent); }
.closing-cta__btn { display: inline-block; margin-top: 2.5rem; }
.closing-cta__note { display: block; margin-top: 1.5rem; font-size: 0.6875rem; line-height: 1.6; color: oklch(0.955 0.004 80 / 0.6); }
@media (prefers-reduced-motion: reduce) { .closing-cta__bg { animation: none; } }
/* =============================================================================
Footer
========================================================================== */
.footer { position: relative; background-color: var(--ink); color: var(--ink-foreground); overflow: hidden; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1; background: linear-gradient(to right, transparent, var(--accent) 50%, transparent); }
.footer__glow {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(55% 60% at 12% 0%, oklch(0.682 0.082 82 / 0.1), transparent 70%);
}
.footer__inner { position: relative; margin-inline: auto; max-width: 80rem; padding: 5.5rem 1.5rem 1.75rem; }
@media (min-width: 1024px) { .footer__inner { padding: 6.5rem 2.5rem 1.75rem; } }
.footer__grid { display: grid; gap: 3.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.3fr 0.85fr 1fr 1fr; gap: 3rem; } }
.footer__logo { height: 3.5rem; width: auto; display: block; }
@media (min-width: 640px) { .footer__logo { height: 4.5rem; } }
.footer__tagline { margin-top: 1.5rem; max-width: 20rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 300; font-style: italic; line-height: 1.6; color: oklch(0.955 0.004 80 / 0.75); }
.footer__socials { margin-top: 1.75rem; display: flex; align-items: center; gap: 0.75rem; }
.footer__socials a {
display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px;
border: 1px solid oklch(0.955 0.004 80 / 0.18); color: var(--ink-muted);
transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
}
.footer__socials a:hover { color: var(--ink); border-color: var(--accent); background-color: var(--accent); transform: translateY(-3px); }
.footer__socials svg { width: 1.05rem; height: 1.05rem; }
.footer nav .eyebrow, .footer > .footer__inner .eyebrow { color: var(--accent); }
.footer__links { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; }
.footer__links a { position: relative; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.22em; color: oklch(0.955 0.004 80 / 0.7); transition: color 0.35s ease, padding-left 0.35s ease; }
.footer__links a:hover { color: var(--ink-foreground); padding-left: 0.6rem; }
/* Locations — icon + address + a real "Get Directions" link per site */
.footer__locations { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; font-size: 0.875rem; line-height: 1.6; color: oklch(0.955 0.004 80 / 0.7); }
.footer__location { display: flex; gap: 0.85rem; align-items: flex-start; }
.footer__icon { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; color: var(--accent); opacity: 0.85; }
.footer__location-link {
display: inline-block; margin-top: 0.4rem; font-size: 0.625rem; font-weight: 500; text-transform: uppercase;
letter-spacing: 0.16em; color: var(--accent); border-bottom: 1px solid oklch(0.682 0.082 82 / 0.4);
transition: border-color 0.3s ease, color 0.3s ease;
}
.footer__location-link:hover { color: var(--ink-foreground); border-color: currentColor; }
.footer__concierge-note { margin-top: -0.5rem; padding-top: 1.25rem; border-top: 1px solid oklch(0.955 0.004 80 / 0.1); color: var(--ink-muted); }
/* Contact — icon-led lines instead of bare stacked text */
.footer__contact { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; font-size: 0.875rem; line-height: 1.7; color: oklch(0.955 0.004 80 / 0.7); }
.footer__contact .muted { color: var(--ink-muted); }
.footer__contact-line { display: flex; align-items: center; gap: 0.85rem; transition: color 0.35s ease; }
.footer__contact-line:hover { color: var(--accent); }
.footer__hours { display: flex; align-items: flex-start; gap: 0.85rem; margin-top: 0.25rem; }
.footer__hours .footer__icon { margin-top: 0.2rem; }
.footer__bottom {
position: relative; margin-top: 4.5rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
gap: 1.5rem; border-top: 1px solid oklch(0.955 0.004 80 / 0.1); padding-top: 2rem;
font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--ink-muted);
}
@media (min-width: 640px) { .footer__bottom { flex-direction: row; } }
.footer__bottom a:hover { color: var(--accent); }
.footer__bottom-links { display: flex; align-items: center; gap: 0.85rem; order: 3; }
@media (min-width: 640px) { .footer__bottom-links { order: 2; } }
.footer__bottom-dot { color: var(--accent); }
.footer__bottom p { order: 1; }
/* Floated out of the flex row and lifted onto the divider line itself, like
a badge — so it's out of the way and Privacy Policy / Terms of Service
become the rightmost item in the row automatically. */
.footer__totop {
position: absolute; top: -1.25rem; right: 0;
display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 999px;
background-color: var(--ink); border: 1px solid oklch(0.955 0.004 80 / 0.18); color: var(--ink-muted);
transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease, transform 0.4s ease;
}
.footer__totop:hover { color: var(--ink); border-color: var(--accent); background-color: var(--accent); transform: translateY(-3px); }
.footer__totop svg { width: 1rem; height: 1rem; }
.footer__credit {
margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid oklch(0.955 0.004 80 / 0.08);
display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap;
}
.footer__credit-ornament {
width: 5px; height: 5px; flex-shrink: 0; border: 1px solid var(--accent); transform: rotate(45deg);
}
.footer__credit-label {
font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--ink-muted);
}
.footer__credit-mark {
font-family: var(--font-display); font-style: italic; font-size: 1rem; letter-spacing: 0.01em;
color: var(--ink-foreground); text-decoration: none; position: relative; transition: color 0.4s ease;
}
.footer__credit-mark::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent);
transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease;
}
.footer__credit-mark:hover { color: var(--accent); }
.footer__credit-mark:hover::after { transform: scaleX(1); transform-origin: left; }
/* =============================================================================
Premium scroll-driven micro-animations
========================================================================== */
/* Staggered fade-up for grid children (menu cards, testimonials, instagram) */
.menu__card:nth-child(1) { --reveal-delay: 0ms; }
.menu__card:nth-child(2) { --reveal-delay: 80ms; }
.menu__card:nth-child(3) { --reveal-delay: 160ms; }
.menu__card:nth-child(4) { --reveal-delay: 240ms; }
.menu__card:nth-child(5) { --reveal-delay: 320ms; }
.menu__card:nth-child(6) { --reveal-delay: 400ms; }
.menu__card:nth-child(7) { --reveal-delay: 480ms; }
/* Heading text: clip-path reveal from bottom (editorial curtain effect) */
.clip-reveal {
clip-path: inset(0 0 100% 0);
transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.clip-reveal.is-visible, .is-visible .clip-reveal { clip-path: inset(0 0 0% 0); }
/* Horizontal line grow from center — for decorative dividers */
.line-grow {
transform: scaleX(0);
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.is-visible .line-grow, .line-grow.is-visible { transform: scaleX(1); }
/* Subtle float animation for decorative elements */
@keyframes gentle-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.float-anim { animation: gentle-float 5s ease-in-out infinite; }
/* Golden shimmer on accent text hover */
.shimmer-hover {
background: linear-gradient(110deg, var(--accent) 35%, oklch(0.85 0.08 82) 50%, var(--accent) 65%);
background-size: 250% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: background-position 0.8s ease;
}
.shimmer-hover:hover { background-position: -100% 0; }
/* Section divider: thin gold line that grows on scroll */
.section-divider {
width: 100%; height: 1px; background: var(--border); position: relative; overflow: hidden;
}
.section-divider::after {
content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transform: translateX(-100%);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-visible .section-divider::after, .section-divider.is-visible::after { transform: translateX(100%); }
/* Cursor glow follower (desktop only, via JS) */
.cursor-glow {
position: fixed; width: 320px; height: 320px; border-radius: 50%;
background: radial-gradient(closest-side, oklch(0.682 0.082 82 / 0.06), transparent 70%);
pointer-events: none; z-index: 100; transform: translate(-50%, -50%);
transition: opacity 0.5s ease;
will-change: left, top;
}
@media (pointer: coarse) { .cursor-glow { display: none; } }
/* Image tilt on hover — subtle 3D perspective */
.tilt-hover { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); perspective: 800px; }
.tilt-hover:hover { transform: perspective(800px) rotateY(-2deg) rotateX(1deg) scale(1.01); }
/* Booking policy items: slide in from left staggered */
/* =============================================================================
Premium staggered reveal animations — work WITH .reveal system
========================================================================== */
/* Booking items: slide from left when revealed */
.booking__item.reveal { transform: translateX(-30px); }
.booking__item.reveal.is-visible { transform: translateX(0); }
.booking__item:nth-child(1) { --reveal-delay: 0ms; }
.booking__item:nth-child(2) { --reveal-delay: 80ms; }
.booking__item:nth-child(3) { --reveal-delay: 160ms; }
.booking__item:nth-child(4) { --reveal-delay: 240ms; }
.booking__item:nth-child(5) { --reveal-delay: 320ms; }
.booking__item:nth-child(6) { --reveal-delay: 400ms; }
.booking__item:nth-child(7) { --reveal-delay: 480ms; }
/* Testimonial cards: scale up when revealed */
.testimonials__card.reveal { transform: scale(0.95) translateY(20px); }
.testimonials__card.reveal.is-visible { transform: scale(1) translateY(0); }
/* Footer columns: slide up when revealed */
.footer__col.reveal { transform: translateY(20px); }
.footer__col.reveal.is-visible { transform: translateY(0); }
.footer__col:nth-child(1) { --reveal-delay: 0ms; }
.footer__col:nth-child(2) { --reveal-delay: 100ms; }
.footer__col:nth-child(3) { --reveal-delay: 200ms; }
.footer__col:nth-child(4) { --reveal-delay: 300ms; }
.closing-cta { position: relative; overflow: hidden; min-height: 32rem; display: flex; align-items: center; justify-content: center; }
.closing-cta__bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
filter: grayscale(1); animation: press-bg-drift 22s ease-in-out infinite alternate;
}
.closing-cta__scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, oklch(0.145 0.004 60 / 0.55), oklch(0.145 0.004 60 / 0.78));
}
.closing-cta__inner { position: relative; z-index: 1; max-width: 44rem; margin-inline: auto; padding: 6rem 1.5rem; text-align: center; }
.closing-cta__eyebrow { color: oklch(0.955 0.004 80 / 0.75); }
.closing-cta__eyebrow::after { display: none; }
.closing-cta__heading {
margin-top: 1.25rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; line-height: 1.25;
color: var(--ink-foreground);
}
@media (min-width: 640px) { .closing-cta__heading { font-size: 3rem; } }
.closing-cta__heading em { font-style: italic; color: var(--accent); }
.closing-cta__btn { display: inline-block; margin-top: 2.5rem; }
.closing-cta__note { display: block; margin-top: 1.5rem; font-size: 0.6875rem; line-height: 1.6; color: oklch(0.955 0.004 80 / 0.6); }
@media (prefers-reduced-motion: reduce) { .closing-cta__bg { animation: none; } }
/* =============================================================================
Premium scroll-driven micro-animations
========================================================================== */
/* Staggered fade-up for grid children (menu cards, testimonials, instagram) */
.menu__card:nth-child(1) { --reveal-delay: 0ms; }
.menu__card:nth-child(2) { --reveal-delay: 80ms; }
.menu__card:nth-child(3) { --reveal-delay: 160ms; }
.menu__card:nth-child(4) { --reveal-delay: 240ms; }
.menu__card:nth-child(5) { --reveal-delay: 320ms; }
.menu__card:nth-child(6) { --reveal-delay: 400ms; }
.menu__card:nth-child(7) { --reveal-delay: 480ms; }
/* Heading text: clip-path reveal from bottom (editorial curtain effect) */
.clip-reveal {
clip-path: inset(0 0 100% 0);
transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.clip-reveal.is-visible, .is-visible .clip-reveal { clip-path: inset(0 0 0% 0); }
/* Horizontal line grow from center — for decorative dividers */
.line-grow {
transform: scaleX(0);
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.is-visible .line-grow, .line-grow.is-visible { transform: scaleX(1); }
/* Subtle float animation for decorative elements */
@keyframes gentle-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.float-anim { animation: gentle-float 5s ease-in-out infinite; }
/* Golden shimmer on accent text hover */
.shimmer-hover {
background: linear-gradient(110deg, var(--accent) 35%, oklch(0.85 0.08 82) 50%, var(--accent) 65%);
background-size: 250% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: background-position 0.8s ease;
}
.shimmer-hover:hover { background-position: -100% 0; }
/* Section divider: thin gold line that grows on scroll */
.section-divider {
width: 100%; height: 1px; background: var(--border); position: relative; overflow: hidden;
}
.section-divider::after {
content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
transform: translateX(-100%);
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-visible .section-divider::after, .section-divider.is-visible::after { transform: translateX(100%); }
/* Cursor glow follower (desktop only, via JS) */
.cursor-glow {
position: fixed; width: 320px; height: 320px; border-radius: 50%;
background: radial-gradient(closest-side, oklch(0.682 0.082 82 / 0.06), transparent 70%);
pointer-events: none; z-index: 100; transform: translate(-50%, -50%);
transition: opacity 0.5s ease;
will-change: left, top;
}
@media (pointer: coarse) { .cursor-glow { display: none; } }
/* Image tilt on hover — subtle 3D perspective */
.tilt-hover { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); perspective: 800px; }
.tilt-hover:hover { transform: perspective(800px) rotateY(-2deg) rotateX(1deg) scale(1.01); }
/* Booking policy items: slide in from left staggered */
.booking__item { transform: translateX(-30px); opacity: 0; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease; }
.booking__item.is-visible, .is-visible .booking__item { transform: translateX(0); opacity: 1; }
.booking__item:nth-child(1) { transition-delay: 0ms; }
.booking__item:nth-child(2) { transition-delay: 80ms; }
.booking__item:nth-child(3) { transition-delay: 160ms; }
.booking__item:nth-child(4) { transition-delay: 240ms; }
.booking__item:nth-child(5) { transition-delay: 320ms; }
.booking__item:nth-child(6) { transition-delay: 400ms; }
.booking__item:nth-child(7) { transition-delay: 480ms; }
/* Testimonial cards: scale up from slightly smaller */
.testimonials__card {
transform: scale(0.95) translateY(20px);
}
.testimonials__card.is-visible {
transform: scale(1) translateY(0);
}
/* Instagram grid: masonry-style stagger */
.instagram__post:nth-child(1) { --reveal-delay: 0ms; }
.instagram__post:nth-child(2) { --reveal-delay: 60ms; }
.instagram__post:nth-child(3) { --reveal-delay: 120ms; }
.instagram__post:nth-child(4) { --reveal-delay: 180ms; }
.instagram__post:nth-child(5) { --reveal-delay: 240ms; }
.instagram__post:nth-child(6) { --reveal-delay: 300ms; }
/* Footer links: subtle slide up stagger */
.footer__col { transform: translateY(20px); opacity: 0; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease; }
.footer__col.is-visible, .is-visible .footer__col { transform: translateY(0); opacity: 1; }
.footer__col:nth-child(1) { transition-delay: 0ms; }
.footer__col:nth-child(2) { transition-delay: 100ms; }
.footer__col:nth-child(3) { transition-delay: 200ms; }
.footer__col:nth-child(4) { transition-delay: 300ms; }
/* =============================================================================
Meet Paula (dedicated page — meet-paula.html)
========================================================================== */
/* --- Paula Hero --- */
.paula-hero { position: relative; display: flex; min-height: 85vh; align-items: flex-end; overflow: hidden; background-color: var(--ink); }
.paula-hero__media { position: absolute; inset: 0; overflow: hidden; }
/* Portrait pushed right so the text block (bottom-left) sits over open
shoulder/background instead of directly over her face — same fix as the
homepage hero, which pairs a right-weighted subject with a left-side
scrim for exactly this reason. */
.paula-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 15%; transform: scale(1.05); }
.paula-hero__scrim {
position: absolute; inset: 0;
background: linear-gradient(to top, oklch(0.145 0.004 60 / 0.95), oklch(0.145 0.004 60 / 0.55) 60%, oklch(0.145 0.004 60 / 0.6));
}
@media (max-width: 767px) {
/* On a narrow viewport the same object-position crops much tighter on
her face (a portrait-orientation photo, force-cropped into a wide
band), leaving far less clear background for the text to sit over —
the desktop-tuned scrim wasn't dark enough here. Push it further. */
.paula-hero__scrim { background: linear-gradient(to top, oklch(0.145 0.004 60 / 0.97), oklch(0.145 0.004 60 / 0.72) 65%, oklch(0.145 0.004 60 / 0.62)); }
.paula-hero__scrim-2 { background: linear-gradient(to right, oklch(0.145 0.004 60 / 0.6), transparent 85%); }
}
.paula-hero__scrim-2 {
position: absolute; inset: 0;
background: linear-gradient(to right, oklch(0.145 0.004 60 / 0.75), transparent 62%);
}
.paula-hero__inner { position: relative; margin-inline: auto; width: 100%; max-width: 80rem; padding: 10rem 1.5rem 6rem; }
@media (min-width: 1024px) { .paula-hero__inner { padding-inline: 2.5rem; } }
.paula-hero__eyebrow { color: oklch(0.955 0.004 80 / 0.7); }
.paula-hero__name {
margin-top: 1rem; font-family: var(--font-display); font-weight: 300; font-size: 2.75rem;
letter-spacing: 0.01em; color: var(--ink-foreground); line-height: 1.1;
}
@media (min-width: 640px) { .paula-hero__name { font-size: 3.5rem; } }
@media (min-width: 1024px) { .paula-hero__name { font-size: 4.25rem; } }
.paula-hero__name span { font-size: 0.5em; font-style: italic; font-weight: 300; color: var(--accent); }
.paula-hero__tagline {
margin-top: 1.25rem; font-family: "Playfair Display", var(--font-display); font-weight: 600; font-size: 1.5rem;
color: var(--ink-foreground);
}
@media (min-width: 640px) { .paula-hero__tagline { font-size: 1.875rem; } }
@media (min-width: 1024px) { .paula-hero__tagline { font-size: 2.25rem; } }
.paula-hero__tagline em { font-style: italic; color: var(--accent); font-weight: 500; }
.paula-hero__sub { margin-top: 1rem; max-width: 30rem; font-size: 0.9375rem; line-height: 1.7; color: oklch(0.955 0.004 80 / 0.75); }
.paula-hero__ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
/* --- Story --- */
.paula-story { position: relative; border-bottom: 1px solid var(--border); background-color: var(--background); overflow: hidden; }
.paula-story__inner {
position: relative; margin-inline: auto; max-width: 78rem; padding: 6rem 1.5rem;
display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: center;
}
@media (min-width: 1024px) { .paula-story__inner { grid-template-columns: 1.05fr 0.95fr; gap: 5rem; padding-block: 8.5rem; } }
.paula-story__heading {
margin-top: 1rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; line-height: 1.15;
}
@media (min-width: 640px) { .paula-story__heading { font-size: 3rem; } }
.paula-story__heading em { font-style: italic; color: var(--accent); }
.paula-story__body { margin-top: 1.75rem; max-width: 34rem; }
.paula-story__body p { font-size: 0.9375rem; line-height: 1.85; color: var(--muted-foreground); }
.paula-story__body p + p { margin-top: 1.25rem; }
.paula-story__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 40px 80px -30px oklch(0.145 0.004 60 / 0.35); }
.paula-story__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(0.1); transform: scale(1.06); transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1); }
.paula-story__media:hover .paula-story__photo img { transform: scale(1.16); }
.paula-story__photo-frame { position: absolute; inset: 1.1rem; border: 1px solid oklch(0.955 0.004 80 / 0.6); pointer-events: none; }
/* Giant faint quotation mark behind the copy column — the same "editorial
watermark" device used elsewhere on the site (About, Intro), giving the
section depth instead of sitting flat on a plain background. */
.paula-story__watermark {
position: absolute; top: -4vw; left: -2vw; font-family: var(--font-display); font-size: 18vw; font-weight: 600;
color: oklch(0.17 0.005 60 / 0.03); line-height: 1; pointer-events: none; user-select: none; z-index: 0;
}
.paula-story__inner { position: relative; z-index: 1; }
/* Pull-quote — the section's single strongest line, broken out of the
paragraph flow and given real typographic weight. */
.paula-story__quote { position: relative; margin: 1.75rem 0; max-width: 34rem; padding: 0.35rem 0 0.35rem 2rem; border-left: 2px solid var(--accent); }
.paula-story__quote-mark {
position: absolute; top: -0.9rem; left: 1.1rem; font-family: var(--font-display); font-size: 3rem;
font-style: italic; line-height: 1; color: oklch(0.682 0.082 82 / 0.3); pointer-events: none;
}
.paula-story__quote p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.375rem; line-height: 1.4; color: var(--foreground); }
/* Photo gets corner brackets + a small floating "Est. 2016" badge — the
same treatment already proven on the homepage portrait, giving the
single photo more presence than a plain framed rectangle. */
.paula-story__photo-wrap { position: relative; }
.paula-story__corner { position: absolute; width: 3rem; height: 3rem; z-index: 3; pointer-events: none; }
.paula-story__corner--tl { top: -0.6rem; left: -0.6rem; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.paula-story__corner--br { bottom: -0.6rem; right: -0.6rem; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.paula-story__badge {
position: absolute; left: 1.25rem; top: 1.25rem; z-index: 4;
display: flex; align-items: baseline; gap: 0.45rem;
background-color: var(--card); padding: 0.75rem 1.1rem;
box-shadow: 0 16px 34px -14px oklch(0.145 0.004 60 / 0.4);
font-size: 0.5625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-foreground);
}
.paula-story__badge span { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--accent); }
/* --- Philosophy pull-quote --- */
.paula-philosophy { position: relative; background-color: var(--ink); color: var(--ink-foreground); overflow: hidden; text-align: center; }
.paula-philosophy::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(55% 45% at 50% 0%, oklch(0.682 0.082 82 / 0.1), transparent 70%);
}
.paula-philosophy__inner { position: relative; margin-inline: auto; max-width: 56rem; padding: 6rem 1.5rem; }
@media (min-width: 1024px) { .paula-philosophy__inner { padding-block: 8rem; } }
.paula-philosophy__eyebrow { color: var(--accent); }
.paula-philosophy__statement {
margin-top: 1.5rem; font-family: "Playfair Display", var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1.2;
}
@media (min-width: 640px) { .paula-philosophy__statement { font-size: 3.5rem; } }
@media (min-width: 1024px) { .paula-philosophy__statement { font-size: 4.5rem; } }
.paula-philosophy__statement em { font-style: italic; color: var(--accent); font-weight: 500; }
.paula-philosophy__body { margin-top: 2rem; max-width: 40rem; margin-inline: auto; font-size: 1rem; line-height: 1.85; color: oklch(0.955 0.004 80 / 0.65); }
.paula-philosophy__body em { font-style: italic; color: var(--accent); }
/* --- Journey timeline --- */
.paula-journey { position: relative; background-color: var(--background); border-bottom: 1px solid var(--border); }
.paula-journey__inner { margin-inline: auto; max-width: 60rem; padding: 6rem 1.5rem; }
@media (min-width: 1024px) { .paula-journey__inner { padding-block: 8.5rem; } }
.paula-journey__head { text-align: center; margin-bottom: 4rem; }
.paula-journey__heading { margin-top: 1rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; }
@media (min-width: 640px) { .paula-journey__heading { font-size: 3rem; } }
.paula-journey__heading em { font-style: italic; color: var(--accent); }
/* Real connecting timeline: a vertical gold-fading line runs through the
center of every numbered node. Each node is an opaque circle sitting on
top of the line (its own --background fill masks the line behind it),
so it reads as a proper "on-the-timeline" milestone marker instead of a
plain bordered list. */
.paula-journey__list { position: relative; }
.paula-journey__list::before {
content: ""; position: absolute; left: 1.375rem; top: 0.25rem; bottom: 0.25rem; width: 1px;
background: linear-gradient(to bottom, transparent, var(--border) 6%, var(--border) 94%, transparent);
}
@media (min-width: 640px) { .paula-journey__list::before { left: 1.5rem; } }
.paula-journey__item { position: relative; display: flex; gap: 1.5rem; padding-block: 2.1rem; }
@media (min-width: 640px) { .paula-journey__item { gap: 2.25rem; } }
.paula-journey__item:first-child { padding-top: 0; }
.paula-journey__item:last-child { padding-bottom: 0; }
.paula-journey__num {
position: relative; z-index: 1; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem; border-radius: 50%;
border: 1px solid var(--accent); background-color: var(--background);
font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--accent);
transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
@media (min-width: 640px) { .paula-journey__num { width: 3rem; height: 3rem; } }
.paula-journey__item:hover .paula-journey__num { background-color: var(--accent); color: var(--accent-foreground); box-shadow: 0 0 0 5px oklch(0.682 0.082 82 / 0.14); }
.paula-journey__icon {
display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.65rem; color: var(--accent); opacity: 0.85;
}
.paula-journey__item h3 { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 500; letter-spacing: 0.01em; }
.paula-journey__item p { margin-top: 0.6rem; max-width: 36rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.paula-journey__footnote { font-size: 0.6875rem; font-style: italic; opacity: 0.75; }
/* --- Stats --- */
.paula-stats { background-color: oklch(0.952 0.004 75 / 0.4); border-bottom: 1px solid var(--border); }
.paula-stats__inner {
margin-inline: auto; max-width: 60rem; padding: 4rem 1.5rem;
display: grid; grid-template-columns: repeat(3, 1fr);
}
/* min-width: 0 lets each 1fr column shrink to its fair share — without it
the longest label ("RN, MSN Credentialed") forces its track wider than
its neighbors and blows the grid out on mobile (same bug hit and fixed
earlier for .intro__pillar). */
.paula-stats__stat { text-align: center; padding-inline: 1rem; min-width: 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.paula-stats__stat:hover { transform: translateY(-4px); }
.paula-stats__stat + .paula-stats__stat { border-left: 1px solid var(--border); }
.paula-stats__icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.6rem; color: var(--accent); opacity: 0.8; }
.paula-stats__num { display: block; font-family: var(--font-display); font-size: 1.875rem; font-weight: 300; color: var(--foreground); }
@media (min-width: 640px) { .paula-stats__num { font-size: 2.25rem; } }
.paula-stats__label { display: block; margin-top: 0.5rem; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em; color: var(--muted-foreground); }
/* --- Featured In --- */
.paula-press { position: relative; background-color: var(--background); border-bottom: 1px solid var(--border); overflow: hidden; }
.paula-press__glow {
position: absolute; left: 50%; top: 0; width: 40rem; height: 20rem; transform: translate(-50%, -50%);
background: radial-gradient(closest-side, oklch(0.682 0.082 82 / 0.1), transparent 75%); pointer-events: none;
}
.paula-press__inner { position: relative; margin-inline: auto; max-width: 64rem; padding: 5rem 1.5rem; text-align: center; }
.paula-press__label { color: var(--accent); }
.paula-press__badges {
position: relative; margin-top: 2.75rem; display: flex; flex-wrap: wrap; align-items: flex-start;
justify-content: center; gap: 3rem;
}
@media (min-width: 640px) { .paula-press__badges { gap: 0; } }
.paula-press__item { position: relative; padding-inline: 2rem; }
@media (min-width: 640px) { .paula-press__item + .paula-press__item::before { content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 1.5rem; width: 1px; background: var(--border); } }
/* Bigger, glowing "medallion" treatment instead of a plain flat circle —
a soft ring appears on hover, and the badge lifts with more presence
than the small homepage version. */
.paula-press__badge {
position: relative; display: block; margin-inline: auto; width: 6.5rem; height: 6.5rem; border-radius: 50%;
overflow: hidden; box-shadow: 0 12px 30px -12px oklch(0.145 0.004 60 / 0.28);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
@media (min-width: 640px) { .paula-press__badge { width: 7.5rem; height: 7.5rem; } }
.paula-press__badge::after {
content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent);
opacity: 0; transform: scale(0.82); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.paula-press__badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paula-press__badge:hover { transform: translateY(-5px) scale(1.04); box-shadow: 0 20px 40px -14px oklch(0.145 0.004 60 / 0.4); }
.paula-press__badge:hover::after { opacity: 1; transform: scale(1); }
.paula-press__caption { margin-top: 1.1rem; font-family: var(--font-display); font-size: 0.9375rem; font-style: italic; color: var(--foreground); }
.paula-press__caption span { display: block; margin-top: 0.25rem; font-family: var(--font-sans); font-style: normal; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground); }
/* --- 1:1 Training --- */
.paula-training { position: relative; border-bottom: 1px solid var(--border); background-color: oklch(0.952 0.004 75 / 0.4); overflow: hidden; }
.paula-training__inner {
position: relative; margin-inline: auto; max-width: 78rem; padding: 6rem 1.5rem;
display: grid; grid-template-columns: 1fr; gap: 3.5rem; align-items: center;
}
@media (min-width: 1024px) { .paula-training__inner { grid-template-columns: 0.95fr 1.05fr; gap: 5rem; padding-block: 8.5rem; } }
.paula-training__inner .paula-training__media { order: -1; }
@media (min-width: 1024px) { .paula-training__inner .paula-training__media { order: 0; } }
.paula-training__heading { margin-top: 1rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; line-height: 1.15; }
@media (min-width: 640px) { .paula-training__heading { font-size: 3rem; } }
.paula-training__heading em { font-style: italic; color: var(--accent); }
.paula-training__body { margin-top: 1.75rem; max-width: 34rem; font-size: 0.9375rem; line-height: 1.85; color: var(--muted-foreground); }
.paula-training__chips { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.65rem; list-style: none; padding: 0; }
.paula-training__chips li {
border: 1px solid var(--accent); padding: 0.4rem 1rem; font-size: 0.6875rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.16em; color: var(--foreground);
transition: background-color 0.35s ease, color 0.35s ease;
}
.paula-training__chips li:hover { background-color: var(--accent); color: var(--accent-foreground); }
.paula-training .intro__cta { margin-top: 2.25rem; }
.paula-training__photo-wrap { position: relative; }
.paula-training__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 40px 80px -30px oklch(0.145 0.004 60 / 0.35); }
.paula-training__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(0.1); transform: scale(1.06); transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1); }
.paula-training__media:hover .paula-training__photo img { transform: scale(1.16); }
.paula-training__photo-frame { position: absolute; inset: 1.1rem; border: 1px solid oklch(0.955 0.004 80 / 0.6); pointer-events: none; }
/* =============================================================================
Treatment Page (Botox — the template for individual service pages)
FAQ / testimonial / closing-cta reuse the existing sitewide .faq, .testimonials
and .closing-cta classes with page-specific content — only the sections below
are new.
========================================================================== */
/* --- Breadcrumb --- */
.tx-breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.24em;
color: var(--muted-foreground);
}
.tx-breadcrumb .accent { color: var(--accent); }
/* --- Hero --- */
.tx-hero__inner { margin-inline: auto; max-width: 80rem; padding: 3rem 1.5rem 5rem; display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .tx-hero__inner { grid-template-columns: 1fr 0.92fr; align-items: center; gap: 5rem; padding: 4rem 2.5rem 7rem; } }
.tx-hero__heading { margin-top: 1.25rem; font-family: var(--font-display); font-size: 2.75rem; font-weight: 300; line-height: 1.08; }
@media (min-width: 640px) { .tx-hero__heading { font-size: 3.5rem; } }
.tx-hero__heading em { font-style: italic; color: var(--accent); }
.tx-hero__tagline { margin-top: 1rem; font-family: var(--font-display); font-size: 1.25rem; font-style: italic; font-weight: 300; color: var(--muted-foreground); }
.tx-hero__tagline em { color: var(--accent); font-style: italic; }
.tx-hero__body { margin-top: 1.5rem; max-width: 30rem; font-size: 0.9375rem; line-height: 1.85; color: var(--muted-foreground); }
.tx-hero__ctas { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }
.tx-hero__ctas .intro__cta { margin-top: 0; }
.tx-hero__ctas .faq__cta { margin-top: 0; }
.tx-hero__chips-label { margin-top: 2.75rem; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); }
.tx-hero__credential { margin-top: 2rem; font-size: 0.75rem; color: var(--muted-foreground); }
.tx-hero__credential::before { content: "\2014 "; }
.tx-hero__press { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tx-hero__press-label { font-size: 0.5625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted-foreground); }
.tx-hero__press-logos { display: flex; align-items: center; gap: 1.25rem; }
.tx-hero__press-logos img { height: 1.125rem; width: auto; filter: grayscale(1); opacity: 0.55; transition: opacity 0.35s ease, filter 0.35s ease; }
.tx-hero__press-logos img:hover { filter: grayscale(0); opacity: 1; }
/* Hero duo photo — mirrors the .about__duo layering technique, kept as its own
page-scoped class so this page's photo sizing can flex independently. */
.tx-hero__portrait-wrap { max-width: 26rem; margin-inline: auto; }
@media (min-width: 1024px) { .tx-hero__portrait-wrap { max-width: none; } }
.tx-hero__duo { position: relative; padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .tx-hero__duo { padding-bottom: 4.5rem; } }
.tx-hero__main { position: relative; filter: drop-shadow(0 30px 60px -24px oklch(0.145 0.004 60 / 0.35)); }
.tx-hero__main .frame-zoom { aspect-ratio: 4 / 5; }
.tx-hero__main .frame-zoom img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15); transform: scale(1.04); transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1); }
.tx-hero__portrait-wrap:hover .tx-hero__main .frame-zoom img { transform: scale(1.14); }
.tx-hero__frame { position: absolute; inset: 1.1rem; border: 1px solid oklch(0.955 0.004 80 / 0.7); pointer-events: none; z-index: 2; }
.tx-hero__corner { position: absolute; width: 3rem; height: 3rem; z-index: 3; pointer-events: none; }
.tx-hero__corner--tl { top: -0.6rem; left: -0.6rem; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.tx-hero__accent {
position: absolute; right: -1rem; bottom: -1.25rem; z-index: 5;
width: 52%; aspect-ratio: 4 / 5; overflow: hidden;
border: 9px solid var(--background);
box-shadow: 0 28px 50px -18px oklch(0.145 0.004 60 / 0.45);
clip-path: inset(0% 0% 100% 0%);
transition: clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.32s;
}
.tx-hero__portrait-wrap.is-visible .tx-hero__accent { clip-path: inset(0% 0% 0% 0%); }
@media (min-width: 640px) { .tx-hero__accent { border-width: 12px; bottom: -1.75rem; } }
.tx-hero__accent img {
width: 100%; height: 100%; object-fit: cover; object-position: top center;
filter: grayscale(0.15); transform: scale(1.04);
transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.tx-hero__portrait-wrap:hover .tx-hero__accent img { transform: scale(1.14); filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) { .tx-hero__accent { clip-path: none; transition: none; } }
/* --- Concerns (image cards with caption) --- */
.tx-concerns { position: relative; background-color: oklch(0.952 0.004 75 / 0.4); border-bottom: 1px solid var(--border); }
.tx-concerns__inner { margin-inline: auto; max-width: 80rem; padding: 6rem 1.5rem; }
.tx-concerns__head { text-align: center; max-width: 40rem; margin-inline: auto; }
.tx-concerns__head .eyebrow { color: var(--accent); }
.tx-concerns__heading { margin-top: 1rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; }
@media (min-width: 640px) { .tx-concerns__heading { font-size: 2.75rem; } }
.tx-concerns__heading em { font-style: italic; color: var(--accent); }
.tx-concerns__grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .tx-concerns__grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
.tx-concerns__card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.tx-concerns__card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3); transform: scale(1.05); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease; }
.tx-concerns__card:hover img { transform: scale(1.14); filter: grayscale(0); }
.tx-concerns__card-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0 0 0 / 0.78) 8%, oklch(0 0 0 / 0.08) 55%, transparent 80%); }
.tx-concerns__label { position: absolute; left: 1.5rem; bottom: 1.35rem; right: 1.5rem; font-family: var(--font-display); font-size: 1.125rem; font-style: italic; font-weight: 400; color: var(--ink-foreground); }
/* --- What You Can Expect (checklist + suitable-for card) --- */
.tx-expect__inner { margin-inline: auto; max-width: 80rem; padding: 6.5rem 1.5rem; display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .tx-expect__inner { grid-template-columns: 1fr 0.85fr; gap: 5rem; align-items: start; } }
.tx-expect__head .eyebrow { color: var(--accent); }
.tx-expect__list { margin-top: 2rem; }
.tx-expect__list li { position: relative; padding: 1.1rem 0 1.1rem 1.75rem; font-size: 0.9375rem; color: var(--foreground); border-bottom: 1px solid var(--border); }
.tx-expect__list li:first-child { border-top: 1px solid var(--border); }
.tx-expect__list li::before { content: "\2014"; position: absolute; left: 0; top: 1.1rem; color: var(--accent); }
.tx-expect__card { background-color: var(--ink); color: var(--ink-foreground); padding: 2.75rem 2.25rem; position: relative; overflow: hidden; }
.tx-expect__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 100% 0%, oklch(0.682 0.082 82 / 0.1), transparent 60%); pointer-events: none; }
.tx-expect__card h3 { position: relative; font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; font-style: italic; }
.tx-expect__card ul { position: relative; margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.tx-expect__card li { position: relative; padding-left: 1.5rem; font-size: 0.875rem; line-height: 1.6; color: oklch(0.955 0.004 80 / 0.78); }
.tx-expect__card li::before { content: "\2014"; position: absolute; left: 0; color: var(--accent); }
.tx-expect__card .hero__cta-primary { display: inline-block; margin-top: 2.25rem; }
/* --- Before & After Care --- */
.tx-care { position: relative; background-color: oklch(0.952 0.004 75 / 0.4); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tx-care__inner { margin-inline: auto; max-width: 64rem; padding: 6.5rem 1.5rem; }
.tx-care__head { text-align: center; }
.tx-care__head .eyebrow { color: var(--accent); }
.tx-care__heading { margin-top: 1rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; }
@media (min-width: 640px) { .tx-care__heading { font-size: 2.75rem; } }
.tx-care__heading em { font-style: italic; color: var(--accent); }
.tx-care__sub { margin-top: 1rem; max-width: 32rem; margin-inline: auto; font-size: 0.9375rem; line-height: 1.75; color: var(--muted-foreground); }
.tx-care__grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .tx-care__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.tx-care__card { background-color: var(--card); padding: 2.5rem 2.25rem; box-shadow: 0 30px 60px -36px oklch(0.145 0.004 60 / 0.25); }
.tx-care__card .eyebrow { color: var(--accent); font-size: 0.625rem; }
.tx-care__card h3 { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.tx-care__card ul { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 1.35rem; }
.tx-care__card li { display: flex; align-items: flex-start; gap: 0.85rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.tx-care__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--accent); }
.tx-care__badge { display: inline-block; margin-left: 0.4rem; padding: 0.15rem 0.6rem; background-color: var(--ink); color: var(--ink-foreground); font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
/* --- Areas of Treatment (chip list, appended under the concern photos) --- */
.tx-concerns__areas { margin-top: 4rem; text-align: center; }
.tx-concerns__areas-label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); }
.tx-concerns__areas .paula-training__chips { margin-top: 1.25rem; justify-content: center; }
/* --- Choose Your Neurotoxin (real product/pricing menu + Botox Bank promo) --- */
.tx-neuro__inner { margin-inline: auto; max-width: 62rem; margin-top: 5rem; }
.tx-neuro__head { text-align: center; max-width: 42rem; margin-inline: auto; }
.tx-neuro__head .eyebrow { color: var(--accent); }
.tx-neuro__heading { margin-top: 1rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; }
@media (min-width: 640px) { .tx-neuro__heading { font-size: 2.75rem; } }
.tx-neuro__heading em { font-style: italic; color: var(--accent); }
.tx-neuro__intro { margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.75; color: var(--muted-foreground); }
.tx-neuro__bank { margin-top: 3.5rem; position: relative; overflow: hidden; background-color: var(--ink); color: var(--ink-foreground); padding: 3rem 2rem; text-align: center; }
.tx-neuro__bank::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 0%, oklch(0.682 0.082 82 / 0.14), transparent 60%); }
.tx-neuro__bank-eyebrow { position: relative; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: oklch(0.955 0.004 80 / 0.6); }
.tx-neuro__bank-heading { position: relative; margin-top: 0.75rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; }
@media (min-width: 640px) { .tx-neuro__bank-heading { font-size: 2.75rem; } }
.tx-neuro__bank-sub { position: relative; margin-top: 0.4rem; font-family: var(--font-display); font-size: 1.0625rem; font-style: italic; color: var(--accent); }
.tx-neuro__bank-desc { position: relative; margin-top: 1.25rem; max-width: 34rem; margin-inline: auto; font-size: 0.9375rem; line-height: 1.75; color: oklch(0.955 0.004 80 / 0.75); }
.tx-neuro__bank-price { position: relative; margin-top: 2rem; display: flex; align-items: center; justify-content: center; gap: 0.85rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 300; }
.tx-neuro__bank-price .spark { color: var(--accent); font-size: 1.125rem; }
.tx-neuro__list { margin-top: 4rem; }
.tx-neuro__item { padding: 2rem 1.25rem; margin-inline: -1.25rem; border-bottom: 1px solid var(--border); transition: background-color 0.35s ease; }
.tx-neuro__item:hover { background-color: oklch(0.982 0.003 80 / 0.7); }
.tx-neuro__item:first-child { border-top: 1px solid var(--border); }
.tx-neuro__item-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.tx-neuro__item-head h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; }
.tx-neuro__item-head h3 sup { font-size: 0.8125rem; }
.tx-neuro__price { flex-shrink: 0; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: var(--foreground); white-space: nowrap; }
.tx-neuro__price small { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-left: 0.25rem; }
.tx-neuro__generic { margin-top: 0.25rem; font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--muted-foreground); }
.tx-neuro__desc { margin-top: 0.75rem; max-width: 42rem; font-size: 0.875rem; line-height: 1.75; color: var(--muted-foreground); }
.tx-neuro__desc strong { color: var(--foreground); font-weight: 600; }
.tx-neuro__price-note { margin-top: 0.6rem; font-size: 0.75rem; font-style: italic; color: var(--muted-foreground); }
/* Best-for / longevity meta tags under each product's generic name */
.tx-neuro__meta { margin-top: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tx-neuro__tag {
display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem;
border: 1px solid var(--border); font-size: 0.6875rem; font-weight: 500; color: var(--muted-foreground);
}
.tx-neuro__tag strong { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.625rem; }
.tx-neuro__item--featured .tx-neuro__tag { border-color: oklch(0.682 0.082 82 / 0.5); }
/* Botox Bank — "Most Popular" ribbon + two-column price-card layout on wider screens */
.tx-neuro__bank { text-align: left; }
.tx-neuro__bank-ribbon {
position: relative; display: inline-block; margin-bottom: 1rem; padding: 0.3rem 0.85rem;
background-color: var(--accent); color: var(--accent-foreground); font-size: 0.625rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.16em;
}
.tx-neuro__bank-grid { position: relative; display: grid; gap: 2rem; text-align: left; }
@media (min-width: 768px) { .tx-neuro__bank-grid { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 3rem; } }
.tx-neuro__bank-copy .tx-neuro__bank-heading,
.tx-neuro__bank-copy .tx-neuro__bank-sub,
.tx-neuro__bank-copy .tx-neuro__bank-desc { text-align: left; margin-inline: 0; }
.tx-neuro__bank-figure {
border: 1px solid oklch(0.955 0.004 80 / 0.18); padding: 1.75rem; text-align: center;
background: linear-gradient(160deg, oklch(0.955 0.004 80 / 0.06), transparent);
}
@media (min-width: 768px) { .tx-neuro__bank-figure { text-align: left; } }
.tx-neuro__bank-figure .tx-neuro__bank-price { justify-content: center; margin-top: 0; font-size: 1.625rem; }
@media (min-width: 768px) { .tx-neuro__bank-figure .tx-neuro__bank-price { justify-content: flex-start; } }
.tx-neuro__bank-per-unit { margin-top: 0.4rem; font-size: 0.75rem; color: oklch(0.955 0.004 80 / 0.55); text-align: center; }
@media (min-width: 768px) { .tx-neuro__bank-per-unit { text-align: left; } }
.tx-neuro__bank-figure .intro__cta { margin-top: 1.5rem; border-color: oklch(0.955 0.004 80 / 0.4); color: var(--ink-foreground); }
.tx-neuro__bank-figure .intro__cta::before { background-color: var(--accent); }
.tx-neuro__bank-figure .intro__cta:hover { border-color: var(--accent); }
/* Icon bullets for the "What You Can Expect" checklist and "Suitable Option For" card,
matching the icon language already used in Before & After Care. */
.tx-expect__list li { display: flex; align-items: flex-start; gap: 0.85rem; padding-left: 0; }
.tx-expect__list li::before { content: none; }
.tx-expect__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--accent); }
.tx-expect__card li { display: flex; align-items: flex-start; gap: 0.75rem; padding-left: 0; }
.tx-expect__card li::before { content: none; }
.tx-expect__card .tx-expect__icon { color: var(--accent); }
/* =============================================================================
Legal pages (Privacy Policy / Terms of Service) — simple editorial prose,
no marketing chrome. Reuses .tx-concerns__head for the page title block.
========================================================================== */
.legal-page { background-color: var(--background); }
.legal-page__inner { margin-inline: auto; max-width: 46rem; padding: 5rem 1.5rem 7rem; }
.legal-page__updated { text-align: center; margin-top: 0.75rem; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted-foreground); }
.legal-page__intro { margin-top: 3rem; font-size: 0.9375rem; line-height: 1.8; color: var(--muted-foreground); }
.legal-page__section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
.legal-page__section h2 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; }
.legal-page__section p, .legal-page__section li { margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.8; color: var(--muted-foreground); }
.legal-page__section ul { margin-top: 0.9rem; padding-left: 1.25rem; list-style: disc; }
.legal-page__section ul li { margin-top: 0.5rem; }
.legal-page__section a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-page__note { margin-top: 3rem; padding: 1.5rem; background-color: oklch(0.952 0.004 75 / 0.5); border: 1px solid var(--border); font-size: 0.8125rem; line-height: 1.7; font-style: italic; color: var(--muted-foreground); }
/* Focused single-action pages (Book Now / Book Events) — a centered title
block (reusing .tx-concerns__head) sitting on its own, undistracted by
the wider marketing chrome used on service pages. */
.page-intro { background-color: oklch(0.952 0.004 75 / 0.4); border-bottom: 1px solid var(--border); }
.page-intro__inner { margin-inline: auto; max-width: 80rem; padding: 5rem 1.5rem 4rem; }
.page-intro__body { margin-top: 1.5rem; max-width: 34rem; margin-inline: auto; text-align: center; font-size: 0.9375rem; line-height: 1.8; color: var(--muted-foreground); }
/* Service Menu's intro banner only — its eyebrow line ("VIP Aesthetic
Experience...") is black instead of the usual gold accent. The compound
selector (no space) matches only Service Menu's markup, where one div
carries both classes together — Book Now / Book Events nest them on
separate elements, so their eyebrow color is untouched. */
.page-intro__inner.tx-concerns__head .eyebrow { color: var(--foreground); }
/* =============================================================================
Service Menu — combined single-page treatment listing
========================================================================== */
/* Sticky quick-jump strip — the wayfinding fix: always visible, shows and
highlights which of the 11 services is currently in view. */
.svc-jumpnav { position: sticky; top: 5rem; z-index: 40; background-color: var(--ink); border-bottom: 1px solid oklch(0.955 0.004 80 / 0.12); }
.svc-jumpnav__track { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.9rem 1.25rem; scrollbar-width: none; }
.svc-jumpnav__track::-webkit-scrollbar { display: none; }
.svc-jumpnav__link {
flex: 0 0 auto; padding: 0.55rem 1.1rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
color: oklch(0.955 0.004 80 / 0.55); border: 1px solid oklch(0.955 0.004 80 / 0.18); border-radius: 999px;
white-space: nowrap; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.svc-jumpnav__link:hover { color: var(--ink-foreground); border-color: oklch(0.955 0.004 80 / 0.4); }
.svc-jumpnav__link.is-active { color: var(--accent-foreground); background-color: var(--accent); border-color: var(--accent); }
.svc-section { position: relative; overflow-x: hidden; background-color: var(--background); scroll-margin-top: 9rem; }
#lip-filler, #injectables { scroll-margin-top: 9rem; }
.svc-section::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--accent), transparent 60%); }
.svc-section--dark { background-color: var(--ink); color: var(--ink-foreground); }
.svc-section--dark .eyebrow { color: var(--accent); }
.svc-section--dark .svc-variant { background-color: oklch(0.955 0.004 80 / 0.04); border-color: oklch(0.955 0.004 80 / 0.14); }
.svc-section--dark .svc-variant h3 { color: var(--ink-foreground); }
.svc-section--dark .svc-variant__generic { color: var(--ink-muted); }
.svc-section--dark .svc-variant p { color: var(--ink-muted); }
.svc-section--dark .svc-price { color: var(--ink-foreground); }
.svc-section--dark .svc-price small { color: var(--ink-muted); }
.svc-section--dark .svc-box { border-color: oklch(0.955 0.004 80 / 0.18); background-color: oklch(0.955 0.004 80 / 0.04); color: var(--ink-foreground); }
.svc-section--dark .svc-box::before { background: var(--accent); }
.svc-section--dark .svc-bullets li { color: var(--ink-muted); }
.svc-section--dark .svc-note { color: var(--ink-muted); }
.svc-section--dark .svc-cta { border-color: var(--ink-foreground); color: var(--ink-foreground); }
.svc-section--dark .svc-cta:hover { border-color: var(--accent); color: var(--accent-foreground); }
.svc-section--dark .svc-section__num { color: oklch(0.955 0.004 80 / 0.06); -webkit-text-stroke: 1px oklch(0.955 0.004 80 / 0.14); }
.svc-section--dark .svc-addon-row { border-top-color: oklch(0.955 0.004 80 / 0.14); }
/* Editorial sticky-rail layout — no photography, the identity comes from
typography, whitespace and a persistent left-hand index instead. Each
section is a two-column grid at desktop: a slim rail (numeral, eyebrow,
heading, intro, CTA) that stays pinned in view while the treatment detail
scrolls past beside it, divided by a hairline rule. Collapses to a single
stacked column on mobile. */
.svc-section__inner {
position: relative; margin-inline: auto; max-width: 76rem; padding: 4.5rem 1.5rem;
display: grid; grid-template-columns: 1fr; gap: 2.75rem;
}
@media (min-width: 1024px) {
.svc-section__inner { grid-template-columns: 21rem minmax(0, 1fr); gap: 5rem; padding: 6.5rem 2.5rem; align-items: start; }
}
.svc-section__head { position: relative; }
@media (min-width: 1024px) {
.svc-section__head {
position: sticky; top: 9.5rem; padding-right: 3rem; border-right: 1px solid var(--border);
}
.svc-section--dark .svc-section__head { border-right-color: oklch(0.955 0.004 80 / 0.14); }
}
.svc-section__num {
position: absolute; top: -2.5rem; right: 0; font-family: var(--font-display); font-weight: 600; font-size: 5rem;
line-height: 1; color: transparent; -webkit-text-stroke: 1px oklch(0.145 0.004 60 / 0.12); pointer-events: none; user-select: none;
}
@media (min-width: 1024px) { .svc-section__num { right: 3rem; } }
.svc-section__script {
display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-style: italic;
font-size: 1.0625rem; color: var(--accent); margin-bottom: 0.6rem;
}
.svc-section__script::before { content: ""; display: block; width: 1.75rem; height: 1px; background: currentColor; opacity: 0.6; }
.svc-section__heading { font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.08; }
@media (min-width: 1024px) { .svc-section__heading { font-size: 2.5rem; } }
@media (min-width: 640px) and (max-width: 1023px) { .svc-section__heading { font-size: 3.25rem; } }
.svc-section__intro { margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.85; color: var(--muted-foreground); }
.svc-section__intro + .svc-section__intro { margin-top: 1rem; }
.svc-section__head-cta { margin-top: 2rem; }
@media (max-width: 1023px) { .svc-section__head-cta { display: none; } }
.svc-section__body { min-width: 0; }
@media (max-width: 1023px) { .svc-section__body { padding-top: 2.25rem; border-top: 1px solid var(--border); } }
.svc-section--dark .svc-section__body { border-top-color: oklch(0.955 0.004 80 / 0.14); }
.svc-section__body > :first-child { margin-top: 0 !important; }
.svc-group { margin-top: 3.5rem; }
.svc-group__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.svc-group__title small { display: block; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); margin-top: 0.35rem; }
/* Highlighted callout block (e.g. Botox Bank) */
.svc-callout { margin-top: 2.5rem; padding: 2.75rem 2rem; text-align: center; background-color: var(--ink); color: var(--ink-foreground); border: 1px solid oklch(0.955 0.004 80 / 0.14); }
.svc-section--dark .svc-callout { background-color: oklch(0.955 0.004 80 / 0.05); }
.svc-callout__title { font-family: var(--font-display); font-size: 2rem; text-transform: uppercase; letter-spacing: 0.02em; }
.svc-callout__sub { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; margin-top: 0.15rem; color: oklch(0.955 0.004 80 / 0.75); }
.svc-callout p { margin-top: 1rem; max-width: 32rem; margin-inline: auto; font-size: 0.875rem; line-height: 1.75; color: oklch(0.955 0.004 80 / 0.75); }
.svc-callout .svc-price { justify-content: center; margin-top: 1.5rem; color: var(--ink-foreground); }
.svc-callout .svc-price small { color: oklch(0.955 0.004 80 / 0.6); }
/* Each product/variant is now an elevated card, not a plain divided row */
.svc-variant {
margin-top: 1.5rem; padding: 1.75rem; border: 1px solid var(--border); background-color: oklch(0.145 0.004 60 / 0.02);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 2rem; transition: border-color 0.3s ease;
}
@media (min-width: 640px) { .svc-variant { padding: 2.25rem; } }
.svc-variant__copy { flex: 1 1 26rem; min-width: 0; }
.svc-variant h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; }
.svc-variant__generic { display: block; font-style: italic; font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.svc-variant p { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.75; color: var(--muted-foreground); max-width: 36rem; }
.svc-variant p.svc-note { font-size: 0.8125rem; font-style: italic; margin-top: 0.5rem; }
.svc-variant__prices { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; text-align: right; }
.svc-price { display: flex; align-items: baseline; gap: 0.45rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--foreground); white-space: nowrap; }
.svc-price small { font-family: var(--font-sans); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); order: 2; }
.svc-price--inline { display: inline-flex; }
/* Small elevated "at a glance" boxes — used for skin concerns, areas of
treatment, and best-for lists, replacing the old pill chips. */
.svc-box-grid { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.65rem; }
.svc-box {
position: relative; padding: 0.95rem 1rem 0.85rem; border: 1px solid var(--border); background-color: var(--background);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.4;
}
.svc-box::before { content: ""; position: absolute; top: 0; left: 0; width: 1.5rem; height: 2px; background: var(--accent); }
.svc-bullets { margin-top: 0.9rem; padding-left: 0; list-style: none; }
.svc-bullets li { position: relative; padding-left: 1.1rem; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.svc-bullets li::before { content: "\2022"; position: absolute; left: 0; color: var(--accent); }
.svc-bullets li + li { margin-top: 0.3rem; }
.svc-note { margin-top: 1.5rem; font-size: 0.75rem; font-style: italic; color: var(--muted-foreground); }
.svc-cta-row { margin-top: 3rem; }
.svc-cta {
display: inline-block; position: relative; overflow: hidden; isolation: isolate;
border: 1px solid var(--foreground); padding: 1rem 2.5rem;
font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--foreground);
transition: color 0.45s ease 0.05s, border-color 0.45s ease;
}
.svc-cta::before {
content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--accent);
transform: translateX(-101%); transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.svc-cta:hover::before { transform: translateX(0); }
.svc-cta:hover { border-color: var(--accent); color: var(--accent-foreground); }
/* Standalone product sub-block used for "Add On" price rows (RF Microneedling) */
.svc-addon-list { margin-top: 1.5rem; }
.svc-addon-list__title { font-family: var(--font-display); font-size: 1.25rem; }
.svc-addon-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--border); font-size: 0.875rem; }
.svc-addon-row__label { font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; }
.svc-addon-row__price { font-family: var(--font-display); font-size: 1.125rem; }
/* Before / After Care — two small labeled boxes, same "at a glance" visual
language as .svc-box, giving each service the care info it was missing. */
.svc-care { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 700px) { .svc-care { grid-template-columns: 1fr 1fr; } }
.svc-care__box { position: relative; padding: 1.75rem 1.75rem 1.5rem; border: 1px solid var(--border); background-color: var(--background); }
.svc-section--dark .svc-care__box { border-color: oklch(0.955 0.004 80 / 0.18); background-color: oklch(0.955 0.004 80 / 0.04); }
.svc-care__box::before { content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 2px; background: var(--accent); }
.svc-care__label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.svc-care__box ul { margin-top: 0.85rem; padding-left: 0; list-style: none; }
.svc-care__box li { position: relative; padding-left: 1.1rem; font-size: 0.8125rem; line-height: 1.65; color: var(--muted-foreground); }
.svc-section--dark .svc-care__box li { color: var(--ink-muted); }
.svc-care__box li::before { content: "\2022"; position: absolute; left: 0; color: var(--accent); }
.svc-care__box li + li { margin-top: 0.3rem; }
/* =============================================================================
WordPress nav-menu compatibility shim
wp_nav_menu() (Appearance → Menus) wraps every item in