/* Shared styles for the public marketing pages (welcome, services).
   Lives here rather than inline so the two pages can't drift apart. */
:root{ --ink:#1c1430; --plum:#2a1c3f; --rose:#cd2f6a; --rose2:#f072a0; --gold:#c2a36b; --cream:#fbf6f3; --cream2:#f6efe9; --muted:#6c6478; --border:#ece6ee; --soft:#faf6f7; }
*{ box-sizing:border-box; }
/* `hidden` has to beat the display rules further down. The browser's own
   [hidden]{display:none} is a user-agent style, so any author rule that sets
   display — .menu-list{display:grid}, .svc{display:flex} — silently outranks
   it, and setting el.hidden = true does nothing at all. That's why collapsing
   a category, "Collapse all" and the menu search all appeared dead: the state
   was changing correctly and nothing moved. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#241c33; background:#fff; -webkit-font-smoothing:antialiased; line-height:1.55; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.display{ font-family:"Fraunces",Georgia,serif; font-weight:600; letter-spacing:-.01em; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15px; border-radius:999px; padding:14px 28px; cursor:pointer; border:1px solid transparent; transition:.18s; white-space:nowrap; }
.btn-rose{ background:var(--rose); color:#fff; box-shadow:0 10px 24px -10px rgba(205,47,106,.6); }
.btn-rose:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -10px rgba(205,47,106,.7); }
.btn-ghost{ background:transparent; border-color:rgba(28,20,48,.18); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--rose); color:var(--rose); }
.btn-light{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(4px); }
.btn-light:hover{ background:rgba(255,255,255,.24); }
.eyebrow{ text-transform:uppercase; letter-spacing:.22em; font-size:11.5px; font-weight:700; color:var(--rose); }
.h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.1; margin:.32em 0 .2em; }
.lead{ color:var(--muted); font-size:17px; max-width:600px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
section{ padding:96px 0; }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:.2s; }
.nav.scrolled{ border-color:var(--border); box-shadow:0 8px 24px -20px rgba(20,12,40,.7); }
.nav .row{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:"Fraunces",serif; font-weight:600; font-size:21px; letter-spacing:-.01em; }
.brand .dot{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--rose2),var(--rose)); flex:none; }
.brand img{ width:40px; height:40px; border-radius:12px; object-fit:cover; flex:none; }
.nav .links{ display:flex; align-items:center; gap:32px; }
.nav .links a{ font-size:15px; font-weight:500; color:#41384f; }
.nav .links a:hover{ color:var(--rose); }
.nav .links a.btn-rose{ color:#fff; }
.nav .links a.btn-rose:hover{ color:#fff; }
.menu-btn{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.menu-btn span{ display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; }
.acct{ position:relative; }
.acct-btn{ background:none; border:0; cursor:pointer; padding:0; display:inline-flex; align-items:center; }
.avatar{ width:40px; height:40px; border-radius:999px; object-fit:cover; display:inline-flex; align-items:center; justify-content:center; }
.avatar-fallback{ background:linear-gradient(135deg,var(--rose2),var(--rose)); color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em; }
.avatar-guest{ background:#f1ecf3; color:var(--rose); border:1px solid var(--border); }
.acct-menu{ position:absolute; right:0; top:calc(100% + 10px); min-width:210px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 18px 44px -18px rgba(20,12,40,.45); padding:8px; display:none; flex-direction:column; gap:2px; }
.acct.open .acct-menu{ display:flex; }
.acct-head{ padding:8px 12px 8px; font-size:13px; font-weight:600; color:#6b7280; border-bottom:1px solid var(--border); margin-bottom:4px; }
.acct-menu a{ padding:10px 12px; border-radius:9px; font-size:14px; color:var(--ink); }
.acct-menu a:hover{ background:#f6f3f8; color:var(--rose); }

/* Hero */
.hero{ background:radial-gradient(110% 90% at 90% 10%, #fdeef4 0%, var(--cream) 46%, var(--cream) 100%); overflow:hidden; }
.hero .grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; padding:72px 0 88px; }
.hero .pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:13px; font-weight:600; color:#5a4f6a; box-shadow:0 6px 18px -12px rgba(20,12,40,.4); }
.hero h1{ font-family:"Fraunces",serif; font-weight:600; font-size:clamp(40px,5.6vw,68px); line-height:1.02; letter-spacing:-.02em; margin:.3em 0 .28em; }
.hero h1 em{ font-style:italic; color:var(--rose); }
.hero p{ color:#5a5168; font-size:18.5px; max-width:480px; margin:0 0 30px; }
.hero .actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero .stats{ display:flex; gap:40px; margin-top:46px; padding-top:30px; border-top:1px solid rgba(28,20,48,.1); flex-wrap:wrap; }
.hero .stats .n{ font-family:"Fraunces",serif; font-size:30px; font-weight:600; }
.hero .stats .l{ font-size:13px; color:var(--muted); margin-top:1px; }
.hero-art{ position:relative; }
.hero-art .glow{ position:absolute; inset:-8% -6% -6% 6%; background:radial-gradient(circle at 60% 40%, rgba(240,114,160,.5), transparent 62%); filter:blur(10px); z-index:0; }
.hero-art .frame{ position:relative; z-index:1; border-radius:26px; overflow:hidden; box-shadow:0 40px 80px -38px rgba(40,18,55,.55); aspect-ratio:1/1; border:6px solid #fff; }
.hero-art .frame img{ width:100%; height:100%; object-fit:cover; }
.hero-art .chip{ position:absolute; z-index:2; bottom:20px; left:-18px; background:#fff; border-radius:16px; padding:13px 17px; box-shadow:0 22px 44px -20px rgba(40,18,55,.45); display:flex; align-items:center; gap:11px; }
.hero-art .chip .st{ color:#f5b301; font-size:13px; letter-spacing:1px; }
.hero-art .chip b{ font-size:14px; }
.hero-art .chip small{ color:var(--muted); font-size:12px; }

/* Section heading */
.sec-head{ max-width:660px; }

/* Highlights */
.feat{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.feat .c{ border:1px solid var(--border); border-radius:20px; padding:26px; background:#fff; transition:.18s; }
.feat .c:hover{ box-shadow:0 26px 50px -32px rgba(20,12,40,.45); transform:translateY(-3px); }
.feat .ic{ width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,#fde4ee,#f7e9f3); color:var(--rose); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px; }
.feat h3{ margin:0 0 6px; font-size:17.5px; }
.feat p{ margin:0; color:var(--muted); font-size:14.5px; }

/* Experience band */
.exp{ background:var(--cream); }
.exp .grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }
.exp .art{ position:relative; }
.exp .art img{ width:100%; border-radius:24px; aspect-ratio:4/5; object-fit:cover; box-shadow:0 40px 80px -42px rgba(40,18,55,.5); }
.exp .art .tag{ position:absolute; right:-14px; top:26px; background:#fff; border-radius:14px; padding:12px 16px; box-shadow:0 22px 44px -22px rgba(40,18,55,.4); font-size:13.5px; font-weight:600; }
.exp ul{ list-style:none; padding:0; margin:24px 0 30px; }
.exp li{ display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:16px; color:#3c3350; }
.exp li .tk{ color:var(--rose); flex:none; margin-top:2px; }

/* Services */
.services{ background:#fff; }
.cat{ margin-top:0; }
.cat h3{ margin:0; font-size:inherit; font-weight:inherit; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
/* Menu controls — a 190-item catalogue is unreadable as one flat wall,
   so it gets a search box and a category rail. */
.menu-tools{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:36px; padding:16px 0 14px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); }
.menu-toggle-all{ font:inherit; font-size:13px; font-weight:600; color:var(--rose); background:none; border:0; padding:6px 2px; cursor:pointer; white-space:nowrap; }
.menu-toggle-all:hover{ text-decoration:underline; }
.menu-search{ position:relative; max-width:420px; width:100%; }
.menu-search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted); pointer-events:none; }
.menu-search input{ width:100%; height:46px; border:1px solid var(--border); border-radius:999px; padding:0 18px 0 42px; font:inherit; font-size:14.5px; color:var(--ink); background:#fff; outline:none; transition:.18s; }
.menu-search input:focus{ border-color:var(--rose); box-shadow:0 0 0 3px rgba(205,47,106,.12); }
.menu-empty{ text-align:center; color:var(--muted); margin-top:40px; }

/* Accordion header — the whole row is the hit target. */
.cat-head{ width:100%; display:flex; align-items:center; gap:14px; font:inherit; font-family:"Fraunces",serif; font-size:20px; font-weight:600; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--border); padding:16px 2px; cursor:pointer; text-align:left; transition:.16s; }
.cat-head:hover{ color:var(--rose); }
.cat-name{ flex:1; min-width:0; }
.cat-count{ font-family:"Inter",sans-serif; font-size:12px; font-weight:600; color:var(--muted); background:var(--soft); border:1px solid var(--border); border-radius:999px; padding:3px 10px; flex:none; }
.cat-chev{ width:18px; height:18px; flex:none; color:var(--muted); transition:transform .18s; }
.cat-head[aria-expanded="true"] .cat-chev{ transform:rotate(180deg); }
.cat-head[aria-expanded="true"]{ color:var(--rose); }

/* Rows, not cards: none of the catalogue carries photography, so a
   reserved image block was only padding the page out. */
.menu-list{ display:grid; gap:10px; }
.svc{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:16px; transition:.16s; }
.svc:hover{ border-color:var(--rose2); box-shadow:0 14px 30px -22px rgba(20,12,40,.55); }
.svc .ph{ width:52px; height:52px; flex:none; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#fbe6f0,#efe4f4); }
.svc .ph img{ width:100%; height:100%; object-fit:cover; }
.svc .b{ min-width:0; flex:1; }
.svc .b h4{ margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
.svc .desc{ color:var(--muted); font-size:13px; margin:3px 0 0; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.svc .meta{ display:flex; align-items:center; gap:12px; flex:none; }
.svc .price{ font-family:"Fraunces",serif; font-weight:600; color:var(--ink); font-size:17px; white-space:nowrap; }
.svc .dur{ font-size:12px; color:var(--muted); background:var(--soft); border:1px solid var(--border); padding:3px 9px; border-radius:999px; white-space:nowrap; }
@media(max-width:560px){
	.svc{ flex-wrap:wrap; gap:10px 14px; }
	.svc .b{ flex:1 1 100%; order:1; }
	.svc .ph{ order:0; }
	.svc .meta{ order:2; width:100%; justify-content:space-between; }
}

/* Team */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.member .pic{ aspect-ratio:1; border-radius:22px; overflow:hidden; background:linear-gradient(135deg,var(--rose2),var(--rose)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; font-weight:700; margin-bottom:14px; box-shadow:0 22px 44px -30px rgba(40,18,55,.5); }
.member .pic img{ width:100%; height:100%; object-fit:cover; }
.member h4{ margin:0; font-size:16.5px; }
.member p{ margin:2px 0 0; color:var(--muted); font-size:13.5px; }

/* Visit */
.visit{ background:var(--cream); }
.loc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:24px; margin-top:48px; }
.loc{ background:#fff; border:1px solid var(--border); border-radius:22px; padding:28px; }
.loc h3{ font-family:"Fraunces",serif; font-weight:600; margin:0 0 4px; font-size:21px; }
.loc .hours{ margin:18px 0 22px; }
.loc .hr{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--border); font-size:14.5px; }
.loc .hr:last-child{ border-bottom:0; }
.loc .hr .d{ color:#3c3350; font-weight:500; }
.loc .hr .t{ color:var(--muted); }
.loc .hr.closed .t{ color:#c0392b; opacity:.75; }
.visit-top{ display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; margin-top:44px; background:#fff; border:1px solid var(--border); border-radius:24px; padding:18px; }
.visit-top .map{ border-radius:16px; overflow:hidden; aspect-ratio:16/11; background:var(--soft); }
.visit-top .map iframe{ width:100%; height:100%; border:0; display:block; }
.visit-top .addr{ padding:10px 18px 14px 8px; }
.visit-top .addr h3{ font-family:"Fraunces",serif; font-weight:600; font-size:24px; margin:.3em 0 .35em; }
.visit-top .addr-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Hero trust line */
.hero .trust{ display:flex; gap:18px 28px; flex-wrap:wrap; margin-top:42px; padding-top:28px; border-top:1px solid rgba(28,20,48,.1); color:#5a5168; font-size:14.5px; font-weight:500; }
.hero .trust span{ display:inline-flex; align-items:center; gap:7px; }
.hero .trust b{ color:var(--rose); }

/* Testimonials */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.quote{ border:1px solid var(--border); border-radius:20px; padding:28px; background:#fff; }
.quote .stars{ color:#f5b301; letter-spacing:2px; font-size:15px; }
.quote p{ font-size:15.5px; color:#352c4a; margin:13px 0 16px; }
.quote .who{ font-weight:700; font-size:14px; }

/* CTA banner (full-bleed image) */
.cta-band{ position:relative; border-radius:30px; overflow:hidden; }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta-band .scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(26,13,40,.86) 0%, rgba(26,13,40,.6) 48%, rgba(26,13,40,.2) 100%); }
.cta-band .in{ position:relative; padding:74px 44px; max-width:560px; color:#fff; }
.cta-band h2{ font-family:"Fraunces",serif; font-weight:600; font-size:clamp(28px,3.6vw,44px); margin:0 0 12px; }
.cta-band p{ color:#e9e2f2; margin:0 0 26px; font-size:17px; }

footer{ border-top:1px solid var(--border); padding:48px 0 32px; color:var(--muted); font-size:14px; }
.foot{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; }
.foot .links{ display:flex; gap:24px; flex-wrap:wrap; }
.foot a:hover{ color:var(--rose); }
.foot .socials{ display:flex; gap:10px; }
.foot .socials a{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid var(--border); color:var(--muted); transition:.18s; }
.foot .socials a:hover{ color:#fff; background:var(--rose); border-color:var(--rose); transform:translateY(-1px); }
.foot .socials svg{ width:18px; height:18px; }
.foot-credit{ border-top:1px solid var(--border); margin-top:28px; padding-top:22px; text-align:center; font-size:12.5px; color:var(--muted); }
.foot-credit a{ color:var(--rose); font-weight:600; }

@media (max-width:920px){
	.nav .links{ display:none; }
	.menu-btn{ display:block; }
	.nav.open .links{ display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--border); padding:8px 24px 16px; }
	.nav.open .links a{ padding:13px 0; border-bottom:1px solid var(--border); }
	.hero .grid{ grid-template-columns:1fr; gap:40px; text-align:center; padding:54px 0 70px; }
	.hero p{ margin-left:auto; margin-right:auto; }
	.hero .actions,.hero .stats{ justify-content:center; }
	.hero-art{ max-width:420px; margin:0 auto; }
	.exp .grid{ grid-template-columns:1fr; gap:36px; }
	.exp .art{ max-width:440px; margin:0 auto; }
	.feat{ grid-template-columns:repeat(2,1fr); }
	.grid3{ grid-template-columns:repeat(2,1fr); }
	.team-grid{ grid-template-columns:repeat(2,1fr); }
	.quotes{ grid-template-columns:1fr; }
	.visit-top{ grid-template-columns:1fr; }
	.cta-band .scrim{ background:linear-gradient(180deg, rgba(26,13,40,.55), rgba(26,13,40,.8)); }
	.cta-band .in{ max-width:none; text-align:center; }
	section{ padding:66px 0; }
}
@media (max-width:560px){
	.feat,.grid3,.team-grid{ grid-template-columns:1fr; }
	.hero .stats{ gap:28px; }
}

/* ── Highlights carousel ───────────────────────────────────────────────────
   Four short cards. On a wide screen they all fit and the rail behaves like a
   plain grid; below that it becomes a swipeable, snapping track. The arrows and
   dots only appear when there is actually something to scroll to (see
   landing.js), so a desktop visitor never sees dead controls. */
.rail-wrap{ position:relative; }
.rail-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.rail-head .sec-head{ margin:0; }
.rail-nav{ display:none; gap:8px; flex:none; }
.rail-wrap[data-scrollable="1"] .rail-nav{ display:flex; }
.rail-btn{ width:42px; height:42px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--ink);
	display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.18s; flex:none; }
.rail-btn svg{ width:18px; height:18px; }
.rail-btn:hover:not(:disabled){ border-color:var(--rose); color:var(--rose); transform:translateY(-1px); }
.rail-btn:disabled{ opacity:.32; cursor:default; }
/* --per is how many cards fit in view; the card width follows from it, so a
   page-scroll is always exactly one screenful. `grid-template-columns:none`
   resets .feat's explicit 4-column track — without it the first four cards land
   in fixed columns and only the rest auto-flow. */
.rail{ --per:1; --rail-gap:18px;
	display:grid; grid-template-columns:none; grid-auto-flow:column;
	grid-auto-columns:calc((100% - (var(--per) - 1) * var(--rail-gap)) / var(--per));
	gap:var(--rail-gap);
	overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
	padding-bottom:6px; margin-bottom:-6px; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; }
@media (min-width:640px){ .rail{ --per:2; } }
@media (min-width:1024px){ .rail{ --per:4; } }
.rail-dots{ display:none; justify-content:center; gap:7px; margin-top:22px; }
.rail-wrap[data-scrollable="1"] .rail-dots{ display:flex; }
.rail-dot{ width:7px; height:7px; border-radius:999px; border:0; padding:0; background:#e2d8e4; cursor:pointer; transition:.18s; }
.rail-dot[aria-current="true"]{ background:var(--rose); width:22px; }

/* Richer highlight cards — the old ones were a thin border and a lot of air. */
.feat .c{ position:relative; overflow:hidden; background:linear-gradient(180deg,#fff,#fdfafc); }
.feat .c::after{ content:""; position:absolute; inset:auto -40% -60% auto; width:180px; height:180px; border-radius:50%;
	background:radial-gradient(circle,rgba(240,114,160,.16),transparent 68%); pointer-events:none; }
.feat .ic{ box-shadow:0 8px 18px -10px rgba(205,47,106,.55); }
.feat .c h3{ letter-spacing:-.01em; }

/* ── Services teaser on the landing page ──────────────────────────────────
   The full menu is its own page now; this is the doorway to it. */
.cat-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cat-tile{ display:flex; flex-direction:column; justify-content:space-between; gap:14px; min-height:132px;
	border:1px solid var(--border); border-radius:18px; padding:20px; background:#fff; transition:.18s; }
.cat-tile:hover{ border-color:rgba(205,47,106,.35); transform:translateY(-3px); box-shadow:0 24px 46px -32px rgba(20,12,40,.45); }
.cat-tile .n{ font-weight:600; font-size:16px; line-height:1.3; }
.cat-tile .k{ font-size:13px; color:var(--muted); }
.cat-tile .k b{ color:var(--rose); font-weight:600; }
.menu-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:44px; }
@media (max-width:920px){ .cat-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cat-tiles{ grid-template-columns:1fr; } }

/* ── Services page ────────────────────────────────────────────────────────── */
.page-head{ background:linear-gradient(180deg,var(--cream),#fff); padding:132px 0 56px; text-align:center; }
.page-head .lead{ margin-left:auto; margin-right:auto; }
.crumbs{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.crumbs a:hover{ color:var(--rose); }
.menu-sticky{ position:sticky; top:64px; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
	border-bottom:1px solid var(--border); padding:14px 0; margin-bottom:34px; }
.menu-sticky .menu-tools{ margin:0; }