/* Luminosity — design tokens, ported from _ds/luminosity-design-system-e32e8123-4845-4d00-bb14-5686ab1e661a/tokens/ */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=DM+Serif+Display&family=Marcellus&display=swap");
:root{
/* brand ramp: Luminosity aqua (primary #3bc0da) */
--aqua-50:#f1fbfd;--aqua-100:#dcf4f9;--aqua-200:#b5e8f1;--aqua-300:#7fd8e8;
--aqua-400:#3bc0da;--aqua-500:#22a9c3;--aqua-600:#1a8a9f;--aqua-700:#176b7b;--aqua-800:#14505c;
/* bronze ramp: sampled from brand photography */
--bronze-50:#fbf6f0;--bronze-100:#f4e8db;--bronze-200:#e7d2bb;--bronze-300:#d5b593;
--bronze-400:#c19a72;--bronze-500:#a97f57;--bronze-600:#8a6543;--bronze-700:#6a4d33;
/* neutrals: warm-shifted greys, never blue-grey */
--white:#ffffff;--cream:#fcf8f3;--sand:#f4ede3;--linen:#eae0d3;
--taupe-200:#ded3c5;--taupe-300:#c2b6a6;--taupe-400:#9c9284;
--ink-400:#6f6a63;--ink-600:#413d38;--ink-800:#231f1c;--ink-900:#16130f;
/* semantic: surfaces */
--surface-page:var(--white);--surface-warm:var(--cream);--surface-warm-deep:var(--sand);
--surface-ink:var(--ink-900);--surface-card:var(--white);
--surface-scrim:linear-gradient(180deg,rgba(22,19,15,.38) 0%,rgba(22,19,15,.10) 26%,rgba(22,19,15,.22) 50%,rgba(22,19,15,.74) 100%),linear-gradient(90deg,rgba(22,19,15,.44) 0%,rgba(22,19,15,0) 60%);
/* semantic: text */
--text-display:var(--ink-900);--text-heading:var(--ink-800);--text-body:var(--ink-600);
--text-muted:var(--ink-400);--text-faint:var(--taupe-400);--text-on-ink:var(--cream);
--text-accent:var(--aqua-700);--text-price:var(--ink-900);
/* semantic: lines */
--line-hairline:var(--linen);--line-strong:var(--taupe-200);--line-ink:var(--ink-900);
--line-accent:var(--aqua-400);--line-on-dark:rgba(252,248,243,.22);
/* semantic: interaction */
--action-primary:var(--aqua-400);--action-primary-hover:var(--aqua-500);--action-primary-press:var(--aqua-600);
--action-ink:var(--ink-600);--action-ink-hover:var(--ink-800);--action-disabled:var(--linen);
--focus-ring:var(--aqua-700);
/* semantic: status */
--status-open:#2c7352;--status-error:#b3261e;--status-error-soft:#fdf2f1;--status-warn:#8a5b1c;--status-warn-soft:#fbf1e4;--status-info-soft:var(--aqua-50);
--star-filled:var(--bronze-400);--star-empty:var(--taupe-200);
--font-display:"Marcellus","DM Serif Display",Georgia,"Times New Roman",serif;
--font-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
--r-control:2px;--r-card:3px;--r-media:2px;--r-tag:999px;--r-modal:4px;
--shadow-card:0 1px 2px rgba(35,31,28,.03),0 8px 20px -14px rgba(35,31,28,.06);
--shadow-card-hover:0 2px 3px rgba(35,31,28,.04),0 16px 32px -18px rgba(35,31,28,.10);
--shadow-inset-media:inset 0 0 0 1px rgba(35,31,28,.06);
--glow-cta:0 2px 14px -2px rgba(59,192,218,.42);
--glow-cta-hover:0 3px 20px -2px rgba(59,192,218,.58);
--glow-cta-ink:0 2px 14px -2px rgba(22,19,15,.28);
--glow-cta-ink-hover:0 3px 20px -2px rgba(22,19,15,.38);
--t-control:all 160ms cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){
html{scroll-behavior:smooth}
}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:400 16px/1.62 var(--font-body);-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-heading)}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--text-accent);text-decoration:none;transition:var(--t-control)}
a:hover{color:var(--aqua-700)}
button{font:inherit;cursor:pointer}
::selection{background:var(--aqua-200);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.font-display{font-family:var(--font-display)}
.font-body{font-family:var(--font-body)}
/* prices on the service detail pages: semibold sans (Marcellus has no bold weight) */
.price{font-family:var(--font-body);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* eyebrow label */
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--aqua-400);flex:0 0 auto}
.eyebrow span{font:500 12px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
/* buttons: one fixed 44px height (also the minimum tap size), so an icon
never makes a button taller than a text-only one */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
font:500 14px/1 var(--font-body);height:44px;padding:0 26px;border-radius:2px;border:1px solid transparent;
transition:var(--t-control);cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:0 16px;font-size:13px}
.nav-btn{width:180px}
.btn-primary{background:var(--action-primary);color:var(--ink-900);box-shadow:var(--glow-cta)}
.btn-primary:hover{background:var(--action-primary-hover);color:var(--ink-900);box-shadow:var(--glow-cta-hover)}
.btn-ink{background:var(--action-ink);color:var(--cream);box-shadow:var(--glow-cta-ink)}
.btn-ink:hover{background:var(--action-ink-hover);color:var(--cream);box-shadow:var(--glow-cta-ink-hover)}
.btn-outline{background:transparent;color:var(--text-heading);border-color:var(--line-strong)}
.btn-outline:hover{background:var(--surface-warm);color:var(--text-heading)}
.btn-onDark{background:transparent;color:var(--cream);border-color:rgba(252,248,243,.5)}
.btn-onDark:hover{background:rgba(252,248,243,.12);color:var(--cream)}
.btn-ghost{background:transparent;color:var(--text-accent);padding-left:4px;padding-right:4px}
.btn-ghost:hover{color:var(--aqua-700);background:transparent}
/* tags / chips */
.tag{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:var(--r-tag);
border:1px solid var(--line-hairline);background:#fff;color:var(--text-body);font:400 13px/1 var(--font-body);
cursor:pointer;transition:var(--t-control);text-decoration:none;transform:scale(1);position:relative;z-index:1}
.tag:hover{color:var(--text-body);border-color:var(--line-strong)}
.tag:active{transform:scale(.94)}
.tag[aria-pressed="true"]{border-color:transparent;background:transparent;color:#fff}
.tag-count{color:var(--text-muted);margin-left:4px}
.tag[aria-pressed="true"] .tag-count{color:#fff}
/* preferred-artist select */
.artist-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
background:transparent url('data:image/svg+xml;utf8,) — height tween driven by the WAAPI controller in
site.js; .acc svg rotation is the only part CSS alone owns. */
.acc{border-bottom:1px solid var(--line-hairline)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font:500 16px/1.4 var(--font-body);color:var(--text-heading)}
.acc summary::-webkit-details-marker{display:none}
.acc svg{flex:0 0 auto;transition:transform 260ms cubic-bezier(.16,1,.3,1)}
.acc[open] svg{transform:rotate(180deg)}
.acc p{padding:0 0 20px;color:var(--text-body);font-size:15px;line-height:1.62;white-space:pre-line}
@media (prefers-reduced-motion: reduce){
.acc svg{transition:none}
}
/* header state: transparent-over-hero -> solid on scroll */
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid transparent;transition:background 240ms var(--t-control),border-color 240ms var(--t-control)}
.site-header.is-solid{background:#fff;border-bottom-color:var(--line-hairline)} /* solid white once scrolled */
.site-header.is-transparent{background:transparent} /* no tint or blur: the hero's own top gradient sits behind the links */
.site-header[data-hero="true"]{margin-bottom:-77px} /* bar height + the 1px bottom border, so the hero starts flush at the top */
@media (max-width: 767px){ .site-header[data-hero="true"]{margin-bottom:-61px} }
.site-header.is-transparent .wordmark,
.site-header.is-transparent .nav-link,
.site-header.is-transparent .nav-icon{color:#fcf8f3}
.site-header.is-transparent .nav-link.is-active{color:#fcf8f3} /* same off-white as the other links; the heavier weight marks the current page */
.site-header.is-transparent .btn-outline{color:#fcf8f3;border-color:rgba(252,248,243,.55)}
.site-header.is-transparent .btn-outline:hover{color:#fcf8f3;background:rgba(252,248,243,.14)}
.wordmark{font:400 24px/1 var(--font-display);letter-spacing:.02em;color:var(--text-heading);text-decoration:none}
.logo-solid{display:block}
.logo-ondark{display:none}
.site-header.is-transparent .logo-solid{display:none}
.site-header.is-transparent .logo-ondark{display:block}
.nav-link{position:relative;display:inline-flex;align-items:center;font:400 14px/1 var(--font-body);color:var(--text-body);text-decoration:none;white-space:nowrap}
.site-header nav{margin-top:4px}
.nav-link:hover{color:var(--text-accent)}
/* current page: no underline, just a heavier weight */
.nav-link.is-active{color:var(--text-accent);font-weight:600}
.nav-icon{color:var(--text-display)}
/* day / time picker chips (booking mock) */
.chip{font:400 13px/1 var(--font-body);padding:10px 12px;min-height:40px;border-radius:2px;cursor:pointer;
border:1px solid var(--line-hairline);background:#fff;color:var(--text-body);transition:var(--t-control)}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed="true"]{border-color:var(--aqua-400);background:var(--aqua-50);color:var(--aqua-700)}
/* Visit Us hours: today's row (site.js marks it via the browser's own date) */
.hours-day.is-today,.hours-time.is-today{color:var(--aqua-700)!important;font-weight:600}
/* mobile: each row spans the column, day on the left and time on the right */
@media (max-width: 767px){ #visitHours .hours-time{text-align:right} }
.hours-today-tag{margin-left:8px;padding:2px 8px;border-radius:var(--r-tag);background:var(--aqua-50);color:var(--aqua-700);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
/* mobile menu */
#mobileMenu{display:none}
/* the menu floats over the page from under the navbar instead of pushing it
down; a clipped shadow dims the page below it (not the navbar above) */
#mobileMenu.is-open{display:block;position:absolute;top:100%;left:0;right:0;
max-height:calc(100svh - 60px);overflow-y:auto;overscroll-behavior:contain;
box-shadow:0 0 0 100vmax rgba(22,19,15,.4);clip-path:inset(0 -100vmax -100vmax -100vmax)}
/* services.html — mobile layout */
@media (max-width: 767px){
/* "Preferred professional" filter: stretch to fill its container instead of
shrinking to its option text width, with breathing room above it now that
it wraps onto its own line below the category tags. */
.artist-select{width:100%}
/* "Find your service": no 40px gap under the filters, and the category tabs
sit in one row that swipes sideways. The row runs to the screen edges (the
20px gutter becomes inner padding) so a tab cut off at the edge signals
there is more; a little vertical padding keeps focus rings unclipped. */
.svc-filter-row.svc-filter-row{padding-bottom:0}
.svc-tags-field{width:100%;min-width:0}
.svc-tags.svc-tags{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
margin:-4px -20px;padding:4px 20px;scroll-padding-inline:20px;scroll-snap-type:x proximity}
.svc-tags::-webkit-scrollbar{display:none}
.svc-tags .tag{flex:none;scroll-snap-align:start;height:44px;padding:0 20px} /* 44px tap target */
/* Sunless tanning group: the two showcase photos sit together after every
service row on desktop. On mobile, split them — one above the service
list, one below — by unboxing their shared wrapper (display:contents) so
each photo becomes an independently-orderable item of the group itself. */
[data-service-group="tanning"]{display:flex;flex-direction:column}
[data-service-group="tanning"]>.gap-x-16{order:3}
[data-service-group="tanning"]>.gap-4.mt-8{display:contents}
[data-service-group="tanning"]>.gap-4.mt-8>div:first-child{order:2;margin-bottom:24px}
[data-service-group="tanning"]>.gap-4.mt-8>div:last-child{order:4;margin-top:24px}
/* Lashes group: the photo sits beside the service list on desktop (after it
in DOM order, so it lands below the list once stacked on mobile). Move it
to the top of the section on mobile instead, same unboxing technique. */
[data-service-group="lashes"]{display:flex;flex-direction:column}
[data-service-group="lashes"]>.flex.flex-wrap.gap-10.mt-8{display:contents}
[data-service-group="lashes"]>.flex.flex-wrap.gap-10.mt-8>.flex-1{order:1;margin-bottom:24px}
[data-service-group="lashes"]>.flex.flex-wrap.gap-10.mt-8>.grid{order:2}
}
/* services.html — service cards (spa-menu line: name · leader · price · Book).
The rest of the page keeps its original layout; only the rows use this. */
/* --card-hover-dur: how long the Book-button fill takes to fade in/out on hover */
.svc-page{--card-pad-y:24px;--card-pad-x:16px;--ease-soft:cubic-bezier(.16,.84,.44,1);--card-hover-dur:450ms}
/* align-content:start — in the two-column lists a card can be stretched to its neighbour's height; keep its lines packed at the top */
.svc-page .menu-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:32px;row-gap:4px;
padding:var(--card-pad-y) var(--card-pad-x);margin-inline:calc(var(--card-pad-x) * -1);border-radius:var(--r-card)}
/* arriving from a homepage card (?service=): a soft aqua wash and hairline
fade in, hold while the page scrolls to the card, then fade away */
.svc-page .menu-item.is-highlighted{animation:svcHighlight 3200ms var(--ease-soft)}
@keyframes svcHighlight{
0%,100%{background-color:transparent;box-shadow:inset 0 0 0 1px transparent}
15%,65%{background-color:var(--status-info-soft);box-shadow:inset 0 0 0 1px var(--aqua-300)}
}
@media (prefers-reduced-motion: reduce){
.svc-page .menu-item.is-highlighted{animation:none;background-color:var(--status-info-soft);box-shadow:inset 0 0 0 1px var(--aqua-300)}
}
.svc-page .menu-line{grid-column:1;display:flex;align-items:center;gap:12px;min-width:0}
.svc-page .menu-name{font:500 18px/1.3 var(--font-body);color:var(--text-display);min-width:0;overflow-wrap:anywhere}
.svc-page .menu-leader{flex:1 1 24px;min-width:24px;border-bottom:1px dotted var(--taupe-300)}
/* price uses the same face, weight and size as the service name */
.svc-page .menu-price{flex:none;font:500 18px/1.3 var(--font-body);color:var(--text-price);font-variant-numeric:tabular-nums}
.svc-page .menu-price.is-varies{font:500 13px/1.3 var(--font-body);color:var(--text-muted)}
.svc-page .menu-meta{grid-column:1;font:500 12px/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.svc-page .menu-save{color:var(--status-open)}
.svc-page .menu-desc{grid-column:1;font-size:15px;line-height:1.6;color:var(--text-body);max-width:62ch;margin-top:4px}
.svc-page .menu-note{grid-column:1;margin-top:8px}
/* Book / Add to Cart: 40px tall. On desktop it sits on the top line beside the
price; the negative block margin lets it overhang that line instead of making
the row taller */
/* Book and Add to Cart: solid soft charcoal so they stand out on the menu rows
(matches the active category tab); hover/focus deepens to near-black */
.svc-page .menu-book{background:var(--action-ink);cursor:pointer;grid-column:2;grid-row:1;align-self:center;margin-block:-10px;display:inline-flex;align-items:center;justify-content:center;
white-space:nowrap;min-width:96px;font:500 13px/1 var(--font-body);color:var(--white);height:40px;padding:0 24px;
border:1px solid var(--action-ink);border-radius:var(--r-control);
transition:background-color var(--card-hover-dur) var(--ease-soft),color var(--card-hover-dur) var(--ease-soft),border-color var(--card-hover-dur) var(--ease-soft)}
.svc-page .menu-book:hover,.svc-page .menu-book:focus-visible{background:var(--action-ink-hover);border-color:var(--action-ink-hover);color:var(--white)}
.svc-page .menu-book:active{transform:translateY(1px)}
@media (max-width: 560px){
.svc-page .menu-item{column-gap:16px}
.svc-page .menu-book{min-width:76px;padding:0 16px}
}
@media (prefers-reduced-motion: reduce){
.svc-page .menu-book{transition:none}
}
/* Book dialog, every page (native : focus is trapped, Esc closes).
Markup comes from js/site.js; step 0 is the service picker.
Distilled: open sections separated by space, not boxes or rules; one pinned
footer carries the summary and the single primary action. The dialog itself
has no padding, so a click whose target is the dialog element can only be on
the backdrop — site.js closes on that. */
.book-dialog{width:min(520px,calc(100vw - 32px));max-height:min(88svh,820px);padding:0;border:0;border-radius:var(--r-modal);
background:var(--white);color:var(--text-body);box-shadow:0 24px 64px -24px rgba(22,19,15,.45);overflow:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:var(--taupe-200) transparent}
.book-dialog::backdrop{background:rgba(22,19,15,.48)}
.book-body{display:grid;gap:32px;padding:36px 32px 28px}
.book-close-form{position:absolute;top:12px;right:12px;margin:0;z-index:2}
.book-close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-heading)}
.book-close:hover{background:var(--surface-warm)}
/* header: name, then price · duration; notes only when they change the booking */
.book-head{display:grid;gap:6px;padding-right:36px}
.book-title{font:400 clamp(26px,3vw,30px)/1.15 var(--font-display);color:var(--text-display);outline:none}
.book-meta[hidden]{display:none}
.book-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-size:14px;color:var(--text-muted)}
.book-price{font:400 20px/1 var(--font-display);color:var(--text-price)}
.book-desc{font-size:14px;line-height:1.6;margin-top:6px}
.book-desc[hidden]{display:none}
.book-note{margin-top:8px;font-size:13px;line-height:1.55;color:var(--text-muted)}
.book-note strong{font-weight:600}
/* section labels: plain sentence case, one size */
.book-field{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.book-field[hidden],.book-when[hidden],.book-actions[hidden]{display:none}
/* same label voice as the page ("Find your service", "Preferred professional"), in bold */
.book-legend{padding:0;margin-bottom:12px;font:600 12px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.book-when{display:grid;gap:28px}
/* radios are real inputs, visually replaced (arrow keys move within a group) */
.book-radio{position:absolute;opacity:0;pointer-events:none}
.book-radio:focus-visible + label{outline:2px solid var(--focus-ring);outline-offset:2px}
/* options: an open list — hairline between rows, the radio mark carries the state */
/* no rule directly under the "Choose an option" label: the first row starts open */
/* artist: one quiet inline select (the default is the answer for most people) */
/* label above, select spans the full width of the dialog column */
.book-artist-row{display:grid;gap:8px}
/* step 0: one select, then a line on the picked service */
.book-pick{display:grid;gap:8px}
.book-pick .book-legend{margin:0}
.book-pick .artist-select{width:100%;font-size:15px;color:var(--text-display);padding-top:10px;padding-bottom:10px}
.book-pick-desc{margin-top:6px;font-size:14px;line-height:1.6;color:var(--text-body);max-width:60ch}
.book-pick-desc[hidden]{display:none}
.book-artist-row .book-legend{margin:0}
.book-artist-row .artist-select{width:100%;font-size:14px;color:var(--text-display);padding-top:8px;padding-bottom:8px}
/* calendar: no frame — month row, weekday initials, dates */
.book-cal{display:grid;gap:6px}
.book-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.book-cal-head > span:last-child{display:flex;gap:2px}
.book-cal-month{font:500 15px/1.2 var(--font-body);color:var(--text-display)}
.book-cal-nav{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:var(--r-control);background:transparent;color:var(--text-heading)}
.book-cal-nav:hover:not(:disabled){background:var(--surface-warm)}
.book-cal-nav:disabled{opacity:.3;cursor:not-allowed}
.book-cal-dow,.book-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.book-cal-dow span{text-align:center;font:500 12px/1.2 var(--font-body);color:var(--text-muted);padding:4px 0}
.book-cal-day{height:40px;display:grid;place-items:center;border:1px solid transparent;border-radius:var(--r-control);background:transparent;
font:400 14px/1 var(--font-body);color:var(--text-heading);font-variant-numeric:tabular-nums;
transition:background-color 240ms cubic-bezier(.16,.84,.44,1),color 240ms cubic-bezier(.16,.84,.44,1),border-color 240ms cubic-bezier(.16,.84,.44,1)}
.book-cal-day:hover:not(:disabled){border-color:var(--ink-900)}
.book-cal-day.is-today{font-weight:600}
.book-cal-day[aria-pressed="true"]{background:var(--action-ink);border-color:var(--action-ink);color:var(--white)}
.book-cal-day:disabled{color:var(--taupe-200);cursor:not-allowed}
/* the calendar is a rolling five weeks, so each 1st names its month */
.book-cal-day{position:relative}
.book-cal-mon{position:absolute;top:3px;left:0;right:0;font:600 9px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--bronze-600)}
.book-cal-day.is-month-start{padding-top:8px}
.book-cal-day[aria-pressed="true"] .book-cal-mon{color:inherit}
.book-cal-day:disabled .book-cal-mon{color:inherit}
/* services arranged by phone (mobile tans): a short note instead of the calendar */
.book-arrange{padding:16px 18px;border-radius:var(--r-card);background:var(--surface-warm);font-size:15px;line-height:1.6;color:var(--text-body)}
.book-arrange[hidden]{display:none}
.book-arrange a{color:var(--text-heading);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* times: the one remaining chip row */
.book-times{position:relative;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.book-chip{display:grid;place-items:center;min-height:40px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--r-control);
font:400 13px/1.2 var(--font-body);color:var(--text-heading);white-space:nowrap;cursor:pointer;
transition:background-color 240ms cubic-bezier(.16,.84,.44,1),color 240ms cubic-bezier(.16,.84,.44,1),border-color 240ms cubic-bezier(.16,.84,.44,1)}
.book-chip:hover{border-color:var(--ink-900)}
.book-radio:checked + .book-chip{background:var(--action-ink);border-color:var(--action-ink);color:var(--white)}
/* steps: 1 choose · 2 your details · 3 confirm */
.book-step{display:grid;gap:32px}
.book-step[hidden]{display:none}
/* Back sits in the top bar, level with the close button */
.book-back{position:absolute;top:12px;left:26px;z-index:2;height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 8px 0 6px;border:0;background:transparent;
font:500 13px/1 var(--font-body);color:var(--text-muted);border-radius:var(--r-control)}
.book-back:hover{color:var(--text-display)}
.book-dialog:not(.is-step-1) .book-body{padding-top:64px}
.book-step-title{font:400 22px/1.2 var(--font-display);color:var(--text-display);outline:none}
.book-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.book-input{display:grid;gap:8px;min-width:0}
.book-input-wide{grid-column:1 / -1}
.book-input .book-legend{margin:0}
.book-input input{width:100%;padding:10px 2px;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;background:transparent;
font:400 15px/1.4 var(--font-body);color:var(--text-display);transition:border-color 200ms cubic-bezier(.16,.84,.44,1)}
.book-input input:hover{border-bottom-color:var(--ink-600)}
.book-input input:focus{outline:none;border-bottom-color:var(--ink-900);box-shadow:0 1px 0 0 var(--ink-900)}
.book-input input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.book-input input[aria-invalid="true"]{border-bottom-color:var(--status-warn)}
.book-error{font-size:12.5px;line-height:1.4;color:var(--status-warn)}
.book-submit-error{font-size:14px;padding:12px 14px;border-radius:var(--r-control);background:var(--status-warn-soft)}
.book-submit-error a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.book-submit-error[hidden]{display:none}
/* step 4: request received. The service header, total and policy step aside so
the confirmation reads as its own moment; Done fills the footer. */
.book-dialog.is-done .book-head,
.book-dialog.is-done .book-total,
.book-dialog.is-done .book-policy{display:none}
.book-dialog.is-done .book-actions .book-primary{flex:1 1 auto}
.book-done{justify-items:start;gap:24px}
.book-done-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--status-info-soft);color:var(--aqua-700);
box-shadow:inset 0 0 0 1px var(--aqua-200)}
.book-done-head{display:grid;gap:10px}
.book-done .book-step-title{font-size:clamp(26px,3vw,30px);line-height:1.15}
.book-done-text{font-size:15px;line-height:1.6;color:var(--text-body);max-width:40ch}
@media (prefers-reduced-motion: no-preference){
.book-done:not([hidden]) .book-done-icon{animation:bookDoneIn 520ms cubic-bezier(.16,.84,.44,1) both}
@keyframes bookDoneIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
}
.book-error[hidden]{display:none}
.book-review{display:grid;margin:0}
.book-primary[aria-disabled="true"]{pointer-events:auto}
@media (max-width: 560px){
.book-fields{grid-template-columns:minmax(0,1fr)}
}
/* pinned footer: the choice so far + the one action, always in view */
.book-foot{position:sticky;bottom:0;display:grid;gap:10px;padding:16px 32px;background:var(--white);border-top:1px solid var(--line-hairline)}
.book-summary{font:400 14px/1.4 var(--font-body);color:var(--text-body)}
.book-summary[hidden]{display:none}
/* price left, action right, one line */
.book-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}
.book-total{display:grid;gap:6px;margin:0}
.book-total-label{font:600 12px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.book-actions .book-price{font:400 24px/1 var(--font-display);color:var(--text-price);white-space:nowrap}
.book-actions .book-primary{flex:0 1 260px}
.book-primary[hidden]{display:none}
.book-primary[aria-disabled="true"]{background:var(--action-disabled);color:var(--text-faint);box-shadow:none;cursor:not-allowed}
.book-primary:not([aria-disabled="true"]):hover{background:var(--action-ink);color:var(--white)}
.book-policy{font-size:12.5px;line-height:1.5;color:var(--text-muted)}
.book-policy a{color:var(--text-heading);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* open: fade + small rise; backdrop fades with it */
@media (prefers-reduced-motion: no-preference){
.book-dialog[open]{animation:bookIn 320ms cubic-bezier(.16,.84,.44,1)}
.book-dialog[open]::backdrop{animation:bookFade 320ms ease-out}
}
@keyframes bookIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bookFade{from{opacity:0}to{opacity:1}}
@media (max-width: 560px){
/* phones: a bottom sheet */
.book-dialog{width:100vw;max-width:100vw;margin:auto 0 0;max-height:92svh;border-radius:var(--r-modal) var(--r-modal) 0 0}
.book-body{gap:28px;padding:28px 20px 24px}
.book-back{left:14px}
.book-dialog:not(.is-step-1) .book-body{padding-top:60px}
.book-foot{padding:12px 20px 16px}
.book-times{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion: reduce){ .book-chip,.book-cal-day{transition:none} }
/* ==========================================================================
Homepage — editorial direction (scoped to body.home)
Warm full-bleed photography, generous air, and a single restrained accent.
Type uses the site-wide faces (DM Serif Display + Instrument Sans); accent
phrases are set apart by colour alone.
========================================================================== */
.home{--section-y:clamp(88px,10vw,152px);--wrap:1320px;--gutter:clamp(20px,4vw,48px)}
.home .home-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.home .home-section{padding-block:var(--section-y);background:var(--surface-page)}
.home .home-section-warm{background:var(--surface-warm)}
/* display type: accent phrase in bronze (one accent per heading) */
.home .display-2,.svc-faq .display-2,.img-cta .display-2{font:400 clamp(30px,3.4vw,48px)/1.12 var(--font-display);letter-spacing:-.01em;color:var(--text-display);text-wrap:balance}
.home .display-2 em{font-style:normal;color:var(--bronze-600)}
.home .hero-title em{font-style:normal;color:var(--bronze-200)}
/* text link with arrow (secondary action, replaces boxed ghost buttons) */
.home .link-arrow{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--font-body);color:var(--text-heading);
padding-block:10px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
transition:background-size 320ms cubic-bezier(.16,1,.3,1),color 160ms}
.home .link-arrow svg{transition:transform 320ms cubic-bezier(.16,1,.3,1)}
.home .link-arrow:hover,.home .svc-tile:hover .link-arrow{color:var(--text-display);background-size:100% 1px}
.home .link-arrow:hover svg,.home .svc-tile:hover .link-arrow svg{transform:translateX(4px)}
.home .link-arrow-sm{font-size:13px;padding-block:6px}
/* ---- hero ---- */
.home .hero{position:relative;min-height:clamp(640px,100svh,1040px);display:grid;overflow:hidden;background:var(--sand);isolation:isolate}
.home .hero-media{position:absolute;inset:0;z-index:-2}
.home .hero-media{will-change:transform;transform-origin:50% 0}
.home .hero-media img,.home .hero-video{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
/* video sits over the photo and fades in only once it is actually playing */
.home .hero-video{position:absolute;inset:0;opacity:0;transition:opacity 1200ms ease}
.home .hero-video.is-playing{opacity:1}
/* hero overlay: a neutral black shade (no colour tint) - deepest across the top
behind the nav and on the left behind the copy, clear over the shoulder */
.home{--bronze-overlay:
linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,0) 30%),
linear-gradient(90deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 75%),
linear-gradient(0deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 25%)}
.home .hero-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--bronze-overlay)}
/* top padding = header height, so the copy centres between the nav and the bottom of the photo */
.home .hero-inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:76px var(--gutter) 0;
display:grid;grid-template-rows:1fr;gap:0}
.home .hero-copy{align-self:center;display:grid;gap:24px;max-width:600px;padding-block:40px}
.home .hero-title{font:400 clamp(40px,5vw,72px)/1.04 var(--font-display);letter-spacing:-.02em;color:var(--cream);text-wrap:balance}
.home .hero-copy .eyebrow span{color:rgba(252,248,243,.82)}
.home .hero .link-arrow{color:var(--cream)}
.home .hero .link-arrow:hover{color:#fff}
.home .hero-copy .eyebrow::before{display:none}
.home .hero-lede{font-size:clamp(16px,1.25vw,18px);line-height:1.62;color:rgba(252,248,243,.92);max-width:44ch}
/* two equal-width buttons (the wider label sets both) */
.home .hero-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;justify-self:start;gap:12px;margin-top:8px}
/* About us: outlined in the same cream as its label */
.home .hero-about{border-color:var(--cream);box-shadow:0 2px 14px -2px rgba(252,248,243,.34)} /* the View services glow, in cream */
.home .hero-about:hover{box-shadow:0 3px 20px -2px rgba(252,248,243,.5)}
/* hero entrance: slow settle on the photograph, staggered rise on the copy */
@media (prefers-reduced-motion: no-preference){
.home .hero-media img{animation:heroSettle 2400ms cubic-bezier(.16,.84,.44,1) both}
.home .hero-rise{animation:heroRise 1000ms cubic-bezier(.16,.84,.44,1) both;animation-delay:calc(260ms + var(--d,0) * 110ms)}
}
@keyframes heroSettle{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* mobile: full-bleed photograph with the copy over its lower part, on a soft black
fade (same overlay family as desktop) - no solid colour block */
@media (max-width: 767px){
.home .hero{min-height:max(640px,100svh);display:grid;background:var(--ink-900)}
.home .hero-media{position:absolute;inset:0;height:auto;overflow:hidden}
.home .hero-media img{object-position:70% 30%}
.home .hero-wash{inset:0;height:auto;
background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.62) 30%,rgba(0,0,0,.18) 58%,rgba(0,0,0,0) 72%),
linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,0) 28%)}
.home .hero-inner{padding:60px var(--gutter) 40px;margin-top:0;position:relative;gap:0}
.home .hero-copy{align-self:end;gap:16px;padding-block:0}
/* homepage buttons span the column; View services stacks under Book appointment */
.home main .btn{width:100%}
.home .hero-actions{grid-auto-flow:row;justify-self:stretch}
.home .hero-title{font-size:clamp(36px,10vw,46px)}
}
/* ---- section heading: title + intro left, button right (space between) ---- */
.home .sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-bottom:clamp(48px,6vw,80px)}
.home .sec-head-text{display:grid;gap:16px;max-width:780px}
.home .sec-head p{font-size:16px;line-height:1.65;color:var(--text-body);max-width:56ch}
/* ---- services: borderless editorial tiles in a single aligned row ---- */
/* framed, joined cards: one hairline frame split into four (a 1px grid gap over
the line colour draws the shared borders); each photo inset like a mounted
print; two-line Marcellus title, second line in bronze */
.home .svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:2px}
/* the grid's outer corners are 2px; the corner tiles follow (1px = 2px minus the
hairline) so their white fill doesn't square off the curve. In the 4-up row the
first tile (VersaSpa) owns the left corners and the last (Lash) the right. */
.home .svc-tile:first-child{border-radius:1px 0 0 1px}
.home .svc-tile:last-child{border-radius:0 1px 1px 0}
.home .svc-tile{display:grid;grid-template-rows:auto 1fr;gap:28px;padding:clamp(20px,2.2vw,32px);background:var(--white);color:inherit;text-decoration:none}
.home .svc-tile:hover{color:inherit}
.home .svc-media{aspect-ratio:1/1.05;overflow:hidden;background:var(--sand)}
.home .svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms cubic-bezier(.16,.84,.44,1)}
.home .svc-tile:hover .svc-media img{transform:scale(1.04)}
.home .svc-body{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:8px}
.home .svc-title{display:grid;gap:2px;font:400 18px/1.3 var(--font-display);color:var(--text-display)}
.home .svc-title-top{text-transform:uppercase;letter-spacing:.04em}
.home .svc-title-sub{color:var(--bronze-600)}
.home .svc-desc{font-size:14.5px;line-height:1.65;color:var(--text-body)}
.home .svc-meta{margin-top:auto;padding-top:6px;display:flex;gap:10px;font:500 12px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.home .svc-meta span+span::before{content:"·";margin-right:10px}
/* long thin arrow (same as the review arrows) at the end of the meta row: says the whole tile is a link; nudges right on hover */
.home .svc-meta{align-self:stretch;align-items:center}
.home .svc-arrow{flex:none;margin-left:auto;color:var(--taupe-400);transition:transform 450ms cubic-bezier(.16,.84,.44,1),color 450ms cubic-bezier(.16,.84,.44,1)}
.home .svc-tile:hover .svc-arrow{transform:translateX(4px);color:var(--text-display)}
@media (prefers-reduced-motion: reduce){.home .svc-arrow{transition:none}}
.home .svc-tile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px}
/* 2x2 on tablets: anything up to 1024px, plus touch screens up to 1366px (iPads in landscape) */
@media (max-width: 1024px), (max-width: 1366px) and (pointer: coarse){
.home .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 2x2: each corner tile takes one corner */
.home .svc-tile:nth-child(1){border-radius:1px 0 0 0}
.home .svc-tile:nth-child(2){border-radius:0 1px 0 0}
.home .svc-tile:nth-child(3){border-radius:0 0 0 1px}
.home .svc-tile:nth-child(4){border-radius:0 0 1px 0}
}
@media (max-width: 640px){
.home .svc-grid{grid-template-columns:minmax(0,1fr)}
/* stacked: first tile the top corners, last tile the bottom */
.home .svc-tile:nth-child(n){border-radius:0}
.home .svc-tile:first-child{border-radius:1px 1px 0 0}
.home .svc-tile:last-child{border-radius:0 0 1px 1px}
.home .svc-media{aspect-ratio:4/3.2}
}
.home .svc-tile.is-entering{opacity:0;transform:translateY(24px)}
.home .svc-tile.is-revealing{transition:opacity 800ms cubic-bezier(.16,.84,.44,1),transform 800ms cubic-bezier(.16,.84,.44,1)}
@media (prefers-reduced-motion: reduce){
.home .svc-tile.is-entering{opacity:1;transform:none}
.home .svc-media img{transition:none}
}
/* ---- about: numbers row (currently unused on the page, kept for reuse) ---- */
.home .proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0 8px;border-top:1px solid var(--line-strong)}
.home .proof>div{padding:20px 16px 0 0}
.home .proof>div+div{padding-left:20px;border-left:1px solid var(--line-strong)}
.home .proof dt{font:400 clamp(32px,2.9vw,44px)/1 var(--font-display);letter-spacing:-.02em;color:var(--text-display)}
.home .proof dd{margin:8px 0 0;font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
/* ---- full-bleed photographic breather ---- */
.home .img-band{position:relative;height:clamp(340px,46vw,700px);overflow:hidden;background:var(--sand)}
/* parallax (site.js): the photo is 30% taller than the band and starts 15%
above it, so it can slide ±15% of the band's height without ever showing
an edge. Under reduced motion it simply sits still, centred. */
.home .img-band img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;object-position:50% 50%;will-change:transform}
/* About: the beige panel deliberately runs past the right edge (margin-right:-50vw);
clip it horizontally only, so it can still extend above and below the section */
.home #about{overflow-x:clip}
/* mobile: the offset cream panel (positioned for the two-column desktop layout)
becomes an off-centre stripe, so the whole section takes the cream instead */
@media (max-width: 767px){
.home #about{background:var(--surface-warm)}
.home #about .about-panel{display:none}
}
/* mobile: every homepage content section gets 64px top and bottom (the hero,
the full-bleed image band and the Instagram strip keep their own spacing).
About's padding is inline in index.html, hence !important. */
@media (max-width: 767px){
.home{--section-y:64px}
.home #about{padding-top:64px !important;padding-bottom:64px !important}
.home .rv.rv{padding:64px 0}
}
/* same 64px rhythm on the team, services and packages pages (mobile). Their paddings are
inline in the HTML, hence !important. The services photo header, like the
homepage hero, keeps its own spacing. On services the filter bar gets 64px
above it and the list 64px above and below. */
@media (max-width: 767px){
.team-main{padding-top:64px !important;padding-bottom:64px !important}
.team-cta-inner{padding-top:64px !important;padding-bottom:64px !important}
.svc-filter-section{padding-top:64px !important}
.svc-list-section{padding-top:64px !important;padding-bottom:64px !important}
.pkg-main{padding-top:64px !important;padding-bottom:64px !important}
}
/* Homepage reviews — one review at a time (scroll-snap track, so it also swipes
on touch). Pulled line in the display face with one bronze accent word; the
full review beneath; name and date in the site's label style. */
/* airbrush-mist background: the FAQ's cream, soft tan haze drifting in from the
edges like airbrush overspray, and a faint grain (assets/img/textures/grain.webp).
Multiply blend so it only ever warms the cream, never lightens it. */
.home .rv{position:relative;isolation:isolate;background:var(--surface-warm);padding:72px 0 88px}
.home .rv::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply;background:
radial-gradient(55% 80% at 10% 35%, rgba(169,127,87,.18), transparent 70%),
radial-gradient(45% 70% at 92% 70%, rgba(169,127,87,.15), transparent 70%),
radial-gradient(35% 50% at 55% 8%, rgba(193,154,114,.12), transparent 70%),
url(assets/img/textures/grain.webp) repeat;background-size:auto,auto,auto,128px 128px}
.home .rv-carousel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
.home .rv-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.home .rv-track::-webkit-scrollbar{display:none}
.home .rv-track:focus-visible{outline:2px solid var(--focus-ring);outline-offset:6px}
.home .rv-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;display:grid;gap:22px;justify-items:center;text-align:center;padding:0 clamp(0px,4vw,48px)}
.home .rv-stars{display:flex;gap:6px;color:var(--star-filled)}
.home .rv-quote{margin:0;display:grid;gap:20px;justify-items:center}
.home .rv-pull{max-width:24ch;font:400 clamp(28px,3.6vw,48px)/1.18 var(--font-display);letter-spacing:-.01em;color:var(--text-display);text-wrap:balance}
.home .rv-pull em{font-style:normal;color:var(--bronze-600)}
.home .rv-full{max-width:54ch;font-size:15px;line-height:1.7;color:var(--text-body)}
.home .rv-by{font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.home .rv-arrow{display:grid;place-items:center;width:72px;height:48px;border:0;background:transparent;color:var(--taupe-400);border-radius:var(--r-control);
transition:color 320ms cubic-bezier(.16,.84,.44,1),transform 320ms cubic-bezier(.16,.84,.44,1)}
.home .rv-arrow:hover{color:var(--text-display)}
.home .rv-prev:hover{transform:translateX(-4px)}
.home .rv-next:hover{transform:translateX(4px)}
.home .rv-count{grid-column:1 / -1;justify-self:center;margin-top:8px;font:500 12px/1 var(--font-body);letter-spacing:.14em;color:var(--text-muted);font-variant-numeric:tabular-nums}
.home .rv-rating{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:40px;padding-top:28px;border-top:1px solid var(--taupe-200);
font:500 15px/1.4 var(--font-body);color:var(--text-heading)}
.home .rv-rating svg{color:var(--star-filled)}
/* "4.9 on Google" link in the reviews section: keeps the surrounding text colour,
with a faint underline that firms up on hover so they read as links */
.home .rating-link{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);
text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color 200ms}
.home .rating-link:hover{color:inherit;text-decoration-color:currentColor}
/* phones: arrows sit under the review, either side of the counter */
@media (max-width: 767px){
.home .rv{padding:56px 0 64px}
.home .rv-carousel{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4px 32px} /* equal side columns keep the arrows the same distance from the counter */
.home .rv-track{grid-column:1 / -1;grid-row:1}
.home .rv-prev{grid-row:2;grid-column:1;justify-self:end}
.home .rv-count{grid-row:2;grid-column:2;margin:0;align-self:center}
.home .rv-next{grid-row:2;grid-column:3;justify-self:start}
.home .rv-arrow{width:56px}
}
@media (prefers-reduced-motion: reduce){
.home .rv-track{scroll-behavior:auto}
.home .rv-arrow{transition:none}
}
/* Header on small laptops/tablets (768–1100px): with the Shop menu added the row
no longer fits, so the phone-number button steps aside (the number is still in
the Book flow, the footer and the mobile call icon) */
@media (min-width: 768px) and (max-width: 1100px){
.site-header .btn-outline.nav-btn{display:none}
}
/* header cart: count badge on the bag icon (hidden at 0) */
.cart-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none}
.cart-count{position:absolute;top:1px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
display:grid;place-items:center;background:var(--ink-900);color:var(--white);
font:600 10.5px/1 var(--font-body);font-variant-numeric:tabular-nums;pointer-events:none}
.cart-count[hidden]{display:none}
.site-header.is-transparent .cart-count{background:var(--cream);color:var(--ink-900)}
.cart-count.is-bump{animation:cartBump 420ms cubic-bezier(.16,.84,.44,1)}
@keyframes cartBump{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
/* add-to-cart button: filled briefly after adding */
/* "Added": a quiet done state (sand fill, dark text, check), not an action colour */
.svc-page .menu-book.is-added,.svc-page .menu-book.is-added:hover{background:var(--sand);border-color:var(--line-strong);color:var(--text-display)}
/* Homepage "Follow along" Instagram strip (above the footer): a bronze-700
panel with an inset cream frame and cream text,
then a single row of portrait photos. Every tile
sits in a thin white border (4px white gaps on a white strip). */
.insta-strip{display:flex;gap:4px;padding:4px;background:var(--white);height:clamp(320px,27vw,400px);overflow:hidden}
.insta-panel{flex:0 0 clamp(240px,21vw,300px);position:relative;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;
background:var(--bronze-700);color:var(--cream);text-decoration:none;padding:24px;
transition:background-color 320ms cubic-bezier(.16,.84,.44,1)}
.insta-panel::before{content:"";position:absolute;inset:10px;border:1px solid rgba(252,248,243,.55);pointer-events:none}
.insta-panel:hover{background:#5c422c;color:var(--cream)}
.insta-follow{font:400 clamp(30px,2.6vw,38px)/1.1 var(--font-display);color:var(--cream)}
.insta-handle{font:600 12px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(252,248,243,.85)}
.insta-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(252,248,243,.5);border-radius:50%;margin-top:6px;
transition:background-color 320ms cubic-bezier(.16,.84,.44,1),color 320ms cubic-bezier(.16,.84,.44,1)}
.insta-panel:hover .insta-icon{background:var(--cream);color:var(--bronze-700)}
/* the row scrolls sideways (swipe, trackpad, or drag with the mouse — see site.js); the last
photo peeking off the edge is the cue that there is more */
.insta-photos{flex:1 1 auto;min-width:0;display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab}
.insta-photos::-webkit-scrollbar{display:none}
.insta-photos.is-dragging{cursor:grabbing;scroll-snap-type:none}
.insta-photos.is-dragging .insta-tile{pointer-events:none}
.insta-tile{scroll-snap-align:start}
.insta-tile{flex:0 0 auto;height:100%;aspect-ratio:3/4;overflow:hidden;display:block;background:var(--sand)}
.insta-tile img{width:100%;height:100%;object-fit:cover}
.insta-panel:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px}
@media (max-width: 767px){
.insta-strip{flex-direction:column;height:auto}
.insta-panel{flex:none;padding:40px 24px}
.insta-photos{height:240px;scroll-snap-type:x mandatory}
}
@media (prefers-reduced-motion: reduce){ .insta-tile img,.insta-icon,.insta-panel{transition:none} }
/* Homepage Visit section (desktop): the info column is unboxed so heading
and hours become rows of the section grid; the map takes the other half,
flush against the info frame, and runs its full height. */
@media (min-width: 768px){
/* doubled selectors: Tailwind's utility classes load after this file */
.visit-grid.visit-grid{grid-template-rows:auto auto;row-gap:20px;column-gap:0; /* no gap: the map closes the info frame's open side */
grid-template-columns:minmax(0,1fr) minmax(0,1fr)} /* info and map split the width evenly */
.visit-grid .visit-info.visit-info{display:contents}
.visit-grid .visit-info > *{grid-column:1}
.visit-grid .visit-info > :first-child{grid-row:1;margin-bottom:0}
.visit-grid .visit-hours.visit-hours{grid-row:2}
/* the info column is unboxed, so its frame is a pseudo-element spanning both rows:
the service cards' hairline on top, left and bottom, open towards the map */
.visit-grid.visit-grid::before{content:"";grid-column:1;grid-row:1 / span 2;pointer-events:none;
border:1px solid var(--line-strong);border-right:0;border-radius:2px 0 0 2px}
.visit-grid .visit-info > *{padding-inline:clamp(24px,3vw,40px)}
.visit-grid .visit-info > :first-child{padding-top:clamp(24px,3vw,40px)}
.visit-grid .visit-hours.visit-hours{padding-bottom:clamp(24px,3vw,40px)}
.visit-grid .visit-map.visit-map{grid-column:2;grid-row:1 / span 2;align-self:stretch;justify-self:stretch;
width:auto;height:auto;aspect-ratio:auto;
border-radius:0 3px 3px 0} /* square where it meets the info frame; outer corners keep their rounding */
}
/* Footer (mobile): one column - brand, Visit, Pages, Hours stacked in that
order, each full width; the hours table spans the container so day and time
sit at opposite edges. Desktop keeps its row layout. */
@media (max-width: 767px){
.site-footer .footer-main,
.site-footer .footer-cols{flex-direction:column;flex-wrap:nowrap}
.site-footer .footer-main > *,
.site-footer .footer-cols{flex:none !important;width:100%;max-width:none !important}
.site-footer .footer-cols > *{flex:none !important;width:100%}
.site-footer .footer-hours{width:100%}
}
/* Services + packages (mobile): the Book / Add to Cart button leaves the name
line and sits full width after the description and any note, so names and
prices get the whole row and the button is a full-size tap target. The card's
second column (which only held the button) collapses. Desktop is unchanged. */
@media (max-width: 767px){
.svc-page .menu-item{grid-template-columns:minmax(0,1fr)}
.svc-page .menu-item .menu-book{grid-column:1;grid-row:auto;justify-self:stretch;
width:100%;min-width:0;height:40px;padding:0 16px;margin:16px 0 0}
}
/* Services, packages + team photo headers. The see-through navbar sits over the
top of the photo (as on the homepage), so the header adds the nav's height as
top padding: the photo visible below the nav stays 328px (358px on phones)
whatever the subtitle length, with the text centred in it. */
.page-hero{display:flex;flex-direction:column;justify-content:center;padding-top:76px;min-height:calc(328px + 76px)}
.page-hero > .relative{width:100%}
/* the homepage's bronze-700 (106,77,51) overlay, spread evenly because the text
here is centred (the homepage's is heaviest on the left, behind its copy);
darker at the top for the nav and at the bottom edge */
/* same neutral black shade as the homepage hero (no colour tint): deepest at the
top behind the nav, plus an even layer so the centred title reads anywhere */
.page-hero-wash{background:
linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 12%,rgba(0,0,0,0) 30%),
linear-gradient(0deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 25%),
rgba(0,0,0,.42)}
/* mobile: all three headers share one height, with a slightly smaller subtitle */
@media (max-width: 767px){
.page-hero{padding-top:60px;min-height:calc(358px + 60px)}
.page-hero .relative > p{font-size:16px}
}
/* services.html FAQ: the homepage's "Before You Come In" section, with the same
cream background and section spacing (64px on phones, like every section) */
.svc-faq{background:var(--surface-warm);padding-block:clamp(88px,10vw,152px)}
@media (max-width: 767px){ .svc-faq{padding-block:64px} }
/* questions reached by link (e.g. the pop-up's Policy link) clear the sticky navbar */
.svc-faq .acc{scroll-margin-top:96px}
/* ---- Cart drawer (every page; js/site.js) ----------------------------------
A native : a full-height panel on the right on desktop, a bottom
sheet on phones. Views: cart -> checkout -> order confirmed. Form fields,
labels, errors and the check mark reuse the booking pop-up's styles. */
.cart-drawer{margin:0 0 0 auto;padding:0;border:0;width:min(440px,100vw);max-width:none;height:100dvh;max-height:none;
background:var(--white);color:var(--text-body);box-shadow:-24px 0 64px -32px rgba(22,19,15,.45);overflow:hidden}
.cart-drawer::backdrop{background:rgba(22,19,15,.48)}
.cart-panel{display:flex;flex-direction:column;height:100%}
.cart-head{position:relative;display:flex;align-items:center;gap:8px;min-height:72px;padding:16px 64px 16px 28px;border-bottom:1px solid var(--line-hairline)}
.cart-title{font:400 26px/1.15 var(--font-display);color:var(--text-display);outline:none}
.cart-close-form{position:absolute;top:50%;right:14px;margin:-20px 0 0}
.cart-back{display:inline-flex;align-items:center;gap:4px;height:40px;margin-left:-8px;padding:0 10px 0 4px;border:0;border-radius:var(--r-control);
background:transparent;font:500 13px/1 var(--font-body);color:var(--text-muted);cursor:pointer}
.cart-back:hover{color:var(--text-display);background:var(--surface-warm)}
.cart-back[hidden]{display:none}
.cart-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:8px 28px 28px;scrollbar-width:thin;scrollbar-color:var(--taupe-200) transparent}
.cart-body [hidden]{display:none}
/* items: name + price on the first line, meta under the name, then the stepper */
.cart-list{list-style:none;margin:0;padding:0}
.cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:20px 0;border-bottom:1px solid var(--line-hairline)}
.cart-item-name{font:500 16px/1.35 var(--font-body);color:var(--text-display)}
.cart-item-meta{margin-top:4px;font:500 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.cart-item-save{color:#2f7355}
.cart-item-price{font:500 16px/1.35 var(--font-body);color:var(--text-price);font-variant-numeric:tabular-nums;text-align:right}
.cart-item-actions{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.cart-qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-control)}
.cart-qty-btn{display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--text-heading);cursor:pointer;
transition:background-color 160ms}
.cart-qty-btn:hover:not(:disabled){background:var(--surface-warm)}
.cart-qty-btn:disabled{color:var(--taupe-200);cursor:not-allowed}
.cart-qty-n{min-width:28px;text-align:center;font:500 15px/1 var(--font-body);color:var(--text-display);font-variant-numeric:tabular-nums}
.cart-remove{height:40px;padding:0 4px;border:0;background:transparent;font:400 13px/1 var(--font-body);color:var(--text-muted);
text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);cursor:pointer}
.cart-remove:hover{color:var(--text-display);text-decoration-color:currentColor}
/* empty state */
.cart-empty{display:grid;justify-items:start;gap:10px;padding:32px 0}
.cart-empty-title{font:400 22px/1.2 var(--font-display);color:var(--text-display)}
.cart-empty-text{font-size:15px;line-height:1.6;max-width:34ch}
.cart-empty-btn{margin-top:10px}
/* checkout */
.cart-checkout{display:grid;gap:28px;padding-top:20px}
.cart-summary{display:grid;gap:12px}
.cart-summary .book-legend{margin:0}
.cart-sum{display:grid;margin:0}
.cart-sum > div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line-hairline)}
.cart-sum dt{font-size:15px;line-height:1.45;color:var(--text-heading)}
.cart-sum dd{margin:0;font-size:15px;color:var(--text-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.cart-sum-qty{color:var(--text-muted)}
.cart-sum .cart-sum-total dt,.cart-sum .cart-sum-total dd{font-weight:600;color:var(--text-display)}
.cart-sum-save{font-weight:400;color:#2f7355}
.cart-pay-note{padding:14px 16px;border-radius:var(--r-card);background:var(--surface-warm);font-size:14px;line-height:1.55;color:var(--text-body)}
/* order confirmed */
.cart-done{display:grid;justify-items:start;gap:14px;padding-top:28px}
.cart-order-no{font:600 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.cart-done-text{font-size:15px;line-height:1.6;max-width:40ch}
.cart-done .cart-sum{width:100%;margin-top:6px}
.cart-demo-note{font-size:12.5px;line-height:1.5;color:var(--text-muted)}
/* pinned footer: total and savings, then the one primary action */
.cart-foot{display:grid;gap:14px;padding:18px 28px 22px;border-top:1px solid var(--line-hairline);background:var(--white)}
.cart-foot[hidden],.cart-total-row[hidden]{display:none}
.cart-total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0}
.cart-total-n{font:400 24px/1 var(--font-display);color:var(--text-price);font-variant-numeric:tabular-nums}
.cart-save{margin-top:6px;font-size:13px;color:#2f7355}
.cart-primary{width:100%}
/* open: slide in from the right (up from the bottom on phones) */
@media (prefers-reduced-motion: no-preference){
.cart-drawer[open]{animation:cartIn 360ms cubic-bezier(.16,.84,.44,1)}
.cart-drawer[open]::backdrop{animation:cartFade 360ms ease}
}
@keyframes cartIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes cartFade{from{opacity:0}to{opacity:1}}
@media (max-width: 560px){
.cart-drawer{margin:auto 0 0;width:100vw;height:auto;max-height:90dvh;border-radius:var(--r-modal) var(--r-modal) 0 0}
.cart-panel{max-height:90dvh}
.cart-head{padding-left:20px}
.cart-body{padding:8px 20px 24px}
.cart-foot{padding:16px 20px 20px}
@media (prefers-reduced-motion: no-preference){ .cart-drawer[open]{animation-name:cartUp} }
}
@keyframes cartUp{from{transform:translateY(100%)}to{transform:none}}
/* booking pop-up: step progress ("Step 2 of 3 · Your details") and the hint
that names what's missing while the main button is greyed out */
.book-summary.is-hint{color:var(--text-muted)}
/* booking pop-up: confirmation extras */
.book-done-block{display:grid;gap:6px;width:100%;padding-top:4px}
.book-done-block[hidden]{display:none}
.book-done-addr{font-size:15px;line-height:1.5;color:var(--text-display)}
.book-done-dir{font-size:14px;line-height:1.55;color:var(--text-body)}
.book-done-link{justify-self:start;margin-top:2px;font-size:14px;color:var(--text-heading);text-decoration:underline;text-underline-offset:3px}
.book-done-link:hover{color:var(--text-display)}
.book-prep{margin:0;padding:0 0 0 18px;display:grid;gap:8px;font-size:14px;line-height:1.55;color:var(--text-body)}
.book-prep li::marker{color:var(--bronze-400)}
.book-cal-add{justify-self:start}
.book-demo-note{font-size:12.5px;line-height:1.5;color:var(--text-muted)}
/* focus ring on dark surfaces: the deep aqua-700 ring would vanish there, so the
light aqua-300 takes over (hero, transparent nav, footer, bronze/photo panels) */
.site-header.is-transparent :focus-visible,
.home .hero :focus-visible,
.page-hero :focus-visible,
footer :focus-visible,
.team-cta-inner :focus-visible,
.insta-panel:focus-visible{outline-color:var(--aqua-300)}
/* cream glow for outlined buttons on dark photos (the View services glow, in cream);
used on the Meet the team call-to-action's phone button */
.btn-glow-cream{box-shadow:0 2px 14px -2px rgba(252,248,243,.34)}
.btn-glow-cream:hover{box-shadow:0 3px 20px -2px rgba(252,248,243,.5)}
/* footer "Follow us": round outlined Instagram and Facebook links (44px tap targets) */
.footer-social{display:flex;gap:12px;margin-top:6px}
.footer-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(252,248,243,.4);color:var(--cream);
transition:background-color 320ms cubic-bezier(.16,.84,.44,1),color 320ms cubic-bezier(.16,.84,.44,1),border-color 320ms cubic-bezier(.16,.84,.44,1)}
.footer-social a:hover{background:var(--cream);border-color:var(--cream);color:var(--ink-900)}
@media (prefers-reduced-motion: reduce){ .footer-social a{transition:none} }
/* address -> Google Maps (asks first, see site.js): underline on hover so it reads as a link */
.maps-link{text-decoration:none;text-underline-offset:3px}
.maps-link:hover,.maps-link:focus-visible{text-decoration:underline}
/* four footer columns (Visit, Pages, Hours, Follow us) need a tighter gap than the
old 120px to stay on one row beside the logo; doubled class beats tailwind.css */
@media (min-width: 1024px){ .site-footer .footer-cols.footer-cols{gap:32px clamp(40px,5vw,80px)} }
/* footer columns spread across the full width available to them */
.site-footer .footer-cols.footer-cols{flex:1 1 auto !important;justify-content:space-between}
/* footer brand block (logo + tagline) sits centred on phones; the columns below stay left-aligned */
@media (max-width: 767px){
.site-footer .footer-main img[alt="Luminosity"]{justify-self:center}
.site-footer .footer-main > :first-child > p{justify-self:center;text-align:center}
}
/* mobile header: cart and menu get 44x44 tap targets. The -4px side margins keep the
icons exactly where they sat at 36px, and the cart badge moves in by the same 4px
so it stays on the bag's corner. */
@media (max-width: 767px){
.site-header .cart-link,
.site-header #menuToggle{width:44px;height:44px;padding:0 !important;margin-inline:-4px;display:flex;align-items:center;justify-content:center}
.site-header .cart-link svg,
.site-header #menuToggle svg{width:24px;height:24px}
.site-header .cart-link .cart-count{top:3px;right:0}
}
/* Homepage photo CTA ("The Glow You've Been Looking For"): the parallax legs band
carries centred copy. A neutral black shade (deepest through the middle, where the
copy sits) keeps the cream text readable without tinting the photo. */
/* shared photo CTA (homepage glow band and the Meet the team banner); off the homepage the
photo simply covers the section, on the homepage it keeps its parallax (.home .img-band img) */
.img-cta{position:relative;overflow:hidden;background:var(--sand)}
.img-cta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.img-cta.img-cta{display:grid;place-items:center;min-height:clamp(360px,34vw,520px);height:auto;isolation:isolate}
.img-cta img{z-index:-2}
.img-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(ellipse 70% 75% at 50% 50%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 100%),rgba(0,0,0,.12)}
.img-cta-inner{position:relative;display:grid;justify-items:center;gap:20px;max-width:640px;padding:72px clamp(20px,4vw,48px);text-align:center}
.img-cta .display-2{color:var(--cream)}
.img-cta-inner p{font-size:17px;line-height:1.62;color:rgba(252,248,243,.9);max-width:46ch;margin-top:-8px} /* 12px under the heading (the 20px grid gap minus 8) */
/* two equal-width buttons (the wider label sets both), like the hero */
.img-cta-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;justify-content:center;gap:12px;margin-top:8px}
.img-cta-outline{border-color:var(--cream)}
.img-cta :focus-visible{outline-color:var(--aqua-300)}
@media (max-width: 767px){
.img-cta-inner{padding:48px clamp(20px,4vw,48px);width:100%}
.img-cta-inner p{font-size:16px}
.img-cta-actions{grid-auto-flow:row;justify-self:stretch;width:100%}
}
/* mobile: 18px between the stacked buttons in the hero and the photo CTA */
@media (max-width: 767px){ .home .hero-actions,.img-cta-actions{gap:18px} }
/* mobile: main buttons (aqua, dark and outlined .btn) are 48px tall */
@media (max-width: 767px){ .btn:not(.btn-sm){height:48px} }
/* packages page: grouped by category (Sunless Tanning, Teeth Whitening, Bundles) */
.pkg-group-next{margin-top:clamp(56px,6vw,80px)}
/* Meet the team portraits: fill the 3:4 frame, same corner rounding as the placeholders they replaced */
.team-photo{overflow:hidden;border-radius:var(--r-media);background:var(--sand)}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* Meet the team: 120px above and below the artist cards on tablet/desktop
(mobile keeps its 64px rhythm, set above) */
@media (min-width: 768px){ .team-main{padding-top:120px !important;padding-bottom:120px !important} }
/* FAQ bands (homepage, Services, Packages): sand instead of the near-white cream so the
section reads as its own warm "help" band; question dividers step up to taupe-200 to
stay visible on it */
.home .home-section-warm,
.svc-faq{background:#f6f5f3} /* same light warm grey as the booking form fields */
.home .home-section-warm .acc,
.svc-faq .acc{border-bottom-color:var(--line-strong)}
/* ---- Booking pop-up, distilled ----
Top bar: Back / Change service on the left, "Step 1 of 3" beside the close
button. The footer is a single row (price + one button whose label names what
is still missing). Step 1 reads Option -> Day -> Time -> Artist (optional);
the day picker is a one-week strip. */
.book-steps{position:absolute;top:12px;right:60px;z-index:2;height:40px;margin:0;display:flex;align-items:center;
font:600 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.book-steps[hidden]{display:none}
.book-optional{margin-left:6px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--text-faint)}
.book-artist-row .book-optional{color:var(--text-muted)}
/* one-week strip: a little taller than the old grid cells, each a full tap target */
.book-cal-day{height:44px}
/* review: two short blocks instead of a six-row table */
.book-review{display:grid;gap:18px}
.book-review-block{display:grid;gap:3px;padding-top:16px;border-top:1px solid var(--line-hairline)}
.book-review-block:first-child{padding-top:0;border-top:0}
.book-review-block .book-legend{margin:0 0 5px}
.book-review-block p:not(.book-legend){font-size:15px;line-height:1.5;color:var(--text-body);overflow-wrap:anywhere}
.book-review-block .book-review-main{font-weight:500;color:var(--text-display)}
/* confirmation: one summary line, then where to go; prep tips fold out */
.book-done-summary{width:100%;padding-top:16px;border-top:1px solid var(--line-hairline);font-size:15px;line-height:1.55;color:var(--text-body)}
.book-done-summary strong{display:block;font-weight:500;color:var(--text-display)}
.book-done-prep{width:100%;border-top:1px solid var(--line-hairline);border-bottom:1px solid var(--line-hairline)}
.book-done-prep[hidden]{display:none}
.book-done-prep summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;
font:500 14px/1.3 var(--font-body);color:var(--text-heading)}
.book-done-prep summary::-webkit-details-marker{display:none}
.book-done-prep summary svg{flex:none;color:var(--text-muted);transition:transform 260ms cubic-bezier(.16,1,.3,1)}
.book-done-prep[open] summary svg{transform:rotate(180deg)}
.book-done-prep .book-prep{padding-bottom:16px}
@media (prefers-reduced-motion: reduce){ .book-done-prep summary svg{transition:none} }
/* booking confirmation: check above the title; check, title and message centred.
The extra top margin keeps the check clear of the close (X) button. */
.book-done-head{justify-items:center;text-align:center;width:100%;margin-top:20px}
.book-done-titlerow{display:grid;justify-items:center;gap:16px}
.book-done-titlerow .book-done-icon{width:48px;height:48px}
.book-done-head .book-done-text{margin-inline:auto}
@media (max-width: 560px){ .book-done .book-done-titlerow .book-step-title{font-size:26px} }
/* footer logo: 56px on desktop, 52px on phones (larger than the header wordmark,
so the full lockup and its "Beauty Studio" script read clearly) */
@media (max-width: 767px){ .site-footer .footer-logo{height:52px !important} }
/* Meet the team: one row per artist. Phones: portrait, then text (source order).
Tablet/desktop: bio, pills and "Book with" on the left, portrait on the right,
text centred against the photo. Doubled classes beat tailwind.css utilities. */
.team-list{display:grid;gap:64px}
.team-card.team-card{display:flex;flex-direction:column;gap:20px}
.team-card > .grid.grid:last-child{display:flex;flex-direction:column;gap:8px}
.team-card .flex-wrap.flex-wrap{margin-top:0;padding-top:14px}
.team-card > .grid:last-child > p{font-size:15px;max-width:46ch}
@media (min-width: 768px){
.team-list{gap:clamp(72px,9vw,128px)}
.team-card.team-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:clamp(40px,7vw,112px);align-items:center}
.team-card .team-photo{grid-column:2;grid-row:1}
.team-card > .grid.grid:last-child{grid-column:1;grid-row:1;gap:10px}
.team-card > .grid:last-child > p{font-size:16px}
}
/* Meet the team: "Book with " under each card's pills; opens the booking
pop-up with that artist preselected */
.team-book{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;
font:500 14px/1 var(--font-body);color:var(--text-heading);text-decoration:none}
.team-book svg{color:var(--taupe-400);transition:transform 450ms cubic-bezier(.16,.84,.44,1),color 450ms cubic-bezier(.16,.84,.44,1)}
.team-book:hover{color:var(--text-display)}
.team-book:hover svg{transform:translateX(4px);color:var(--text-display)}
@media (prefers-reduced-motion: reduce){ .team-book svg{transition:none} }
/* tablet: photo and text share the row equally so neither overflows */
@media (min-width: 768px) and (max-width: 1023px){
.team-card.team-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
}
/* small tablets (768–1023px): the desktop header (logo, four links, Book, cart) is
too wide at a fixed 180px Book button; let it size to its label and tighten gaps */
@media (min-width: 768px) and (max-width: 1023px){
.site-header .nav-btn{width:auto}
.site-header nav.ml-auto{gap:16px}
.site-header .hidden.md\:flex{gap:16px}
}
/* Meet the team: every portrait on the left, text on the right */
@media (min-width: 1024px){ .team-card.team-card{grid-template-columns:minmax(0,280px) minmax(0,1fr)} }
@media (min-width: 768px) and (max-width: 1023px){ .team-card.team-card{grid-template-columns:minmax(0,230px) minmax(0,1fr)} }
@media (min-width: 768px){
.team-card .team-photo{grid-column:1}
.team-card > .grid.grid:last-child{grid-column:2}
}
/* Meet the team: the rows sit in a narrower, centred column (photo + text read
as one centred block instead of hugging the left edge) */
@media (min-width: 1024px){ .team-list{max-width:860px;margin-inline:auto;width:100%} }
/* polish: comfortable reading measure for FAQ answers and the packages footnote;
dialog/cart primaries now use the aqua .btn-primary, so their hover stays aqua */
.acc p{max-width:600px} /* about 70 characters per line */
.pkg-footnote{max-width:520px}
.book-primary:not([aria-disabled="true"]):hover,.cart-primary:hover{background:var(--action-primary-hover);color:var(--ink-900)}
/* Meet the team: artist names are h2 now (h1 -> h2), same look as before */
.team-card h2.font-display{font-size:clamp(26px,3vw,36px);line-height:1.15}
/* booking review: when and how payment happens, just above the cancellation note */
.book-pay{padding:14px 16px;border-radius:var(--r-control);background:var(--sand);font-size:14px;line-height:1.55;color:var(--text-body)}
.book-pay strong{font-weight:600;color:var(--text-display)}
/* when a day is picked, the times scroll into view clear of the sticky footer */
.book-when .book-field:has(.book-times){scroll-margin-bottom:112px;scroll-margin-top:24px}
/* ===== Booking pop-up: modern, clean skin =====
Soft rounded surfaces instead of hairlines and underlines: filled fields,
selectable option cards, pill day/time chips, sentence-case labels, a sheet
with a grab handle on phones. Scoped to #bookDialog so the rest of the site
(and the services page's own dropdown) keep their current style. */
#bookDialog{--bk-r:14px;--bk-r-sm:10px;--bk-fill:#f6f5f3;--bk-line:#e8e4de;
border-radius:20px;box-shadow:0 24px 64px -24px rgba(35,31,28,.35)}
#bookDialog::backdrop{background:rgba(22,19,15,.42);backdrop-filter:blur(3px)}
#bookDialog .book-body{gap:28px}
/* labels: sentence case, calm weight */
#bookDialog .book-legend{font:600 13px/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-display);margin-bottom:10px}
#bookDialog .book-optional{font-weight:400;color:var(--text-muted);letter-spacing:0}
#bookDialog .book-steps{letter-spacing:.04em;text-transform:none;font:500 12.5px/1 var(--font-body);color:var(--text-muted)}
#bookDialog .book-back{font-size:13.5px}
/* fields: filled, rounded, no underline */
#bookDialog .artist-select,
#bookDialog .book-input input{height:50px;padding:0 44px 0 16px;border:1px solid transparent;border-radius:var(--bk-r-sm);
background-color:var(--bk-fill);background-position:right 16px center;font:400 15px/1.2 var(--font-body);color:var(--text-display);
transition:border-color 200ms ease,background-color 200ms ease,box-shadow 200ms ease}
#bookDialog .book-input input{padding-right:16px}
#bookDialog .artist-select:hover,#bookDialog .book-input input:hover{border-color:var(--bk-line)}
#bookDialog .artist-select:focus,#bookDialog .book-input input:focus{outline:none;border-color:var(--ink-900);background-color:var(--white);box-shadow:0 0 0 3px rgba(59,192,218,.22)}
#bookDialog .book-input input[aria-invalid="true"]{border-color:var(--status-error);background-color:var(--white)}
#bookDialog .book-pick,#bookDialog .book-artist-row,#bookDialog .book-input{gap:8px}
#bookDialog .book-pick .book-legend,#bookDialog .book-artist-row .book-legend,#bookDialog .book-input .book-legend{margin:0}
/* add-ons: selectable cards */
/* calendar: a soft card with pill days */
#bookDialog .book-cal{padding:14px 12px 12px;border-radius:var(--bk-r);background:var(--bk-fill);gap:4px}
#bookDialog .book-cal-head{padding:0 4px}
#bookDialog .book-cal-month{font-weight:600;font-size:14px}
#bookDialog .book-cal-nav{width:36px;height:36px;border-radius:999px;background:var(--white)}
#bookDialog .book-cal-grid{gap:4px}
#bookDialog .book-cal-day{height:46px;border-radius:12px;font-size:15px;font-variant-numeric:tabular-nums}
#bookDialog .book-cal-day:not(:disabled){background:var(--white)}
#bookDialog .book-cal-day:hover:not(:disabled){border-color:var(--ink-900)}
#bookDialog .book-cal-day[aria-pressed="true"]{background:var(--action-ink);border-color:var(--action-ink);color:var(--white)}
#bookDialog .book-cal-day:disabled{background:transparent;color:var(--taupe-300)}
/* times: pills */
#bookDialog .book-times{gap:8px}
#bookDialog .book-chip{min-height:44px;border-radius:999px;border-color:var(--bk-line);font-size:14px;font-variant-numeric:tabular-nums}
#bookDialog .book-chip:hover{border-color:var(--ink-900)}
/* review and confirmation blocks: soft cards instead of rules */
#bookDialog .book-review{gap:10px}
#bookDialog .book-review-block,#bookDialog .book-review-block:first-child{padding:16px;border:0;border-radius:var(--bk-r-sm);background:var(--bk-fill)}
#bookDialog .book-review-block .book-legend{margin-bottom:6px}
#bookDialog .book-pay{border-radius:var(--bk-r-sm);background:transparent;border:1px solid var(--bk-line)}
#bookDialog .book-done-summary{padding:16px;border:0;border-radius:var(--bk-r-sm);background:var(--bk-fill)}
#bookDialog .book-done-prep{border:1px solid var(--bk-line);border-radius:var(--bk-r-sm);padding:0 16px}
#bookDialog .book-arrange{border-radius:var(--bk-r-sm)}
/* footer: soft lift, rounded button */
#bookDialog .book-foot{border-top:0;box-shadow:0 -10px 24px -18px rgba(35,31,28,.28)}
#bookDialog .book-primary,#bookDialog .book-cal-add{border-radius:12px}
#bookDialog .book-total-label{letter-spacing:.02em;text-transform:none;font:500 12.5px/1 var(--font-body)}
#bookDialog .book-close{border-radius:999px;background:var(--bk-fill)}
#bookDialog .book-done-icon{background:var(--aqua-50)}
/* phones: bottom sheet with a grab handle */
@media (max-width: 560px){
#bookDialog{border-radius:22px 22px 0 0}
#bookDialog::after{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:var(--line-strong)}
}
/* booking: a stray tap on the backdrop mid-booking nudges the panel instead of closing it */
@media (prefers-reduced-motion: no-preference){
#bookDialog.is-nudge{animation:bookNudge 320ms cubic-bezier(.16,.84,.44,1)}
@keyframes bookNudge{0%,100%{transform:none}40%{transform:scale(1.012)}}
}
/* ===== Cart drawer: same modern skin as the booking pop-up =====
Filled rounded fields, sentence-case labels, soft cards, rounded buttons and a
round close button, using the booking form's light warm grey (#f6f5f3). */
#cartDrawer{--bk-r:14px;--bk-r-sm:10px;--bk-fill:#f6f5f3;--bk-line:#e8e4de;
border-radius:0;box-shadow:0 24px 64px -24px rgba(35,31,28,.35)} /* desktop side drawer: square edges */
#cartDrawer::backdrop{background:rgba(22,19,15,.42);backdrop-filter:blur(3px)}
#cartDrawer .cart-head{border-bottom:0;min-height:76px}
#cartDrawer .book-close{border-radius:999px;background:var(--bk-fill)}
#cartDrawer .cart-back{font-size:13.5px;border-radius:999px}
#cartDrawer .cart-back:hover{background:var(--bk-fill)}
/* labels and fields */
#cartDrawer .book-legend{font:600 13px/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-display)}
#cartDrawer .book-input{gap:8px}
#cartDrawer .book-input .book-legend{margin:0}
#cartDrawer .book-input input{height:50px;padding:0 16px;border:1px solid transparent;border-radius:var(--bk-r-sm);background:var(--bk-fill);
font:400 15px/1.2 var(--font-body);color:var(--text-display);transition:border-color 200ms ease,background-color 200ms ease,box-shadow 200ms ease}
#cartDrawer .book-input input:hover{border-color:var(--bk-line)}
#cartDrawer .book-input input:focus{outline:none;border-color:var(--ink-900);background:var(--white);box-shadow:0 0 0 3px rgba(59,192,218,.22)}
#cartDrawer .book-input input[aria-invalid="true"]{border-color:var(--status-error);background:var(--white)}
/* items: soft cards with a pill quantity stepper */
#cartDrawer .cart-list{display:grid;gap:10px;padding-top:4px}
#cartDrawer .cart-item{padding:16px;border:1px solid var(--bk-line);border-bottom:1px solid var(--bk-line);border-radius:var(--bk-r)}
#cartDrawer .cart-item-meta{letter-spacing:.02em;text-transform:none;font:400 13px/1.4 var(--font-body)}
#cartDrawer .cart-qty{border-color:var(--bk-line);border-radius:999px;background:var(--bk-fill)}
#cartDrawer .cart-qty-btn{border-radius:999px}
#cartDrawer .cart-qty-btn:hover:not(:disabled){background:var(--white)}
#cartDrawer .cart-remove{color:var(--text-body)}
/* order summary and payment note as soft cards */
#cartDrawer .cart-summary{padding:16px;border-radius:var(--bk-r-sm);background:var(--bk-fill);gap:8px}
#cartDrawer .cart-sum > div{border-top-color:var(--bk-line)}
#cartDrawer .cart-sum > div:first-child{border-top:0}
#cartDrawer .cart-pay-note{border-radius:var(--bk-r-sm);background:transparent;border:1px solid var(--bk-line)}
#cartDrawer .cart-done .cart-sum{padding:4px 16px;border-radius:var(--bk-r-sm);background:var(--bk-fill)}
#cartDrawer .cart-order-no{letter-spacing:.02em;text-transform:none;font:500 13px/1.4 var(--font-body)}
#cartDrawer .book-done-icon{background:var(--aqua-50)}
/* footer: soft lift, rounded button, sentence-case total */
#cartDrawer .cart-foot{border-top:0;box-shadow:0 -10px 24px -18px rgba(35,31,28,.28)}
#cartDrawer .book-total-label{letter-spacing:.02em;text-transform:none;font:500 12.5px/1 var(--font-body)}
#cartDrawer .cart-primary,#cartDrawer .cart-empty-btn{border-radius:12px}
/* phones: bottom sheet with a grab handle */
@media (max-width: 560px){
#cartDrawer{border-radius:22px 22px 0 0}
#cartDrawer::after{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:var(--line-strong)}
}
/* booking calendar: a day this service is booked by phone (lashes on Saturday) */
#bookDialog .book-cal-day .book-cal-phone{position:absolute;bottom:4px;left:0;right:0;font:600 9px/1 var(--font-body);letter-spacing:.04em;color:var(--aqua-700)}
#bookDialog .book-cal-day:disabled:has(.book-cal-phone){padding-bottom:8px}
/* Add to Cart toast */
.cart-toast{position:fixed;left:50%;bottom:24px;z-index:60;display:flex;align-items:center;gap:16px;max-width:calc(100vw - 32px);
padding:10px 10px 10px 18px;border-radius:14px;background:var(--ink-900);color:var(--white);box-shadow:0 16px 40px -16px rgba(22,19,15,.55);
font:400 14px/1.4 var(--font-body);transform:translate(-50%,12px);opacity:0;transition:transform 300ms cubic-bezier(.16,.84,.44,1),opacity 300ms ease}
.cart-toast.is-in{transform:translate(-50%,0);opacity:1}
.cart-toast[hidden]{display:none}
.cart-toast-btn{flex:none;height:40px;padding:0 16px;border:0;border-radius:10px;background:var(--action-primary);color:var(--ink-900);font:500 14px/1 var(--font-body)}
.cart-toast-btn:hover{background:var(--action-primary-hover)}
.cart-toast-btn:focus-visible{outline:2px solid var(--aqua-300);outline-offset:2px}
@media (max-width: 560px){ .cart-toast{left:16px;right:16px;bottom:16px;transform:translateY(12px)} .cart-toast.is-in{transform:none} .cart-toast-text{flex:1} }
@media (prefers-reduced-motion: reduce){ .cart-toast{transition:none} }
/* Add to Cart keeps one width when it switches to "✓ Added", so the row's price doesn't shift */
@media (min-width: 561px){ .svc-page .menu-book[data-add-to-cart]{min-width:120px} }
/* small uppercase labels (section labels, filter label, footer and hours headings,
team roles): 12px with lighter tracking so they read easily on phones */
.label-caps{font:500 12px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase}
/* booking: a session covered by a just-bought package */
#bookDialog .book-pkg{margin:10px 0 0;padding:12px 14px;border-radius:10px;background:var(--aqua-50);
font:400 14px/1.45 var(--font-body);color:var(--text-display)}
#bookDialog .book-pkg strong{display:block;font-weight:600;font-size:12.5px;color:var(--aqua-700);margin-bottom:2px}
#bookDialog .book-pkg[hidden]{display:none}
#bookDialog .book-done-pkg{display:block;margin-top:6px;font-weight:500;color:var(--aqua-700)}
#bookDialog .book-pkg{margin-right:-36px} /* span the full width (the head leaves room for the close button) */
#bookDialog .book-total-label{white-space:nowrap}
/* form errors (booking + checkout): red text with a small alert icon, red field
border; while fixing it the focus ring turns red too */
.book-input .book-error{display:flex;align-items:flex-start;gap:6px;font-size:13px;line-height:1.4;color:var(--status-error)}
.book-input .book-error::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,