/* =====================================================================
   Bloor West Medspa — design system
   Brand tokens live in :root. When the final logo arrives, only the
   --brand-* values need to change.
   ===================================================================== */
:root {
  --brand-900: #3A2A2E;      /* deep plum — headings, footer */
  --brand-700: #6E4452;
  --brand-500: #A35D6D;      /* dusty rose (from logo, deepened for contrast) */
  --brand-400: #C58C97;      /* logo rose */
  --brand-200: #EFD5DA;
  --brand-100: #F8EAED;
  --brand-50:  #FDF8F8;      /* blush ivory page background */
  --ink: #2B1F23;            /* body text — 15:1 on the page background */
  --ink-soft: #54414A;       /* secondary text — 9:1 (was 5.4:1, looked faded) */
  --rose-text: #8C4556;      /* small rose text: labels, links — 6.4:1 */
  --book: #B0506B;           /* booking buttons: the brighter rose that should catch the eye — 5.0:1 with white text */
  --book-deep: #96405A;      /* … pressed / under the mouse — 6.6:1 */
  --line: #EADADF;           /* dividers inside cards */
  --card-border: #DCC4CB;    /* card outline — clearly visible on white and blush */
  --field-border: #A98590;   /* form fields — 3.3:1, meets WCAG non-text contrast */
  --tint: #F5EAED;           /* tinted section background so white cards stand out */
  --white: #FFFFFF;
  --ok: #2F7D5B;
  --err: #A43C3C;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 50px rgba(58, 42, 46, .08);
  --shadow-sm: 0 6px 20px rgba(58, 42, 46, .06);
  --shadow-card: 0 1px 2px rgba(58, 42, 46, .06), 0 10px 28px rgba(58, 42, 46, .08);
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   /* no grey/brown flash on iPhone taps */
[hidden] { display: none !important; }   /* beats `img { display:block }` — missing photos never show alt text */
body { margin: 0; font-family: var(--sans); font-size: 18px; line-height: 1.7; color: var(--ink); background: var(--brand-50); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rose-text); text-decoration: none; }
a:hover { color: var(--brand-900); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.1; color: var(--brand-900); margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(42px, 6vw, 74px); font-weight: 500; }
h2 { font-size: clamp(34px, 4.2vw, 52px); font-weight: 500; }
h3 { font-size: clamp(24px, 2.4vw, 29px); }
@media (max-width: 640px) { body { font-size: 17px; } }
p { margin: 0 0 1em; }
em.accent, .accent { font-style: italic; color: var(--brand-500); font-weight: 500; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-text); margin-bottom: 14px; }
.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.65; color: var(--ink-soft); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section.alt { background: var(--tint); }
.section.white { background: #fff; }
.section.dark { background: var(--brand-900); color: #F5E8EB; }
.section.dark h2, .section.dark h3 { color: #FFF; }
.center { text-align: center; }
.sec-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: .01em; text-transform: none; border: 1.5px solid transparent; cursor: pointer; transition: all .25s ease; text-decoration: none; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary { background: var(--brand-900); color: #fff; }
.btn-primary:hover { background: var(--brand-500); color: #fff; transform: translateY(-2px); }
.btn-accent { background: var(--brand-500); color: #fff; }
.btn-accent:hover { background: var(--brand-700); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--brand-900); border-color: var(--brand-900); }
.btn-ghost:hover { background: var(--brand-900); color: #fff; }
.btn-light { background: #fff; color: var(--brand-900); }
.btn-light:hover { background: var(--brand-200); color: var(--brand-900); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--rose-text); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- announcement + header ---------- */
.topbar { background: var(--brand-900); color: #F1E1E5; font-size: 14px; letter-spacing: .01em; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; }
.topbar a { color: #fff; }
.topbar .tb-left { display: flex; gap: 20px; align-items: center; }
.topbar .tb-left span { display: inline-flex; gap: 6px; align-items: center; }
.topbar svg { width: 14px; height: 14px; opacity: .8; }
.lang { display: inline-flex; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; overflow: hidden; }
.lang a { padding: 3px 11px; font-size: 13px; font-weight: 700; color: #F1E1E5; }
.lang a.on { background: #fff; color: var(--brand-900); }
@media (max-width: 760px) { .topbar .tb-hide { display: none !important; } }

.header { position: sticky; top: 0; z-index: 50; background: rgba(253, 248, 248, .92); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }
.logo { display: inline-flex; flex-direction: column; line-height: 1; color: var(--brand-900); }
.logo:hover { color: var(--brand-900); }
.logo { flex-direction: row !important; align-items: center; gap: 12px; }
.logo img { height: 58px; width: auto; }
.logo .lt { display: flex; flex-direction: column; }
.logo .lw { font-family: var(--serif); font-size: 27px; font-weight: 500; letter-spacing: .02em; }
.logo .lw em { font-style: italic; color: var(--brand-500); }
.logo .ls { font-size: 10.5px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }
.nav { display: flex; gap: 30px; align-items: center; }
.nav { gap: 26px; }
.nav > a { color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: 0; position: relative; padding: 6px 0; }
.nav > a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--brand-500); transition: width .25s; }
.nav > a:hover::after, .nav > a.on::after { width: 100%; }
.nav > a.on { color: var(--rose-text); font-weight: 600; }
.header-cta { display: flex; gap: 10px; align-items: center; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; cursor: pointer; color: var(--brand-900); }
.menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 1100px) {
  /* phones & tablets: the menu is a drawer from the left edge (opening, closing and the blurred page: "side drawer" further down) */
  .nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: min(84vw, 400px); padding: 0 20px calc(26px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); background: var(--brand-50); border-right: 1px solid var(--line); box-shadow: 18px 0 50px rgba(43, 31, 35, .18); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; transform: translate3d(calc(-100% - 72px), 0, 0); visibility: hidden; }   /* closed: parked off screen, shadow included */
  .nav > a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .nav > a::after { display: none; }
  .menu-btn { display: inline-flex; }
  .header .btn { padding: 12px 20px; font-size: 15px; }
}
@media (max-width: 760px) { .header .header-cta > .btn { display: none; } .header .container { min-height: 72px; } .logo img { height: 50px; } }
@media (max-width: 420px) { .logo .lw { font-size: 22px; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px); background:
  radial-gradient(1200px 600px at 85% -10%, rgba(197,140,151,.30), transparent 60%),
  radial-gradient(800px 500px at -10% 110%, rgba(239,213,218,.85), transparent 60%), var(--brand-50); }
.hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .lead { max-width: 560px; margin-bottom: 32px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.hero-trust span { display: inline-flex; gap: 8px; align-items: center; }
.hero-trust svg { width: 18px; height: 18px; color: var(--brand-500); }
.hero-visual { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); background: linear-gradient(160deg, var(--brand-200), var(--brand-400)); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); }
.hero-visual .art svg { width: 58%; height: auto; }
.hero-visual .art img.mark { width: 62%; height: auto; filter: drop-shadow(0 20px 40px rgba(58,42,46,.18)); }
.hero-visual.logo-art { background: radial-gradient(circle at 50% 40%, #fff 0%, var(--brand-100) 55%, var(--brand-200) 100%); }
.hero-badge { position: absolute; left: -18px; bottom: 36px; background: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; max-width: 260px; }
.hero-badge b { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--brand-900); display: block; line-height: 1.1; }
.hero-badge small { color: var(--ink-soft); font-size: 14px; line-height: 1.35; display: block; }
.hero-badge .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-100); color: var(--brand-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-badge .ic svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { max-width: 420px; margin: 0 auto; width: 100%; }
  .hero-badge { left: 8px; }
}

/* ---------- page hero ---------- */
.page-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); background: radial-gradient(900px 400px at 90% 0, rgba(197,140,151,.25), transparent 60%), var(--brand-100); }
.page-hero .crumbs { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 18px; }
.page-hero .crumbs a { color: var(--ink-soft); }
.page-hero .crumbs span { margin: 0 8px; opacity: .6; }
.page-hero h1 { max-width: 900px; }
.page-hero .lead { max-width: 700px; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 22px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1020px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g3, .g4, .g2 { grid-template-columns: 1fr; } }

.t-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); padding: 30px 28px 26px; box-shadow: var(--shadow-card); transition: transform .3s, box-shadow .3s, border-color .3s; color: var(--ink); height: 100%; }
.t-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--brand-400); color: var(--ink); }
.t-card .ic { width: 58px; height: 58px; border-radius: 50%; background: var(--brand-100); color: var(--brand-500); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.t-card .ic svg { width: 30px; height: 30px; }
.t-card .ph { margin: -30px -28px 22px; aspect-ratio: 16 / 10; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: var(--brand-100); }
.t-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.t-card h3 { margin-bottom: 8px; }
.t-card p { color: var(--ink-soft); font-size: 17px; line-height: 1.6; flex: 1; }
.t-card .cat { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-text); font-weight: 700; margin-bottom: 8px; }
.t-card .link-arrow { margin-top: 12px; }
.t-card .stretched::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }

.feature { display: flex; gap: 18px; align-items: flex-start; }
.feature .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-100); color: var(--brand-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature .ic svg { width: 26px; height: 26px; }
.feature h3 { font-size: 23px; margin-bottom: 6px; }
.feature p { color: var(--ink-soft); font-size: 17px; margin: 0; }
.section.dark .feature .ic { background: rgba(255,255,255,.08); color: var(--brand-200); }
.section.dark .feature p { color: #EADCE0; }
.section.dark .lead, .section.dark p { color: #EADCE0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.portrait { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--brand-200), var(--brand-400)); box-shadow: var(--shadow); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); }
.portrait .art svg { width: 46%; }
.creds { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.creds span { background: var(--brand-100); color: var(--brand-700); border-radius: 999px; padding: 7px 15px; font-size: 14.5px; font-weight: 600; }

.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-card); }
.step::before { counter-increment: s; content: "0" counter(s); font-family: var(--serif); font-size: 44px; font-weight: 600; color: var(--brand-500); display: block; line-height: 1; margin-bottom: 14px; }
.step h3 { font-size: 22px; margin-bottom: 6px; }
.step p { color: var(--ink-soft); font-size: 16.5px; margin: 0; }

.brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; }
.brands span { font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.2vw, 27px); color: var(--brand-700); white-space: nowrap; }

.quote { max-width: 820px; margin: 0 auto; text-align: center; }
.quote blockquote { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); line-height: 1.35; font-style: italic; color: var(--brand-900); margin: 0 0 20px; }
.quote cite { font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); }
.stars { display: flex; justify-content: center; gap: 4px; color: var(--brand-500); margin-bottom: 18px; }
.stars svg { width: 18px; height: 18px; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2vw, 25px); line-height: 1.25; color: var(--brand-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 26px; font-weight: 300; color: var(--brand-500); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--ink-soft); font-size: 17px; padding: 0 0 22px; margin: 0; }

/* ---------- treatment detail ---------- */
.td-layout { display: grid; grid-template-columns: 1fr 360px; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 960px) { .td-layout { grid-template-columns: 1fr; } }
.td-aside { position: sticky; top: 100px; background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-card); }
.td-aside h3 { font-size: 24px; }
.facts { list-style: none; padding: 0; margin: 0 0 22px; }
.facts li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.facts li span:first-child { color: var(--ink-soft); }
.facts li span:last-child { text-align: right; font-weight: 600; color: var(--ink); }
.td-aside .btn { width: 100%; margin-bottom: 10px; }
.ideal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; list-style: none; padding: 0; margin: 0 0 28px; }
@media (max-width: 560px) { .ideal { grid-template-columns: 1fr; } }
.ideal li { display: flex; gap: 10px; align-items: flex-start; }
.ideal li svg { width: 20px; height: 20px; color: var(--brand-500); flex-shrink: 0; margin-top: 4px; }
.td-hero-visual { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8; background: linear-gradient(135deg, var(--brand-200), var(--brand-400)); margin-bottom: 36px; position: relative; }
.td-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.td-hero-visual .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8); }
.td-hero-visual .art svg { width: 22%; min-width: 90px; }
.price-note { font-size: 14.5px; color: var(--ink-soft); background: var(--brand-50); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.disclaimer { font-size: 14.5px; color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: 36px; padding-top: 18px; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } }
.form label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 17px; padding: 14px 16px; border: 1.5px solid var(--field-border); border-radius: 12px; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 4px rgba(163,93,109,.2); }
.form input::placeholder, .form textarea::placeholder { color: #8A747C; }
.form .req { color: var(--rose-text); }
.form textarea { min-height: 130px; resize: vertical; }
.form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); font-weight: 400; letter-spacing: 0; }
.form .check input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--brand-500); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { display: none; border-radius: 12px; padding: 14px 16px; font-size: 15px; }
.form-msg.ok { display: block; background: #EAF5EF; color: var(--ok); }
.form-msg.err { display: block; background: #F8ECEC; color: var(--err); }

.card-box { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-card); }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.info-list li { display: flex; gap: 14px; }
.info-list .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-100); color: var(--brand-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-list .ic svg { width: 20px; height: 20px; }
.info-list b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); font-weight: 700; }
.hours { width: 100%; border-collapse: collapse; font-size: 16px; }
.hours td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; color: var(--ink); font-weight: 600; }
.hours tr.today td { color: var(--rose-text); font-weight: 700; }
.map { border: 0; width: 100%; height: 100%; min-height: 360px; border-radius: var(--radius); filter: grayscale(.25) sepia(.12); }

/* ---------- CTA band + newsletter ---------- */
.cta-band { background: linear-gradient(120deg, var(--brand-900), var(--brand-700)); color: #F5E8EB; border-radius: 28px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: #F1E3E6; margin: 0; font-size: 18px; }
.cta-band .btn-row { justify-content: flex-end; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } .cta-band .btn-row { justify-content: flex-start; } }
.news { display: flex; gap: 10px; max-width: 480px; }
.news input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; }
.news input::placeholder { color: #D9C6CB; }
.news-msg { font-size: 14px; margin-top: 10px; min-height: 1.4em; }
@media (max-width: 480px) { .news { flex-direction: column; } }

/* ---------- blog ---------- */
.post-card { background: #fff; border: 1px solid var(--card-border); box-shadow: var(--shadow-card); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; color: var(--ink); }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); color: var(--ink); }
.post-card .ph { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--brand-200), var(--brand-400)) center / cover; }
.post-card .bd { padding: 22px 24px 26px; }
.post-card .meta { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); margin-bottom: 8px; }
.post-card h3 { font-size: 24px; }
.post-card p { color: var(--ink-soft); font-size: 16.5px; margin: 0; }
.prose { max-width: 760px; margin: 0 auto; font-size: 18px; }
.prose h2 { font-size: clamp(28px, 3vw, 36px); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose img { border-radius: 14px; margin: 1.2em 0; }
.prose blockquote { border-left: 3px solid var(--brand-400); margin: 1.4em 0; padding: 4px 0 4px 22px; font-family: var(--serif); font-size: 24px; font-style: italic; color: var(--brand-700); }
.prose .info-box { background: var(--brand-100); border-radius: 14px; padding: 18px 22px; margin: 1.4em 0; }
.prose .highlight { color: var(--brand-500); font-style: italic; }

/* ---------- footer ---------- */
.footer { background: var(--brand-900); color: #EADCE0; padding: clamp(56px, 7vw, 88px) 0 110px; font-size: 16px; }
.footer .grid4 { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
@media (max-width: 900px) { .footer .grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer .grid4 { grid-template-columns: 1fr; } }
.footer h4 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-200); margin-bottom: 18px; }
.footer a { color: #F5E8EB; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer .logo { color: #fff; margin-bottom: 18px; }
.footer .logo .ls { color: #D9C6CB; }
.footer .hours td { border-color: rgba(255,255,255,.12); }
.footer .hours td:last-child { color: #fff; }
.footer .hours tr.today td { color: #E9B9C3; }
.footer .social { display: flex; gap: 10px; margin-top: 18px; }
.footer .social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; }
.footer .social svg { width: 18px; height: 18px; }
.footer .legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 48px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; color: #D9C6CB; }

/* ---------- floating contact dock ---------- */
.dock { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }   /* the box around the closed menu is empty space: taps go through to the page */
.dock-toggle { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-900); color: #fff; border: 0; box-shadow: 0 12px 30px rgba(58,42,46,.35); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .25s, background .25s; pointer-events: auto; }
.dock-toggle:hover { background: var(--brand-500); transform: scale(1.05); }
.dock-toggle svg { width: 26px; height: 26px; }
.dock-toggle .x { display: none; }
.dock.open .dock-toggle .o { display: none; }
.dock.open .dock-toggle .x { display: block; }
.dock-items { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; transition: all .25s; }
.dock.open .dock-items { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.dock-item { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 8px 8px 18px; box-shadow: var(--shadow); font-size: 15.5px; font-weight: 600; border: 0; cursor: pointer; font-family: var(--sans); }
.dock-item:hover { color: var(--brand-500); }
.dock-item .ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--brand-500); }
.dock-item .ic svg { width: 20px; height: 20px; }
.dock-item.wa .ic { background: var(--brand-900); }
.dock-item.ai .ic { background: var(--brand-900); }
.dock-hint { position: absolute; right: 72px; bottom: 12px; background: #fff; color: var(--ink); border-radius: 14px; padding: 10px 14px; font-size: 15px; box-shadow: var(--shadow); white-space: nowrap; animation: hintIn .4s ease; }
.dock.open .dock-hint { display: none; }
@keyframes hintIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .dock-hint { display: none; } }

/* mobile sticky booking bar */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 88px 10px 12px; background: rgba(253,248,248,.96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
  .mbar .btn { padding: 13px 10px; font-size: 15px; white-space: nowrap; }
  .dock-item.call { display: none; }   /* phones: Call is already in the bar at the bottom (home: beside the first buttons) */
  .dock { bottom: 10px; right: 12px; }
  .dock-toggle { width: 56px; height: 56px; }
}
@media (max-width: 380px) {   /* small phones: keep "Book now" on one line */
  .mbar { padding-right: 78px; }
  .mbar .btn { padding: 12px 6px; gap: 6px; font-size: 14.5px; }
  .mbar .btn svg { width: 16px; height: 16px; }
}

/* ---------- AI chat panel ---------- */
.chat { position: fixed; right: 18px; bottom: 90px; z-index: 90; width: min(400px, calc(100vw - 24px)); height: min(620px, calc(100vh - 120px)); background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(58,42,46,.28); display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.chat.open { display: flex; }
.chat-head { background: var(--brand-900); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.chat-head .av { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-head .av svg { width: 22px; height: 22px; }
.chat-head b { font-family: var(--serif); font-size: 20px; font-weight: 500; display: block; line-height: 1.1; }
.chat-head small { font-size: 13px; color: #EADCE0; }
.chat-head button { margin-left: auto; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 6px; border-radius: 8px; }
.chat-head button svg { width: 20px; height: 20px; }
.chat-body { flex: 1; overflow-y: auto; padding: 18px; background: var(--brand-50); display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 16px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; color: var(--ink); }
.msg.me { background: var(--brand-900); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg a { color: var(--brand-500); text-decoration: underline; }
.msg.typing { color: var(--ink-soft); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { background: #fff; border: 1px solid var(--brand-200); color: var(--brand-700); border-radius: 999px; padding: 8px 13px; font-size: 14.5px; font-weight: 500; cursor: pointer; font-family: var(--sans); }
.chips button:hover { background: var(--brand-100); }
.chat-foot { border-top: 1px solid var(--line); padding: 10px; display: flex; gap: 8px; background: #fff; }
.chat-foot textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; font: inherit; font-size: 16px; max-height: 110px; min-height: 46px; }
.chat-foot textarea:focus { outline: none; border-color: var(--brand-400); }
.chat-foot button { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--brand-500); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-foot button:disabled { opacity: .5; cursor: default; }
.chat-foot button svg { width: 20px; height: 20px; }
.chat-note { font-size: 12.5px; color: var(--ink-soft); text-align: center; padding: 0 12px 10px; background: #fff; }
@media (max-width: 560px) { .chat { right: 0; left: 0; bottom: 0; width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; } }

/* reveal on scroll */
/* scroll reveal: everything is visible by default (fast first paint, good Google PageSpeed / LCP);
   only sections that start below the fold fade in as you scroll (site.js adds .rv-wait to those) */
.rv.rv-wait { opacity: 0; transform: translateY(22px); }
.rv.rv-wait.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion: reduce) { .rv.rv-wait { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }


/* =====================================================================
   v2 components (2026-09): photo-ready treatment cards, local-business
   hero, contact cards, visit section, reviews
   ===================================================================== */
.btn-lg { padding: 17px 30px; font-size: 17px; }
.btn-book { background: var(--book); color: #fff; box-shadow: 0 12px 26px -12px rgba(176, 80, 107, .8); }
.btn-book:active { background: var(--book-deep); color: #fff; }
/* WhatsApp: a dark plum button beside the pink booking one (Sophie wants visitors to book on their own first; no bright
   green, no see-through outline); on the plum cards (FAQ help, "Talk it through with Sophie") a lighter plum, still filled */
.btn-wa { background: var(--brand-900); color: #fff; border-color: var(--brand-900); }
.btn-wa:active { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.side-cta .btn-wa, .faq-help .btn-wa { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }
.side-cta .btn-wa:active, .faq-help .btn-wa:active { background: rgba(255, 255, 255, .24); color: #fff; }
/* hover fills only with a mouse: on a phone a finger scrolling over a button counts as hovering and would stick */
@media (hover: hover) and (pointer: fine) {
  .btn-book:hover { background: var(--book-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(150, 64, 90, .85); }
  .btn-wa:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; transform: translateY(-2px); }
  .side-cta .btn-wa:hover, .faq-help .btn-wa:hover { background: rgba(255, 255, 255, .24); color: #fff; }
}

/* treatment cards with a photo area (icon artwork until a photo is added) */
.t-card--photo { padding: 0; overflow: hidden; }
.t-card--photo .ph { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 15%, #fff 0%, var(--brand-100) 45%, var(--brand-200) 100%); }
.t-card--photo .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.t-card--photo:hover .ph img { transform: scale(1.04); }
.t-card--photo .ph .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-500); }
.t-card--photo .ph .art svg { width: 76px; height: 76px; }
.t-card--photo .bd { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.t-card--photo h3 { font-size: clamp(24px, 2.2vw, 28px); }

/* ---------- home hero (local business, practitioner photo) ---------- */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .hero-copy h1 { margin-bottom: 20px; }
.hero .hero-copy .lead { max-width: 580px; margin-bottom: 30px; color: var(--ink); }
.hero-call { margin: 18px 0 0; font-size: 16px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.hero-call a { font-weight: 700; color: var(--ink); border-bottom: 1.5px solid var(--brand-400); }
.hero-call .open { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ok); }
.hero-call .open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hero-call .open.closed { color: var(--rose-text); }
.hero-points { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 10px; justify-content: start; }
.hero-points li { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--card-border); border-radius: 999px; padding: 9px 15px 9px 11px; font-size: 15px; font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(58,42,46,.05); }
.hero-points svg { width: 20px; height: 20px; color: var(--brand-500); flex-shrink: 0; }
.hero-media { position: relative; }
.hero-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(58,42,46,.18);
  background: radial-gradient(circle at 50% 38%, #fff 0%, var(--brand-100) 55%, var(--brand-200) 100%); border: 6px solid #fff; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero-photo .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hero-photo .art img.mark { width: 60%; height: auto; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(58,42,46,.16)); }
.hero-card { position: absolute; left: -22px; bottom: 34px; background: #fff; border-radius: 18px; padding: 14px 20px 14px 14px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center; border: 1px solid var(--card-border); }
.hero-card .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-900); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero-card .ic svg { width: 22px; height: 22px; }
.hero-card b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--brand-900); }
.hero-card small { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.hero-tag { position: absolute; right: -10px; top: 42px; background: var(--brand-900); color: #fff; border-radius: 999px; padding: 10px 16px; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow); display: inline-flex; gap: 8px; align-items: center; }
.hero-tag svg { width: 18px; height: 18px; color: var(--brand-200); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 430px; width: 100%; margin: 8px auto 0; }
  .hero-card { left: 10px; bottom: 18px; }
  .hero-tag { right: 6px; top: 22px; }
  .hero-points { grid-template-columns: 1fr; }
  .hero-points li { justify-self: start; }
}
@media (max-width: 480px) { .hero .btn-row .btn { width: 100%; } }

/* quick facts strip under the hero */
.facts-strip { background: var(--brand-900); color: #fff; }
.facts-strip .container { display: grid; grid-template-columns: repeat(4, auto); gap: 0; }   /* each item as wide as its words need, the rest shared: "Closed now · opens Tue 10:30 AM" stays on one line */
.facts-strip .fs { display: flex; gap: 12px; align-items: center; padding: 22px 18px; border-left: 1px solid rgba(255,255,255,.14); }
.facts-strip .fs:first-child { border-left: 0; }
@media (min-width: 901px) { .facts-strip .fs { padding: 32px 20px; } }   /* one row on computers: a little more height so the band doesn't look thin */
.facts-strip svg { width: 26px; height: 26px; color: var(--brand-200); flex-shrink: 0; }
.facts-strip b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.facts-strip span { display: block; font-size: 14.5px; color: #EADCE0; line-height: 1.35; }
.facts-strip a { color: #fff; }
@media (max-width: 900px) { .facts-strip .container { grid-template-columns: 1fr 1fr; } .facts-strip .fs:nth-child(3) { border-left: 0; } .facts-strip .fs { border-top: 1px solid rgba(255,255,255,.1); } }
@media (max-width: 480px) { .facts-strip .fs { padding: 16px 10px; gap: 10px; } .facts-strip b { font-size: 15px; } .facts-strip span { font-size: 13.5px; } }

/* meet the practitioner */
.meet .portrait { border: 6px solid #fff; box-shadow: 0 24px 60px rgba(58,42,46,.14); }
.meet .portrait .art img.mark { width: 55%; height: auto; object-fit: contain; }
.signature { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 28px); color: var(--brand-700); border-left: 3px solid var(--brand-400); padding: 2px 0 2px 18px; margin: 22px 0 26px; line-height: 1.35; }

/* feature grid on dark */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 26px 22px; }
.why-card .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.1); color: var(--brand-200); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.why-card .ic svg { width: 26px; height: 26px; }
.why-card h3 { color: #fff; font-size: 25px; margin-bottom: 8px; }
.why-card p { color: #EADCE0; font-size: 16.5px; margin: 0; }
@media (max-width: 1020px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* reviews */
.review-card { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--card-border); border-radius: 26px; padding: clamp(28px, 5vw, 56px); box-shadow: var(--shadow-card); text-align: center; position: relative; }
.review-card::before { content: "\201C"; position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; background: var(--brand-900); color: #fff; font-family: var(--serif); font-size: 64px; line-height: 88px; }
.review-card blockquote { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); font-weight: 500; font-style: italic; line-height: 1.35; color: var(--brand-900); margin: 10px 0 18px; }
.review-card cite { font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rose-text); }
.review-card .btn-row { justify-content: center; margin-top: 26px; }

/* visit / location */
.visit { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: stretch; }
.visit .map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--card-border); box-shadow: var(--shadow-card); min-height: 420px; background: var(--brand-100); }
.visit .map-wrap iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
.visit .card-box h3 { font-size: 28px; margin-bottom: 14px; }
.visit .addr { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.visit .transit { color: var(--ink-soft); font-size: 16px; margin: 0 0 18px; }
.visit .btn-row { margin-top: 22px; }
.visit .btn-row .btn { flex: 1 1 auto; }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; } .visit .map-wrap, .visit .map-wrap iframe { min-height: 300px; } }

/* contact method cards */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.c-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-card); color: var(--ink); transition: transform .2s, border-color .2s, box-shadow .2s; min-width: 0; }
a.c-card:hover { transform: translateY(-2px); border-color: var(--brand-400); box-shadow: 0 1px 2px rgba(58,42,46,.06), 0 6px 14px -6px rgba(58,42,46,.22); color: var(--ink); }
.c-card .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-100); color: var(--rose-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.c-card .ic svg { width: 22px; height: 22px; }
.c-card b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); margin-bottom: 2px; }
.c-card span.v { display: block; font-size: 17px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; line-height: 1.35; }
.c-card small { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 480px) { .contact-cards { grid-template-columns: 1fr; } }
.form-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.form-head .ic { width: 50px; height: 50px; border-radius: 14px; background: var(--brand-900); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.form-head .ic svg { width: 24px; height: 24px; }
.form-head h2 { margin: 0; font-size: clamp(30px, 3vw, 38px); }
.form-intro { color: var(--ink-soft); margin: 0 0 22px; font-size: 16.5px; }

/* treatment detail photo */
.td-hero-visual { border: 1px solid var(--card-border); box-shadow: var(--shadow-card); background: radial-gradient(120% 90% at 30% 15%, #fff 0%, var(--brand-100) 45%, var(--brand-200) 100%); }
.td-hero-visual .art { color: var(--brand-500); }

/* ---------- mobile menu: contact / address / social panel ---------- */
.nav-extra { display: none; }
@media (max-width: 1100px) {
  .nav-extra .nx-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .nav-extra .btn { width: 100%; padding: 14px 12px; font-size: 16px; }
  /* Visit us / Hours: icon tile on the left, label and a one-line value beside it */
  .nav-extra .nx-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 11px; row-gap: 1px; background: #fff; border: 1px solid var(--card-border); border-radius: 14px; padding: 11px 12px; color: var(--ink); }
  .nav-extra summary.nx-row { grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 10px; }   /* Hours: room for the arrow */
  .nav-extra .nx-ic { grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-100); color: var(--rose-text); display: flex; align-items: center; justify-content: center; }
  .nav-extra .nx-ic svg { width: 18px; height: 18px; }
  .nav-extra .nx-row b { grid-column: 2; display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); line-height: 1.3; }
  .nav-extra .nx-v { grid-column: 2; display: block; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.35; text-wrap: balance; }   /* very small phones: two even lines */
  .nav-extra .nx-row .nx-chev { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
  .nav-extra .nx-row .nx-chev svg { width: 18px; height: 18px; }
  .nav-extra .nx-social { display: flex; align-items: center; gap: 10px; padding-top: 4px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
  .nav-extra .nx-social span { margin-right: auto; }
  .nav .nav-extra .nx-social a { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-900); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }
  .nav-extra .nx-social svg { width: 20px; height: 20px; }
  body.menu-open { overflow: hidden; }
}
.meet .portrait, .portrait { background: radial-gradient(circle at 50% 38%, #fff 0%, var(--brand-100) 55%, var(--brand-200) 100%); }
.portrait .art img.mark { width: 55%; height: auto; object-fit: contain; filter: drop-shadow(0 16px 32px rgba(58,42,46,.14)); }

/* ---- v2 fixes after review ---- */
h1, h2, h3 { text-wrap: balance; }
.lead, .t-card p, .feature p, .why-card p, .step p { text-wrap: pretty; }
.hero-call svg { width: 18px; height: 18px; color: var(--brand-500); flex-shrink: 0; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-points li { white-space: nowrap; }
.logo .lw { white-space: nowrap; }
@media (max-width: 380px) { .logo img { height: 48px; } .logo .lw { font-size: 20px; } .logo .ls { letter-spacing: .18em; } }

/* footer hours never break mid-time */
.footer .grid4 { grid-template-columns: 1.25fr 1fr 1fr 1.35fr; }
.footer .hours { font-size: 15px; }
.footer .hours td:last-child { white-space: nowrap; padding-left: 12px; }
@media (max-width: 900px) { .footer .grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer .grid4 { grid-template-columns: 1fr; } }

/* facts strip: one clean row per item on phones */
@media (max-width: 560px) {
  .facts-strip .container { grid-template-columns: 1fr; padding: 6px var(--gutter); }
  .facts-strip .fs { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.12); padding: 14px 4px; }
  .facts-strip .fs:first-child { border-top: 0; }
  .facts-strip .fs > div { display: flex; flex-wrap: wrap; column-gap: 8px; align-items: baseline; }
}

/* treatment cards on phones: compact photo-left layout (less scrolling, still photo-ready) */
@media (max-width: 640px) {
  .grid.g3 { gap: 14px; }
  .t-card--photo { flex-direction: row; align-items: stretch; }
  .t-card--photo:hover { transform: none; }
  .t-card--photo .ph { flex: 0 0 34%; aspect-ratio: auto; min-height: 150px; }
  .t-card--photo .ph .art svg { width: 46px; height: 46px; }
  .t-card--photo .bd { padding: 16px 16px 16px 16px; min-width: 0; }
  .t-card--photo .cat { font-size: 11.5px; margin-bottom: 4px; }
  .t-card--photo h3 { font-size: 22px; margin-bottom: 4px; }
  .t-card--photo p { font-size: 15.5px; line-height: 1.5; margin-bottom: 6px; }
  .t-card--photo .link-arrow { margin-top: auto; font-size: 15px; }
}

/* newsletter on a light background (breaks up the dark blocks before the footer) */
.news-light { background: var(--tint); }
.news-light .news input { background: #fff; border: 1.5px solid var(--field-border); color: var(--ink); }
.news-light .news input::placeholder { color: #8A747C; }
.news-light .news-msg { color: var(--ink); }
.news-light small { color: var(--ink-soft) !important; }
@media (max-width: 1100px) {
  .nav .nav-extra .btn { font-weight: 600; }
  .nav .nav-extra .btn-primary, .nav .nav-extra .btn-book, .nav .nav-extra .btn-wa { color: #fff; }
  body.menu-open .mbar, body.menu-open .dock { display: none; }   /* the menu has its own call/book buttons */
}

/* page header clearly separated from the tinted content below */
.page-hero { background: radial-gradient(900px 400px at 90% 0, rgba(197,140,151,.22), transparent 60%), var(--brand-50); border-bottom: 1px solid var(--line); }
.page-hero + .section { padding-top: clamp(40px, 5vw, 72px); }
.creds span { background: #fff; border: 1px solid var(--card-border); }
.contact-cards .c-card.mail { grid-column: 1 / -1; }

.footer .logo .lw em { color: #E9B9C3; }   /* 7.9:1 on the dark footer */

/* very small phones (320–380px) */
.hero-grid > * { min-width: 0; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .hero-points li { white-space: normal; } .btn { white-space: normal; text-align: center; } }

/* =====================================================================
   Journal articles + treatment page extras (2026-09 SEO update)
   ===================================================================== */
a[href^="tel:"] { white-space: nowrap; }
.art-meta { margin: 18px 0 0; font-size: 15px; color: var(--ink-soft); }
.art-meta time { font-weight: 600; color: var(--ink); }
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.art-body { margin: 0; max-width: 760px; }
.art-body h2 { scroll-margin-top: 110px; }
.art-body ul, .art-body ol { padding-left: 1.3em; }
.art-body li { margin-bottom: .45em; }
.art-body a, .td-more a, .faq a { color: var(--rose-text); text-decoration: underline; text-decoration-color: var(--brand-400); text-underline-offset: 3px; }
.art-body a:hover, .td-more a:hover { color: var(--brand-900); }
.art-aside { position: sticky; top: 100px; }
.art-aside h3 { font-size: 22px; margin-bottom: 12px; }
.art-tlist { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.art-tlist a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--card-border); border-radius: 14px; color: var(--ink); background: #fff; transition: border-color .2s, transform .2s; }
.art-tlist a:hover { border-color: var(--brand-400); transform: translateY(-2px); color: var(--ink); }
.art-tlist .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-100); color: var(--brand-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.art-tlist .ic svg { width: 22px; height: 22px; }
.art-tlist span { font-weight: 700; font-size: 16px; line-height: 1.3; }
.art-tlist small { display: block; font-weight: 400; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.toc { background: var(--tint); border: 1px solid var(--card-border); border-radius: 16px; padding: 18px 22px; margin: 0 0 28px; font-size: 16px; }
.toc b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); margin-bottom: 8px; }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--rose-text); text-decoration: underline; }
@media (max-width: 960px) { .art-layout { grid-template-columns: minmax(0, 1fr); } .art-aside { position: static; } }

.prose .info-box, .info-box { background: var(--brand-100); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px 20px; margin: 1.2em 0; }
.info-box.safety { display: flex; gap: 14px; align-items: flex-start; background: #FFF7F4; border-color: #E8C7BE; }
.info-box.safety svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; color: var(--err); }
.ideal.one { grid-template-columns: 1fr; }
.td-more h2 { margin-top: 40px; }
ol.steps-list { list-style: none; counter-reset: st; padding: 0; margin: 0; display: grid; gap: 14px; }
ol.steps-list li { counter-increment: st; position: relative; padding: 16px 18px 16px 62px; background: var(--tint); border: 1px solid var(--card-border); border-radius: 14px; }
ol.steps-list li::before { content: counter(st); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-900); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
ul.plain { padding-left: 1.2em; }
ul.plain li { margin-bottom: .4em; }
.brand-line { font-size: 16px; color: var(--ink-soft); margin: 6px 0 0; }
.brand-line b { color: var(--ink); }
a.ext::after { content: "↗"; font-size: .8em; margin-left: 2px; opacity: .7; }
.brand-line a, .brands a { color: var(--brand-700); text-decoration: none; border-bottom: 1px solid var(--brand-200); }
.brand-line a:hover, .brands a:hover { color: var(--brand-900); border-color: var(--brand-500); }

/* journal cards (static + admin) */
.post-card { position: relative; }
.post-card .ph { position: relative; display: flex; align-items: center; justify-content: center; color: var(--brand-500);
  background: radial-gradient(120% 90% at 30% 15%, #fff 0%, var(--brand-100) 45%, var(--brand-200) 100%); }
.post-card .ph img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.post-card .ph .art svg { width: 64px; height: 64px; }
/* an article's cover image (the repo's assets/img/journal/<slug>.jpg, or the one uploaded in Admin → Website → SEO) */
.art-cover { margin: 0 0 28px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--card-border);
  background: radial-gradient(120% 90% at 30% 15%, #fff 0%, var(--brand-100) 45%, var(--brand-200) 100%); }
.art-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card .bd { display: flex; flex-direction: column; flex: 1; }
.post-card .bd p { flex: 1; margin-bottom: 14px; }
.post-card h3 { margin-bottom: 8px; }

/* homepage: browse by concern */
.concerns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px auto 0; max-width: 980px; }
.concerns a { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--card-border); border-radius: 999px; padding: 10px 16px; font-size: 15.5px; font-weight: 600; color: var(--ink); box-shadow: 0 1px 2px rgba(58,42,46,.05); transition: border-color .2s, transform .2s; }
.concerns a:hover { border-color: var(--brand-500); transform: translateY(-2px); color: var(--ink); }
.concerns a svg { width: 16px; height: 16px; color: var(--brand-500); }
.concerns-label { text-align: center; margin: 44px 0 0; font-weight: 700; color: var(--ink); }
.footer .links-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.faq-group { max-width: 900px; margin: 0 auto 48px; }
.faq-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--brand-200); padding-bottom: 8px; margin-bottom: 4px; }
.faq-group-head h2 { font-size: clamp(28px, 3vw, 36px); margin: 0; }
.faq-group { scroll-margin-top: 110px; }
.topbar .tb-left span { white-space: nowrap; }
@media (max-width: 1020px) { .topbar .tb-left > span:nth-child(2) { display: none; } }   /* tablets: phone + today's hours only */

/* ---------- Treatments dropdown (desktop mega menu · phone accordion) ---------- */
.nav-dd { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-dd-link { color: var(--ink); font-size: 16px; font-weight: 500; position: relative; padding: 6px 0; }
.nav-dd-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--brand-500); transition: width .25s; }
.nav-dd-link:hover::after, .nav-dd.on .nav-dd-link::after { width: 100%; }
.nav-dd.on .nav-dd-link { color: var(--rose-text); font-weight: 600; }
.nav-dd-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; margin-right: -10px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-soft); font: inherit; cursor: pointer; }
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { color: var(--rose-text); background: var(--brand-100); }
.nav-dd-btn:focus-visible { outline: 2px solid var(--rose-text); outline-offset: 2px; }
.nav-dd-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.nav-dd.open .nav-dd-btn svg { transform: rotate(180deg); }
.nav-dd-t { display: none; }
.nav-dd-panel { position: absolute; top: calc(100% + 6px); left: 50%; z-index: 60; width: min(820px, calc(100vw - 32px)); padding: 20px 20px 14px;
  background: #fff; border: 1px solid var(--card-border); border-radius: 20px; box-shadow: 0 28px 60px -20px rgba(58,42,46,.32), 0 2px 6px rgba(58,42,46,.06);
  opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--dd-shift, 0px)), 8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* hover bridge */
.nav-dd.open .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dd-shift, 0px)), 0); transition: opacity .18s ease, transform .18s ease; }
@media (min-width: 1101px) {
  .nav, .nav-dd { align-self: stretch; }          /* the hover area spans the full header height */
}
@media (hover: hover) and (pointer: fine) and (min-width: 1101px) {
  .nav-dd:hover .nav-dd-panel { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dd-shift, 0px)), 0); transition: opacity .18s ease, transform .18s ease; }
  .nav-dd:hover .nav-dd-btn svg { transform: rotate(180deg); }
}
.dd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1101px) {   /* desktop: each group is as wide as its longest line, so names and their lines stay on one line */
  .nav-dd-panel { width: max-content; min-width: min(760px, calc(100vw - 32px)); max-width: min(1180px, calc(100vw - 32px)); }
  .dd-cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; }
}
.dd-col { padding: 0 10px; }
.dd-col + .dd-col { border-left: 1px solid var(--line); }
.dd-h { margin: 2px 0 8px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-text); }
.dd-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--ink); transition: background .15s; }
.dd-item:hover, .dd-item:focus-visible { background: var(--brand-50); color: var(--ink); }
.dd-item.on { background: var(--tint); }
.dd-ic { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--rose-text); }
.dd-ic svg { width: 20px; height: 20px; }
.dd-tx { display: flex; flex-direction: column; min-width: 0; }
.dd-tx b { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.dd-tx small { font-size: 13.5px; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }
.dd-item:hover b, .dd-item.on b { color: var(--rose-text); }
.dd-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; padding: 14px 20px 2px; border-top: 1px solid var(--line); }
.dd-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--rose-text); }
.dd-all svg { width: 18px; height: 18px; transition: transform .2s; }
.dd-all:hover { color: var(--brand-900); }
.dd-all:hover svg { transform: translateX(3px); }
.dd-help { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.dd-help a { font-weight: 600; color: var(--rose-text); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .nav-dd-panel, .nav-dd-btn svg, .dd-all svg { transition: none; } }

@media (max-width: 1100px) {   /* inside the phone / tablet menu: an accordion */
  .nav-dd { display: block; border-bottom: 1px solid var(--line); }
  .nav-dd-link { display: none; }
  .nav-dd-btn { display: flex; width: 100%; height: auto; margin: 0; padding: 15px 0; justify-content: space-between; border-radius: 0; font-size: 18px; font-weight: 500; color: var(--ink); text-align: left; }
  .nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { background: none; color: var(--ink); }
  .nav-dd.on .nav-dd-btn { color: var(--rose-text); font-weight: 600; }
  .nav-dd-t { display: inline; }
  .nav-dd-btn svg { width: 22px; height: 22px; color: var(--rose-text); }
  .nav-dd-panel { position: static; display: none; width: auto; padding: 2px 0 16px; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-dd-panel::before { display: none; }
  .nav-dd.open .nav-dd-panel { display: flex; flex-direction: column; transform: none; }
  .dd-foot { order: -1; margin: 0 0 10px; padding: 0; border: 0; }
  .dd-all { width: 100%; justify-content: space-between; padding: 13px 16px; background: var(--brand-100); border-radius: 14px; font-size: 16.5px; }
  .dd-help { display: none; }
  .dd-cols { grid-template-columns: 1fr; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; padding: 6px; }
  .dd-col { padding: 8px 0 4px; }
  .dd-col + .dd-col { border-left: 0; border-top: 1px solid var(--line); }
  .dd-h { padding: 0 10px; margin: 2px 0 4px; }
  .dd-item { padding: 8px 10px; }
  .dd-ic { flex-basis: 36px; height: 36px; }
  .dd-tx b { font-size: 16.5px; }
  .dd-tx small { font-size: 14px; }
}
@media (min-width: 1101px) and (max-width: 1240px) {   /* small laptops: keep logo, menu and button on one line */
  .header .container { gap: 16px; }
  .nav { gap: 20px; }
  .nav > a, .nav-dd-link { font-size: 15.5px; }
  .logo img { height: 50px; }
  .logo .lw { font-size: 24px; }
  .header .header-cta .btn { padding: 12px 18px; font-size: 15px; }
}

/* contact page: booking is the featured, full-width card */
.contact-cards .c-card.book { grid-column: 1 / -1; align-items: center; background: var(--brand-900); border-color: var(--brand-900); color: #fff; padding: 20px 20px 20px 18px; }
a.c-card.book:hover { background: #45323A; border-color: #45323A; color: #fff; }
.c-card.book .ic { background: rgba(255,255,255,.12); color: #fff; }
.c-card.book > span:nth-child(2) { flex: 1 1 170px; min-width: 0; }
.c-card.book b { color: #E9B9C3; }
.c-card.book span.v { color: #fff; font-size: 19px; }
.c-card.book small { color: #E6D5DA; }
.c-card.book .go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--brand-900); border-radius: 999px; padding: 11px 18px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.c-card.book .go svg { width: 18px; height: 18px; transition: transform .2s; }
a.c-card.book:hover .go svg { transform: translateX(3px); }
.contact-cards { align-items: stretch; }
.c-card.mail span.v { font-size: clamp(15.5px, 4.2vw, 17px); }
@media (max-width: 480px) {
  .c-card.book { flex-wrap: wrap; }
  .c-card.book .go { flex-basis: 100%; justify-content: center; }
}
@media (max-width: 900px) {   /* phones & tablets: quick contact options before the form */
  .contact-split > .contact-side { order: -1; }
}

/* "Why Bloor West Medspa" cards link to their own pages */
.why-card { position: relative; display: flex; flex-direction: column; transition: border-color .2s, background .2s, transform .2s; }
.why-card:hover { border-color: rgba(233,185,195,.55); background: rgba(255,255,255,.09); transform: translateY(-2px); }
.why-card h3 a { color: #fff; }
.why-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.why-card p { flex: 1; }
.why-card p a.ext { position: relative; z-index: 2; color: #fff; border-bottom: 1px solid rgba(233,185,195,.6); }
.why-card p a.ext:hover { color: #E9B9C3; }
.why-card .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; font-size: 15.5px; color: #E9B9C3; }
.why-card .more svg { width: 18px; height: 18px; transition: transform .2s; }
.why-card:hover .more svg { transform: translateX(3px); }
.why-card h3 a:focus-visible { outline: none; }
.why-card:has(h3 a:focus-visible) { outline: 2px solid #E9B9C3; outline-offset: 3px; }
/* light version (About page) */
.why-grid.light .why-card { background: #fff; border-color: var(--card-border); box-shadow: var(--shadow-card); }
.why-grid.light .why-card:hover { border-color: var(--brand-400); }
.why-grid.light .why-card .ic { background: var(--brand-100); color: var(--rose-text); }
.why-grid.light .why-card h3, .why-grid.light .why-card h3 a { color: var(--brand-900); }
.why-grid.light .why-card p { color: var(--ink-soft); }
.why-grid.light .why-card p a.ext { color: var(--brand-700); border-bottom-color: var(--brand-200); }
.why-grid.light .why-card .more { color: var(--rose-text); }
.why-grid.light .why-card:has(h3 a:focus-visible) { outline-color: var(--rose-text); }

/* "Why" pages: sibling list in the sidebar */
.why-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.why-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 16px; }
.why-list a:hover { background: var(--brand-50); color: var(--ink); }
.why-list a[aria-current] { background: var(--tint); color: var(--rose-text); }
.why-list .ic { flex: 0 0 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--rose-text); }
.why-list .ic svg { width: 18px; height: 18px; }
.footer .why-row { margin-top: 10px; font-size: 15px; }
.footer .why-row a { color: #D9C6CB; }
.footer .why-row a:hover { color: #fff; }

/* link to the clinic's Google listing (no quoted reviews on the site — CNO guidance) */
.g-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: 15.5px; color: var(--rose-text); }
.g-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.g-link svg:last-child { transition: transform .2s; }
.g-link:hover { color: var(--brand-900); }
.g-link:hover svg:last-child { transform: translateX(3px); }
.brands-band { padding: 56px 0; }

/* ---------- trusted brands: heading + grid of brand cards (Admin → Website → Brands: the brand's logo, or its name in the
   serif type when there is none; a neutral category; a link to the official site) ---------- */
.brands-band { padding: clamp(64px, 7vw, 96px) 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.brands-wrap { display: grid; grid-template-columns: minmax(0, 310px) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.brands-head h2 { margin: 6px 0 14px; font-size: clamp(32px, 3.1vw, 42px); }
.brands-head p { color: var(--ink-soft); font-size: 17px; margin: 0 0 18px; max-width: 420px; }
.brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brand-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 112px; padding: 20px 12px 18px;
  background: var(--brand-50); border: 1px solid var(--card-border); border-radius: 16px; text-align: center; color: var(--ink);
  transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; }
a.brand-tile:hover { background: #fff; border-color: var(--brand-400); transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(58,42,46,.35); color: var(--ink); }
.bt-name { font-family: var(--serif); font-size: clamp(21px, 1.9vw, 25px); font-weight: 600; line-height: 1.1; color: var(--brand-900); white-space: nowrap; }
.bt-cat { font-size: 13.5px; line-height: 1.3; color: var(--ink-soft); }
/* a logo: whole, any shape, at most 46px tall and three quarters of the card wide (PNG with a clear background reads best) */
.brand-tile.has-logo { gap: 10px; }
.bt-logo { display: block; width: auto; height: auto; max-width: min(78%, 168px); max-height: 46px; object-fit: contain; }
.brand-tile > svg { position: absolute; top: 10px; right: 10px; width: 15px; height: 15px; color: var(--brand-400); transition: transform .2s, color .2s; }
a.brand-tile:hover > svg { color: var(--rose-text); transform: translate(2px, -2px); }
a.brand-tile:focus-visible { outline: 2px solid var(--rose-text); outline-offset: 3px; }
@media (max-width: 1100px) {
  .brands-wrap { grid-template-columns: minmax(0, 1fr); }
  .brands-head { text-align: center; }
  .brands-head p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brand-tile { min-height: 96px; padding: 16px 10px 14px; }
  .bt-logo { max-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .brand-tile, .brand-tile > svg { transition: none; } a.brand-tile:hover { transform: none; } }
.brand-grid.all { display: flex; flex-wrap: wrap; justify-content: center; }
.brand-grid.all .brand-tile { flex: 0 1 calc(25% - 9px); }
@media (max-width: 640px) { .brand-grid.all .brand-tile { flex-basis: calc(50% - 5px); } }
.brand-grid.all .brand-tile { background: #fff; box-shadow: 0 1px 2px rgba(58,42,46,.05); }

/* FAQ page: treatment chips line up with the heading and text above them */
.concerns.jump { justify-content: flex-start; margin: 26px 0 0; max-width: none; }

/* ---------- article & info-page sidebar: expert, treatments, reading list, sticky contents + booking ---------- */
.art-aside { position: static; top: auto; align-self: stretch; display: flex; flex-direction: column; gap: 18px; }
.side-card { background: #fff; border: 1px solid var(--card-border); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-card); }
.side-card h3 { font-size: 21px; margin: 0 0 14px; }
.side-card .art-tlist, .side-card .why-list { margin: 0; }
.side-sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.expert .ex-top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.expert img, .expert .ex-ph { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--card-border), 0 8px 18px -8px rgba(58,42,46,.35); }
.expert .ex-ph { display: flex; align-items: center; justify-content: center; background: var(--brand-100); color: var(--rose-text); }
.expert .ex-ph svg { width: 30px; height: 30px; }
.expert .ex-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); }
.expert b { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.15; color: var(--brand-900); margin-top: 3px; }
.expert small { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; letter-spacing: .02em; }
.expert p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
.expert .ex-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14.5px; font-weight: 600; }
.expert .ex-links a { color: var(--rose-text); display: inline-flex; align-items: center; gap: 6px; }
.expert .ex-links a:hover { color: var(--brand-900); }
.expert .ex-links svg { width: 16px; height: 16px; }
.side-toc { padding: 18px 16px 14px; }
.side-toc b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); margin: 0 0 8px 8px; }
.side-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; counter-reset: toc; }
.side-toc li { counter-increment: toc; }
.side-toc a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 14.5px; line-height: 1.35; color: var(--ink-soft); }
.side-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 12px; font-weight: 700; color: var(--brand-400); padding-top: 2px; min-width: 18px; }
.side-toc a:hover { background: var(--brand-50); color: var(--ink); }
.side-toc a.on { background: var(--tint); color: var(--brand-900); font-weight: 600; }
.side-toc a.on::before { color: var(--rose-text); }
.side-cta { background: var(--brand-900); border-color: var(--brand-900); color: #F5E8EB; }
.side-cta b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 4px; line-height: 1.2; }
.side-cta p { font-size: 15px; color: #E6D5DA; margin: 0 0 14px; line-height: 1.5; }
.side-cta .btn { width: 100%; padding: 12px 16px; font-size: 15.5px; }
.side-cta .btn + .btn { margin-top: 10px; }
.side-phone { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; color: #fff; font-weight: 600; font-size: 15px; }
.side-phone:hover { color: #E9B9C3; }
.side-phone svg { width: 16px; height: 16px; }
.side-articles ul { list-style: none; margin: 0 0 12px; padding: 0; }
.side-articles li + li { border-top: 1px solid var(--line); }
.side-articles li a { display: block; padding: 11px 0; color: var(--ink); font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.side-articles li a:hover { color: var(--rose-text); }
.sa-cat { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); margin-bottom: 3px; }
.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.share-row > span { font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.share-row a, .share-row button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-width: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--card-border); background: #fff; color: var(--brand-900); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.art-body .share-row a { text-decoration: none; color: var(--brand-900); }
.share-row a:hover, .share-row button:hover, .art-body .share-row a:hover { border-color: var(--brand-400); color: var(--rose-text); }
.share-row svg { width: 18px; height: 18px; }
@media (min-width: 961px) { .art-body > .toc { display: none; } }          /* desktop: contents live in the sidebar */
@media (min-width: 961px) and (max-height: 700px) { .side-sticky { position: static; } }
@media (max-width: 960px) {
  .side-toc { display: none; }
  .side-sticky { position: static; }
  .art-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .art-aside .side-sticky { display: contents; }
}

/* About: credentials */
.cred-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cred { background: var(--brand-50); border: 1px solid var(--card-border); border-radius: 18px; padding: 24px 22px; display: flex; flex-direction: column; }
.cred .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-100); color: var(--rose-text); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.cred .ic svg { width: 24px; height: 24px; }
.cred h3 { font-size: 22px; margin: 0 0 8px; }
.cred p { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 12px; flex: 1; }
.cred a { font-weight: 600; font-size: 15px; color: var(--rose-text); }
.cred a:hover { color: var(--brand-900); }
@media (max-width: 1020px) { .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cred-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .hero-tag { display: none; } }   /* phones: keep her face clear (location is in the eyebrow) */

/* hero photo: top lines up with the text on the left; nothing sticks out past the page edge */
.hero-tag { right: -14px; top: 34px; }   /* sticks out a little past the photo (the photo sits 20px in from the edge) */
@media (max-width: 900px) { .hero-tag { right: -8px; top: 24px; } }
@media (min-width: 901px) {
  .hero .hero-grid { align-items: start; }
  .hero-media { width: calc(100% - 20px); justify-self: start; }
}

/* top bar: optical alignment with the header below (the logo image has a little built-in space on the left,
   and the big round "Book now" button reads narrower than the small EN/FR pill) */
.topbar .container { padding-left: calc(var(--gutter) + 4px); padding-right: calc(var(--gutter) + 6px); }

/* ---------- phone / tablet menu: side drawer ----------
   The menu slides in from the left; the rest of the page (header included) is dimmed and blurred behind it.
   site.js puts "menu-open" on <body> while it is open and "menu-closing" while it slides away. */
.nav-head, .nav-scrim { display: none; }
.dd-inner { min-height: 0; }
@media (max-width: 1100px) {
  body.menu-open .nav { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  body.menu-closing .nav { transition: transform .32s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .32s; }
  /* while the drawer is on screen the header sits above everything else (contact button, chat, cookie notice) and drops
     its own frosted blur: that blur would keep the drawer inside the header and stop the page behind it from blurring */
  body.menu-open .header, body.menu-closing .header { z-index: 100; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* top of the drawer: logo + close button (stays in view while the menu scrolls) */
  .nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 3; flex: none;
    min-height: 72px; margin: 0 -20px 0 calc(-1 * max(20px, env(safe-area-inset-left, 0px)));
    padding: env(safe-area-inset-top, 0px) 14px 0 max(20px, env(safe-area-inset-left, 0px));
    background: var(--brand-50); border-bottom: 1px solid var(--line); }
  .nav-head .logo { gap: 10px; min-width: 0; }
  .nav-head .logo img { height: 44px; }
  .nav-head .logo .lw { font-size: 21px; }
  .nav-head .logo .ls { font-size: 9.5px; letter-spacing: .22em; margin-top: 5px; }
  .nav-close { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--brand-900); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .nav-close svg { width: 20px; height: 20px; }
  .nav-close:hover { border-color: var(--brand-400); }
  .nav-close:focus-visible { outline: 2px solid var(--rose-text); outline-offset: 2px; }

  /* the page behind the drawer: dimmed and blurred; a tap on it closes the menu */
  .nav-scrim { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(43, 31, 35, .24);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: 0; visibility: hidden; touch-action: none; -webkit-tap-highlight-color: transparent; }
  body.menu-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
  body.menu-closing .nav-scrim { transition: opacity .32s ease, visibility 0s linear .32s; }
  .nav.dragging, .nav-scrim.dragging { transition: none !important; }   /* following a finger that drags the menu closed */

  /* the rows drift in just behind the drawer */
  .nav > :not(.nav-head) { opacity: 0; transform: translate3d(-16px, 0, 0); }
  body.menu-open .nav > :not(.nav-head) { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s cubic-bezier(.32, .72, 0, 1); }
  body.menu-open .nav > :nth-child(2) { transition-delay: .06s; } body.menu-open .nav > :nth-child(3) { transition-delay: .09s; }
  body.menu-open .nav > :nth-child(4) { transition-delay: .12s; } body.menu-open .nav > :nth-child(5) { transition-delay: .15s; }
  body.menu-open .nav > :nth-child(6) { transition-delay: .18s; } body.menu-open .nav > :nth-child(7) { transition-delay: .21s; }
  body.menu-open .nav > :nth-child(8) { transition-delay: .24s; } body.menu-open .nav > :nth-child(9) { transition-delay: .27s; }
  body.menu-closing .nav > * { opacity: 1; transform: none; }   /* closing: everything leaves together with the drawer */
  .nav .nav-extra { display: grid; gap: 12px; padding: 20px 0 6px; }
  /* Treatments accordion: shown / hidden here; the open and close slide is animated in site.js (same in every browser, incl. iPhone Safari) */
  .nav-dd-panel { display: none; padding: 0; visibility: visible; transition: none; }
  .nav-dd.open .nav-dd-panel { display: block; }
  .nav-dd-panel.anim { overflow: hidden; }
  .dd-inner { display: flex; flex-direction: column; }
  .dd-inner > .dd-cols { margin-bottom: 16px; }
}
@media (max-width: 400px) {   /* small phones: Call and WhatsApp stay side by side */
  .nav-extra .btn { padding: 14px 8px; gap: 8px; }
}
@media (max-width: 389px) { .nav-extra .nx-v { font-size: 13.5px; } }   /* address and hours still on one line */
@media (max-width: 350px) {   /* very small phones: a slightly wider drawer, buttons stacked */
  .nav { width: 88vw; padding-left: 16px; padding-right: 16px; }
  .nav-head { margin: 0 -16px; padding-left: 16px; padding-right: 12px; }
  .nav-head .logo .lw { font-size: 19px; }
  .nav-extra .nx-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav > *, .nav-scrim, .nav-dd-panel { transition: none !important; }
}

/* Sophie under page titles (inner pages) */
.np-chip { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 6px 20px 6px 6px; background: #fff; border: 1px solid var(--card-border); border-radius: 999px; box-shadow: 0 1px 2px rgba(58,42,46,.05); color: var(--ink); transition: border-color .2s; }
.np-chip:hover { border-color: var(--brand-400); color: var(--ink); }
.np-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.np-chip small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); line-height: 1.25; }
.np-chip b { display: block; font-family: var(--serif); font-size: 18.5px; font-weight: 600; color: var(--brand-900); line-height: 1.2; }
.page-hero .art-meta + .np-chip { margin-top: 14px; }

.facts-strip span a { text-decoration: underline; text-decoration-color: rgba(233,185,195,.55); text-underline-offset: 3px; }
.facts-strip span a:hover { text-decoration-color: #fff; }
.topbar .tb-left a:hover { color: #E9B9C3; }
.topbar .tb-left a { display: inline-flex; align-items: center; gap: 6px; }   /* icon centred on the phone number / address */
.topbar .tb-left svg { display: block; flex-shrink: 0; }

/* "Browse by concern": pills on desktop; on phones a clean tap-list inside one card */
.concerns a > span { display: flex; flex-direction: column; }
.concerns a b { font-weight: inherit; }
.concerns a small, .concerns .cc-ic, .concerns .cc-go { display: none; }
@media (max-width: 640px) {
  .concerns-label { margin-top: 38px; font-size: 17px; }
  .concerns:not(.jump) { display: block; margin: 16px 0 0; max-width: none; text-align: left; background: #fff; border: 1px solid var(--card-border); border-radius: 20px; box-shadow: var(--shadow-card); overflow: hidden; }
  .concerns:not(.jump) a { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 16.5px; line-height: 1.3; }
  .concerns:not(.jump) a + a { border-top: 1px solid var(--line); }
  .concerns:not(.jump) a:hover, .concerns:not(.jump) a:active { transform: none; background: var(--brand-50); }
  .concerns:not(.jump) a > svg { display: none; }
  .concerns:not(.jump) .cc-ic { display: flex; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-100); }
  .concerns:not(.jump) .cc-ic svg { width: 22px; height: 22px; color: var(--rose-text); }
  .concerns:not(.jump) .cc-tx { flex: 1; min-width: 0; }
  .concerns:not(.jump) a b { display: block; font-weight: 600; color: var(--ink); }
  .concerns:not(.jump) a small { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 500; color: var(--rose-text); }
  .concerns:not(.jump) .cc-go { display: flex; flex-shrink: 0; }
  .concerns:not(.jump) .cc-go svg { width: 20px; height: 20px; transform: rotate(-90deg); color: var(--brand-400); }
}

/* ---------- "How it works": intro + a vertical journey with icons (no big numbers) ---------- */
.how-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.how-intro h2 { margin-bottom: 14px; }
.how-intro .lead { margin-bottom: 22px; }
.how-note { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--card-border); border-radius: 18px; padding: 14px 18px 14px 14px; margin-bottom: 24px; max-width: 460px; box-shadow: 0 1px 2px rgba(58,42,46,.05); }
.how-note img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.how-note p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.how-note b { color: var(--ink); }
.journey { list-style: none; margin: 0; padding: 0; }
.journey li { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 22px; padding-bottom: 34px; }
.journey li:last-child { padding-bottom: 0; }
.journey li::before { content: ""; position: absolute; left: 28px; top: 62px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--brand-200); }
.journey li:last-child::before { display: none; }
.j-ic { width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 1px solid var(--card-border); color: var(--rose-text); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -10px rgba(58,42,46,.3); }
.j-ic svg { width: 24px; height: 24px; }
.journey h3 { font-size: 26px; margin: 10px 0 6px; }
.journey p { margin: 0; font-size: 17px; color: var(--ink-soft); max-width: 460px; }
@media (max-width: 900px) { .how-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .journey li { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; }
  .journey li::before { left: 23px; top: 52px; }
  .j-ic { width: 48px; height: 48px; }
  .j-ic svg { width: 21px; height: 21px; }
  .journey h3 { font-size: 23px; margin-top: 6px; }
  .journey p { font-size: 16px; }
}

/* cards that used automatic "01 / 02" numbers now use icons */
.step::before { content: none; }

/* ---------- Home: the featured product (Admin → Website → Products → "Feature on the home page"), under "How it works".
   A deep plum band, lit softly from behind the photo: the photo in an arch like the clinic's mirror (the logo), a thin
   second arch around it and Sophie's chip at its foot; the name, its words, three steps and the Shop button
   (functions/_middleware.js writes the product in; none featured → no band). ---------- */
.feat-band { position: relative; overflow: hidden; isolation: isolate; background: var(--brand-900); color: #F5E8EB; }
.feat-band::before { content: ""; position: absolute; z-index: -1; left: 0; top: 50%; width: min(980px, 140vw); aspect-ratio: 1;
  transform: translate(-22%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(233, 185, 195, .24), rgba(233, 185, 195, .07) 55%, rgba(233, 185, 195, 0) 78%); }
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 104px); align-items: center; }
.feat-media { display: flex; flex-direction: column; align-items: center; }
.feat-frame { position: relative; width: min(100%, 430px); padding: 14px; }
.feat-frame::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(233, 185, 195, .5); border-radius: 999px 999px 32px 32px; pointer-events: none; transition: border-color .5s ease; }
.feat-photo { display: block; color: inherit; }
.feat-arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 20px 20px; overflow: hidden; background: var(--brand-100);
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .6); }
.feat-arch img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }   /* whole, any shape, standing on the arch's foot */
.feat-arch img.feat-fill { z-index: 0; object-fit: cover; object-position: 50% 0; filter: blur(24px); transform: scale(1.3); transform-origin: 50% 0; }   /* the dome above: a soft copy of the photo's top */
.feat-arch .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-500); }
.feat-arch .art svg { width: 76px; height: 76px; }
.feat-media .np-chip { position: relative; z-index: 2; margin-top: -30px; box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .55); }
.feat-copy .eyebrow { color: #E9B9C3; }
.feat-copy h2 { color: #fff; font-size: clamp(46px, 5.6vw, 76px); letter-spacing: -.01em; margin-bottom: .3em; }
.feat-copy .lead { color: #EADCE0; max-width: 32em; margin: 0; }
/* the three steps: a short timeline, three equal columns joined by a thin line (one under the other on phones) */
.feat-steps { list-style: none; counter-reset: feat; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 34px; padding: 0; }
.feat-steps li { counter-increment: feat; position: relative; padding: 44px 18px 0 0; font-size: 15.5px; font-weight: 500; line-height: 1.45; color: #F5E8EB; text-wrap: balance; }
.feat-steps li::before { content: counter(feat); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: #E9B9C3; color: var(--brand-900); font-size: 13.5px; font-weight: 700; line-height: 1; }
.feat-steps li::after { content: ""; position: absolute; left: 42px; right: 12px; top: 15px; height: 1px; background: rgba(233, 185, 195, .45); }
.feat-steps li:last-child::after { content: none; }
.feat-shop { background: #F6DDE3; color: var(--brand-900); }
.feat-shop:hover { background: #fff; color: var(--brand-900); transform: translateY(-2px); }
.feat-shop svg { width: 17px; height: 17px; }
.feat-book { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.feat-book:hover { background: #fff; color: var(--brand-900); border-color: #fff; }
.feat-band :focus-visible { outline-color: #E9B9C3; }
.feat-note { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: #CDB7BE; }
@media (hover: hover) and (pointer: fine) {
  .feat-arch img:not(.feat-fill) { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
  .feat-frame:hover .feat-arch img:not(.feat-fill) { transform: scale(1.04); }
  .feat-frame:hover::before { border-color: rgba(233, 185, 195, .85); }
}
@media (max-width: 900px) {
  .feat { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .feat-frame { width: min(100%, 360px); }
  .feat-copy { width: 100%; max-width: 620px; margin: 0 auto; }
  .feat-band::before { left: 50%; top: 0; transform: translate(-50%, -18%); }
}
@media (max-width: 640px) {
  .feat-frame { width: min(100%, 320px); padding: 12px; }
  .feat-copy .btn-row { flex-direction: column; align-items: stretch; }
  .feat-copy .btn-row .btn { width: 100%; }
  .feat-steps { grid-template-columns: minmax(0, 1fr); row-gap: 14px; margin: 24px 0 28px; }
  .feat-steps li { padding: 5px 0 0 44px; min-height: 30px; }
  .feat-steps li::after { content: none; }
}
.step-ic .s-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-100); color: var(--rose-text); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.step-ic .s-ic svg { width: 24px; height: 24px; }

/* ---------- FAQ accordions (all pages): clean questions, round +/× toggle, gentle reveal ---------- */
.faq summary { font-family: var(--sans); font-size: 17.5px; font-weight: 600; line-height: 1.45; color: var(--ink); padding: 19px 54px 19px 0; transition: color .2s; }
.faq summary:hover, .faq details[open] > summary { color: var(--rose-text); }
.faq summary::after { content: "+"; right: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--card-border); background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 400; line-height: 1; color: var(--rose-text); transition: transform .25s ease, background .2s, color .2s, border-color .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.faq summary:focus-visible { outline: 2px solid var(--rose-text); outline-offset: 4px; border-radius: 6px; }
.faq details p { font-size: 16.5px; line-height: 1.7; padding: 0 54px 20px 0; animation: faqIn .28s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq details p { animation: none; } }

/* ---------- FAQ page: search, sticky topics, one card per topic ---------- */
.faq-search { position: relative; max-width: 560px; margin-top: 26px; }
.faq-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--rose-text); pointer-events: none; }
.faq-search input { width: 100%; height: 56px; padding: 0 20px 0 50px; border-radius: 999px; border: 1.5px solid var(--field-border); background: #fff; font: inherit; font-size: 16.5px; color: var(--ink); box-shadow: 0 8px 22px -14px rgba(58,42,46,.35); }
.faq-search input::placeholder { color: #8A747C; }
.faq-search input:focus { outline: none; border-color: var(--rose-text); box-shadow: 0 0 0 4px rgba(140,69,86,.14); }
.faq-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.faq-aside { position: sticky; top: 100px; display: grid; gap: 16px; }
.faq-topics { background: #fff; border: 1px solid var(--card-border); border-radius: 18px; padding: 16px 10px 12px; box-shadow: var(--shadow-card); }
.faq-topics b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-text); margin: 0 10px 8px; }
.faq-topics ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.faq-topics a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 15px; line-height: 1.3; color: var(--ink-soft); }
.faq-topics a small { flex-shrink: 0; min-width: 24px; text-align: center; font-size: 12px; font-weight: 700; color: var(--rose-text); background: var(--brand-50); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.faq-topics a:hover { background: var(--brand-50); color: var(--ink); }
.faq-topics a.on { background: var(--tint); color: var(--brand-900); font-weight: 600; }
.faq-help { background: var(--brand-900); color: #F5E8EB; border-radius: 18px; padding: 20px; }
.faq-help .fh-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.faq-help img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.7); }
.faq-help b { font-family: var(--serif); font-size: 22px; font-weight: 600; color: #fff; line-height: 1.2; }
.faq-help p { font-size: 15px; color: #E6D5DA; margin: 0 0 14px; line-height: 1.5; }
.faq-help .btn { width: 100%; padding: 12px 16px; font-size: 15.5px; }
.faq-help .btn + .btn { margin-top: 10px; }
.faq-help-mobile { display: none; }
.faq-card { background: #fff; border: 1px solid var(--card-border); border-radius: 22px; box-shadow: var(--shadow-card); padding: 6px 28px 6px; margin-bottom: 22px; scroll-margin-top: 110px; }
.faq-card-head { display: flex; align-items: center; gap: 14px; padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
.faq-card-head .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--brand-100); color: var(--rose-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-card-head .ic svg { width: 23px; height: 23px; }
.faq-card-head h2 { font-size: clamp(24px, 2.3vw, 30px); margin: 0; line-height: 1.15; }
.faq-card-head small { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
.faq-card-head .link-arrow { margin-left: auto; white-space: nowrap; font-size: 15px; }
.faq-card .faq { max-width: none; margin: 0; }
.faq-card .faq details:last-child { border-bottom: 0; }
.faq-empty { background: var(--tint); border: 1px solid var(--card-border); border-radius: 16px; padding: 18px 20px; margin: 0 0 22px; color: var(--ink); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--rose-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 1020px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-aside { position: static; }
  .faq-aside .faq-help { display: none; }
  .faq-help-mobile { display: block; margin-top: 8px; }
  .faq-topics { background: none; border: 0; box-shadow: none; padding: 0; margin: -6px calc(-1 * var(--gutter)) 0; overflow-x: auto; scrollbar-width: none; }
  .faq-topics::-webkit-scrollbar { display: none; }
  .faq-topics b { display: none; }
  .faq-topics ul { display: flex; gap: 8px; padding: 2px var(--gutter) 6px; width: max-content; }
  .faq-topics a { white-space: nowrap; background: #fff; border: 1px solid var(--card-border); border-radius: 999px; padding: 9px 14px; font-weight: 600; color: var(--ink); }
}
@media (max-width: 560px) {
  .faq-card { padding: 2px 16px 4px; border-radius: 18px; }
  .faq-card-head { gap: 12px; padding: 16px 0 12px; }
  .faq-card-head .ic { width: 40px; height: 40px; border-radius: 12px; }
  .faq-card-head .link-arrow { display: none; }
  .faq summary { font-size: 16.5px; padding: 17px 48px 17px 0; }
  .faq details p { padding-right: 0; font-size: 16px; }
}

/* ---------- phones only: calmer first screen on the home page ---------- */
@media (max-width: 760px) {
  .mbar { transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
  .mbar.away { transform: translateY(115%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .3s ease, opacity .2s ease, visibility 0s linear .3s; }
}
@media (max-width: 560px) {   /* hero buttons a little lighter (desktop unchanged) */
  .hero .btn-row { gap: 10px; }
  .hero .btn-row .btn-lg { padding: 14px 22px; font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .mbar, .mbar.away { transition: none; } }

/* phones (portrait): Sophie's photo comes first, so visitors see a face the moment the page opens (a local clinic
   earns trust with a person, not a paragraph). A shorter crop keeps the headline right under it; the bottom
   booking bar carries "Call / Book now" until the hero buttons scroll into view. Larger screens are unchanged. */
@media (max-width: 560px) {
  .hero { padding-top: 16px; }
  .hero .hero-grid { gap: 22px; }
  .hero .hero-copy h1 { font-size: clamp(32px, 9.4vw, 38px); }   /* two lines: "Enhancing your beauty / from the inside out" */
  .hero-media { order: -1; max-width: none; margin: 0; }
  .hero-photo { width: 100%; aspect-ratio: 5 / 4; max-height: 46vh; max-height: 46svh; border-width: 5px; border-radius: 24px;
    box-shadow: 0 18px 44px rgba(58,42,46,.16); }
  .hero-photo img { object-position: 50% 14%; }
  .hero-card { left: 12px; bottom: 14px; padding: 10px 16px 10px 10px; gap: 10px; border-radius: 16px; }
  .hero-card .ic { width: 40px; height: 40px; }
  .hero-card .ic svg { width: 20px; height: 20px; }
  .hero-card b { font-size: 20px; }
  .hero-card small { font-size: 13px; }
}

/* ---------- Treatments landing: split hero with a printed-style "treatment menu" ---------- */
.tr-hero { padding-bottom: clamp(48px, 6vw, 88px); }
.tr-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(36px, 6vw, 96px); align-items: start; }
/* the text starts level with the top of the treatment menu (the menu grows as treatments are added; centring pushed the text down) */
.tr-hero-copy { padding-top: clamp(0px, 2.4vw, 34px); }
@media (max-width: 1020px) { .tr-hero-copy { padding-top: 0; } }
.tr-hero .lead { max-width: 560px; }
.tr-help { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 600; font-size: 15.5px; color: var(--rose-text); }
.tr-help svg { width: 18px; height: 18px; }
.tr-help:hover { color: var(--brand-900); }
.tr-hero .np-chip + .tr-help { display: flex; width: fit-content; max-width: 100%; }
.tr-hero h1 { font-size: clamp(40px, 4.4vw, 62px); }

.tmenu { position: relative; background: #FFFDFC; border: 1px solid var(--card-border); border-radius: 22px; padding: 22px 28px 16px;
  box-shadow: inset 0 0 0 9px #FFFDFC, inset 0 0 0 10px var(--line), 0 30px 60px -30px rgba(58,42,46,.35); }
/* compact: the logo sits beside the title, so the long list starts higher */
.tm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-bottom: 6px; }
.tm-head img { display: block; width: 22px; height: 32px; margin: 0; }
.tm-title { font-family: var(--serif); font-size: 29px; font-weight: 500; line-height: 1.1; color: var(--brand-900); margin: 0; }
.tm-title em { color: var(--brand-500); }
.tm-rule { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 0; }
.tm-rule::before, .tm-rule::after { content: ""; width: 46px; height: 1px; background: var(--brand-200); }
.tm-rule i { width: 7px; height: 7px; background: var(--brand-400); transform: rotate(45deg); }
.tm-cat { margin-top: 12px; }
.tm-cat-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.tm-cat-h span { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-text); }
.tm-cat-h small { font-size: 12px; font-weight: 700; color: var(--rose-text); background: var(--brand-100); border-radius: 999px; padding: 1px 8px; }
.tm-cat-h:hover span { color: var(--brand-900); }
.tmenu ul { list-style: none; margin: 0; padding: 0; }
.tm-item { display: flex; align-items: baseline; gap: 8px; padding: 3px 8px; margin: 0 -8px; border-radius: 10px; color: var(--ink); transition: background .15s, color .15s; }
.tm-name { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.2; min-width: 0; }
.tm-dots { flex: 1 1 24px; min-width: 16px; border-bottom: 1.5px dotted var(--brand-400); transform: translateY(-5px); opacity: .8; }
.tm-time { flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.tm-item:hover { background: var(--brand-50); color: var(--rose-text); }
.tm-item:hover .tm-time { color: var(--rose-text); }
.tm-foot { margin: 12px 0 0; text-align: center; font-size: 13px; font-style: italic; color: var(--ink-soft); }

.tr-cat { margin-bottom: 64px; scroll-margin-top: 100px; }
.tr-cat:last-of-type { margin-bottom: 24px; }
.tr-cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.tr-cat-head h2 { margin: 0; }
.tr-cat-head .lead { margin: 0; max-width: 460px; }
#choosing { scroll-margin-top: 90px; }

@media (max-width: 1020px) {
  .tr-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .tmenu { max-width: 560px; }
}
@media (max-width: 560px) {
  .tmenu { padding: 20px 18px 14px; border-radius: 18px; box-shadow: inset 0 0 0 7px #FFFDFC, inset 0 0 0 8px var(--line), 0 24px 48px -30px rgba(58,42,46,.35); }
  .tm-title { font-size: 26px; }
  .tm-name { font-size: 17.5px; }
  .tm-time { font-size: 13px; }
  .tm-cat { margin-top: 12px; }
  .tr-help { font-size: 15px; }
}
@media (max-width: 400px) { .tr-help span { font-size: 14.5px; } }
.tr-hero .np-chip + .tr-help, .tr-help { display: block; width: fit-content; max-width: 100%; }
.tr-help svg { display: inline-block; vertical-align: -4px; margin-left: 2px; }

/* ---------- phone menu: "Hours" opens the whole week ---------- */
.nx-hours { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; }
.nx-hours > summary { list-style: none; cursor: pointer; border: 0 !important; background: none; }
.nx-hours > summary::-webkit-details-marker { display: none; }
.nav-extra .nx-hours > summary.nx-row { border: 0; }
.nx-chev { margin-left: auto; display: flex; color: var(--rose-text); transition: transform .25s ease; }
.nx-chev svg { width: 20px; height: 20px; }
.nx-hours[open] .nx-chev { transform: rotate(180deg); }
.nx-hours-body { overflow: hidden; }
.nx-hours .hours { margin: 0; padding: 0 12px 8px 57px; border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14.5px; }   /* lines up with the text above (after the icon tile) */
.nx-hours .hours td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.nx-hours .hours tr:last-child td { border-bottom: 0; }
.nx-hours .hours td:first-child { padding-left: 0; }
.nx-hours .hours td:last-child { padding-right: 0; text-align: right; }

/* ---------- footer (tablet & desktop): contact panel, clear columns, trust notes. Phones keep their layout. ---------- */
.f-contact, .f-explore, .footer .f-trust, .f-status { display: none; }
.f-serving { margin: 18px 0 0; font-size: 14.5px; color: #D9C6CB; }
.f-serving svg { display: none; }
@media (min-width: 761px) {
  .footer { padding-top: clamp(44px, 5vw, 68px); }
  .f-contact { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; margin-bottom: 56px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; overflow: hidden; }
  .fc { display: flex; align-items: center; gap: 12px; padding: 22px 18px; min-width: 0; color: #fff; transition: background .2s; }
  .fc + .fc { border-left: 1px solid rgba(255,255,255,.1); }
  .fc:hover { background: rgba(255,255,255,.06); color: #fff; }
  .fc-ic { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(233,185,195,.14); color: #E9B9C3; transition: background .2s, color .2s; }
  .fc:hover .fc-ic { background: #E9B9C3; color: var(--brand-900); }
  .fc-ic svg { width: 20px; height: 20px; }
  .fc small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #E9B9C3; }
  .fc b { display: block; margin-top: 3px; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: #fff; }
  .fc-mail b { font-size: 15.5px; }
  .fc em { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; line-height: 1.35; color: #D9C6CB; }
  .f-visit, .f-mobile-links { display: none !important; }
  .footer .f-main { grid-template-columns: 1.35fr 1fr .95fr 1.2fr; gap: 44px; }
  .f-explore { display: block; }
  .f-explore .f-h2 { margin-top: 28px; }
  .footer .f-trust { display: grid; gap: 10px; margin: 20px 0 0; }
  .f-trust li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: #EADCE0; }
  .f-trust svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: #E9B9C3; }
  .f-trust a { color: #fff; text-decoration: underline; text-decoration-color: rgba(233,185,195,.6); text-underline-offset: 3px; }
  .f-brand .social { margin-top: 22px; }
  .f-status { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 6px 12px; border-radius: 12px; line-height: 1.4; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 13.5px; font-weight: 600; color: #fff; }
  .f-status::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #E9B9C3; }
  .f-status[data-open="1"]::before { background: #7FD99A; box-shadow: 0 0 0 3px rgba(127,217,154,.18); }
  .f-serving { display: flex; align-items: center; gap: 8px; margin-top: 40px; }
  .f-serving svg { display: block; width: 16px; height: 16px; flex-shrink: 0; color: #E9B9C3; }
  .footer .legal { margin-top: 20px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .f-contact { grid-template-columns: 1fr 1fr; }
  .fc:nth-child(3) { border-left: 0; }
  .fc:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
}
@media (min-width: 761px) and (max-width: 1100px) { .footer .f-main { grid-template-columns: 1fr 1fr; gap: 44px 48px; } }
.faq details.anim { overflow: hidden; }

/* phones & tablets: the Treatments row (opens the list, doesn't navigate) never shows a pressed / hover colour */
@media (max-width: 1100px) {
  .nav-dd-btn, .nav-dd-btn:hover, .nav-dd-btn:active, .nav-dd-btn:focus, .nav-dd.open .nav-dd-btn { background: none !important; }
  .nav-dd-btn:focus:not(:focus-visible) { outline: none; }
}

/* spam protection (reCAPTCHA): Google's badge is hidden only while its required notice is shown under the forms */
.rc-on .grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { font-size: 12px; line-height: 1.5; opacity: .8; margin: 10px 0 0; }
.recaptcha-note a { color: inherit; text-decoration: underline; }

/* service page photo gallery (Admin → Clinic → Services → Photos) */
.td-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 26px 0 6px; }
.td-gallery figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--brand-100); border: 1px solid var(--card-border); }
.td-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-gallery.one { grid-template-columns: 1fr; }
.td-gallery.one figure { aspect-ratio: 16 / 9; }
@media (max-width: 560px) { .td-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ---------- privacy box (assets/js/analytics.js): asks before any Google Analytics; both answers equally easy ---------- */
#cookies { scroll-margin-top: 110px; }   /* Privacy Policy section opened from "Cookie choices": not under the sticky header */
/* a short note at the bottom of the screen (an email address copied): white, so it stands out on the dark footer too */
.bw-toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; max-width: min(92vw, 520px); padding: 13px 20px; border-radius: 12px; background: #fff;
  color: var(--ink); border: 1px solid var(--card-border); border-left: 4px solid var(--brand-500); font-size: 15px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .55); opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; overflow-wrap: anywhere; }
.bw-toast.on { opacity: 1; transform: translate(-50%, 0); }
.bw-copy-tmp { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .bw-toast { transition: none; } }
.bw-consent { position: fixed; left: 18px; bottom: 18px; z-index: 85; width: min(440px, calc(100vw - 36px)); background: #fff; color: var(--ink); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(58, 42, 46, .18); padding: 20px 22px 18px; }
.bw-consent h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.15; letter-spacing: 0; margin: 0 0 6px; color: var(--brand-900); }
.bw-consent p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; }
.bw-consent p a { color: var(--rose-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bw-consent-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bw-consent-b button { min-height: 46px; padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--brand-900); font-family: var(--sans); font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.bw-consent-no { background: #fff; color: var(--brand-900); }
.bw-consent-no:hover { background: var(--brand-100); }
.bw-consent-yes { background: var(--brand-900); color: #fff; }
.bw-consent-yes:hover { background: var(--brand-700); border-color: var(--brand-700); }
@media (prefers-reduced-motion: no-preference) { .bw-consent { animation: bwConsentIn .35s ease both; } }
@keyframes bwConsentIn { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 760px) {   /* above the booking bar and the contact button */
  .bw-consent { left: 10px; right: 10px; width: auto; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); padding: 16px 16px 14px; }
  .bw-consent h2 { font-size: 22px; }
  .bw-consent p { font-size: 14.5px; margin-bottom: 12px; }
}
@media print { .bw-consent { display: none; } }

/* A site photo deleted in the admin (Media library → Delete, Site content → Delete photo; cms-content.js marks it):
   the photo and its frame leave the page, and the text beside it takes the space. */
img[data-cms-removed] { display: none !important; }
.split > :has(> .portrait > img[data-cms-removed]) { display: none; }
.split:has(> * > .portrait > img[data-cms-removed]) { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.hero-grid > .hero-media:has(.hero-photo > img[data-cms-removed]) { display: none; }
.hero-grid:has(> .hero-media .hero-photo > img[data-cms-removed]) { grid-template-columns: minmax(0, 1fr); }
.np-chip:has(> img[data-cms-removed]) { padding-left: 20px; }

/* ---------- the clinic's Instagram in the top bar (wide screens) and next to the footer icons ---------- */
.topbar .tb-right { display: flex; align-items: center; gap: 16px; }
.topbar .tb-ig { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.topbar .tb-ig:hover { color: #E9B9C3; }
.topbar .tb-ig svg { display: block; flex-shrink: 0; }
.footer .social { align-items: center; flex-wrap: wrap; }
.footer .social a.f-handle { width: auto; height: auto; border: 0; border-radius: 0; padding: 4px 2px; font-size: 14.5px; font-weight: 600; color: #F1E1E5; }
.footer .social a.f-handle:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- home: Sophie's round photo on the card over the hero photo ---------- */
.hero-card .ic.ic-photo { background: var(--brand-100); overflow: hidden; padding: 0; }
.hero-card .ic.ic-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ---------- Products: one card per product (Admin → Website → Products; before that, the built-in cards). A card with a
   link is one link to the brand's website (new tab): the name's ::after covers the card, so the photo opens it too.
   Animations use transform and opacity only. Entrance: the cards rise in one after another across a row (on load for
   the first row, as they scroll into view for the others: site.js .rv-wait → .in). Hover (mouse only): the card lifts,
   the photo zooms in slowly and a "View" badge comes up; on touch screens "Visit website" shows what a tap does. ---------- */
.p-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.p-card { flex: 0 1 calc((100% - 44px) / 3); display: flex; position: relative; min-width: 0; isolation: isolate; container-type: inline-size; }
.p-box { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; color: var(--ink); }
/* the photo fills the top of the card edge to edge (the card's round corners trim it), in its own shape, so nothing
   is cut off; only a photo taller than a phone's 3 : 4 portrait is trimmed top and bottom to 3 : 4 (480px where the
   browser can't measure the card) */
.p-card .ph { position: relative; overflow: hidden; background: #fff; }
.p-card .ph-in { position: relative; }
.p-card .ph img { display: block; width: 100%; height: auto; max-height: 480px; max-height: 134cqw; object-fit: cover; }
/* no photo yet, still loading, or deleted: the icon on the pink tile, 3 : 2 (16 : 9 on phones) */
.p-card .ph:has(> .ph-in > .art, > .ph-in > img[hidden], > .ph-in > img[data-cms-removed]) { aspect-ratio: 3 / 2; background: var(--brand-100); }
.p-card .ph:has(> .ph-in > .art, > .ph-in > img[hidden], > .ph-in > img[data-cms-removed]) > .ph-in { position: absolute; inset: 0; }
.p-card .ph:has(> .ph-in > .art) .ph-in > img { position: absolute; inset: 0; height: 100%; max-height: none; }
.p-card .ph .art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-500); background: var(--brand-100); }
.p-card .ph .art svg { width: 64px; height: 64px; }
.p-card .bd { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.p-card h3 { margin-bottom: 8px; }
.p-card p { color: var(--ink-soft); font-size: 17px; line-height: 1.6; margin: 0; }
/* the link: the whole card */
.p-link { color: inherit; text-decoration: none; }
.p-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); }
.p-link:focus-visible { outline: none; }
.p-link:focus-visible::after { outline: 2px solid var(--rose-text); outline-offset: -3px; }
.p-go { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--rose-text); }
.p-go svg { width: 15px; height: 15px; flex: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
/* the "View" badge and a soft shade over the photo */
.p-card .ph::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(58, 42, 46, 0) 40%, rgba(58, 42, 46, .1) 100%); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.p-view { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px 11px 16px; border-radius: 999px;
  background: rgba(58, 42, 46, .92); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(58, 42, 46, .55); opacity: 0; transform: translate(-50%, -50%) translateY(12px) scale(.92); pointer-events: none;
  transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.p-view svg { width: 18px; height: 18px; flex: none; }
/* the lifted card's deeper shadow sits on its own layer (only its opacity changes) */
.p-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius); box-shadow: 0 26px 50px -22px rgba(58, 42, 46, .42); opacity: 0;
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .p-box.has-link { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .p-box.has-link .ph img { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
  .p-card:has(> .p-box.has-link:hover)::before { opacity: 1; transform: translateY(-6px); }
  .p-box.has-link:hover { transform: translateY(-6px); }
  .p-box.has-link:hover .ph img { transform: scale(1.06); }
  .p-box.has-link:hover .ph::after, .p-box.has-link:focus-within .ph::after { opacity: 1; }
  .p-box.has-link:hover .p-view, .p-box.has-link:focus-within .p-view { opacity: 1; transform: translate(-50%, -50%); }
  .p-box.has-link:hover .p-name { color: var(--rose-text); }
  .p-box.has-link:hover .p-go svg { transform: translate(3px, -3px); }
  .p-box.has-link:active { transform: translateY(-3px) scale(.995); }
}
@media (hover: none) { .p-box.has-link:active { transform: scale(.985); transition: transform .15s ease; } }
/* entrance: one after another across a row (--pd), the photo settling as the card rises */
.p-grid > .p-card:nth-child(3n+2) { --pd: .1s; }
.p-grid > .p-card:nth-child(3n) { --pd: .2s; }
@media (max-width: 1020px) { .p-card { flex-basis: calc((100% - 22px) / 2); } .p-grid > .p-card:nth-child(n) { --pd: 0s; } .p-grid > .p-card:nth-child(2n) { --pd: .1s; } }
@media (max-width: 640px) { .p-grid { gap: 16px; } .p-card { flex-basis: 100%; } .p-card .ph:has(> .ph-in > .art, > .ph-in > img[hidden], > .ph-in > img[data-cms-removed]) { aspect-ratio: 16 / 9; } .p-grid > .p-card:nth-child(n) { --pd: 0s; } }
@media (prefers-reduced-motion: no-preference) {
  .p-grid > .p-card:not(.rv-wait) > .p-box { animation: pRise .85s cubic-bezier(.2, .75, .25, 1) backwards; animation-delay: var(--pd, 0s); }
  .p-grid > .p-card:not(.rv-wait) .ph-in { animation: pSettle 1.3s cubic-bezier(.2, .75, .25, 1) backwards; animation-delay: calc(var(--pd, 0s) + .08s); }
  .p-grid > .p-card.rv-wait { opacity: 0; transform: translateY(30px); }
  .p-grid > .p-card.rv-wait.in { opacity: 1; transform: none; transition: opacity .8s ease var(--pd, 0s), transform .9s cubic-bezier(.2, .75, .25, 1) var(--pd, 0s); }
  .p-grid > .p-card.rv-wait .ph-in { transform: scale(1.08); }
  .p-grid > .p-card.rv-wait.in .ph-in { transform: none; transition: transform 1.4s cubic-bezier(.2, .75, .25, 1) calc(var(--pd, 0s) + .08s); }
}
@keyframes pRise { from { opacity: 0; transform: translateY(26px); } }
@keyframes pSettle { from { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .p-box, .p-card::before, .p-view, .p-go svg, .p-card .ph::after, .p-card .ph img { transition: none !important; }
  .p-box.has-link:hover, .p-box.has-link:active, .p-box.has-link:hover .ph img { transform: none !important; }
  .p-view { transform: translate(-50%, -50%); }
}

/* ---------- service pages: photos from Admin → Services are shown whole, whatever their shape (no resizing needed) ---------- */
.td-hero-visual.has-photo, .td-hero-visual:has(> img[data-f="image"]:not([hidden])) { aspect-ratio: auto; background: var(--brand-100); }
.td-hero-visual.has-photo > img, .td-hero-visual:has(> img[data-f="image"]:not([hidden])) > img { display: block; width: 100%; height: auto; max-height: min(72vh, 640px); object-fit: contain; }
.td-gallery figure { aspect-ratio: 1 / 1; }                       /* square tiles, each photo whole inside (in order) */
.td-gallery figure a { display: block; width: 100%; height: 100%; }
.td-gallery img { object-fit: contain; }
.td-gallery figure:hover { border-color: var(--brand-400); }
.td-gallery.one figure { aspect-ratio: auto; }
.td-gallery.one img { height: auto; max-height: min(72vh, 640px); }
.t-card--photo .ph img { object-position: 50% 30%; }   /* a portrait photo on a card keeps the face in view */

/* ---------- service page photos, opened larger on the page (site.js lightbox) ---------- */
/* the mouse over a photo: the Bloor West Medspa mark (the hand mirror with the eye) on a white disc, sharp on every screen
   (1x 56 px and 2x 112 px; a browser without image-set takes the first, one that can't show it the hand) */
.td-gallery a { cursor: pointer; cursor: url("/assets/img/bloor-west-medspa-photo-cursor.png?v=1") 28 28, pointer;
  cursor: -webkit-image-set(url("/assets/img/bloor-west-medspa-photo-cursor.png?v=1") 1x, url("/assets/img/bloor-west-medspa-photo-cursor-2x.png?v=1") 2x) 28 28, pointer;
  cursor: image-set(url("/assets/img/bloor-west-medspa-photo-cursor.png?v=1") 1x, url("/assets/img/bloor-west-medspa-photo-cursor-2x.png?v=1") 2x) 28 28, pointer; }
.td-gallery img { transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) { .td-gallery figure:hover img { transform: scale(1.03); } }
/* site.js keeps the same numbers: 94 px each side (20 px edge + 50 px arrow + 24 px), at most 1100 px, the height less 190 px */
/* The window is as tall as the screen with the browser's bars shown (svh): on phones those bars hide and come back, and
   Safari brings its bottom bar back on a tap where that bar goes. So the arrows stay just above that place (a tap on them
   never brings the bar up), and nothing jumps when the bars move. The dimmed background still covers the whole screen. */
.bw-lb { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 76px 94px 100px; --lb-w: calc(100% - 188px); }
.bw-lb:focus { outline: none; }
.bw-lb-bg { position: fixed; inset: 0; background: rgba(36, 24, 28, .58); -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%); opacity: 0; transition: opacity .24s ease-out; }
.bw-lb-fig { position: relative; margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(10px) scale(.965); transition: opacity .24s ease-out, transform .32s cubic-bezier(.2, .8, .2, 1); }
.bw-lb.open .bw-lb-bg, .bw-lb.open .bw-lb-fig { opacity: 1; }
.bw-lb.open .bw-lb-fig { transform: none; }
.bw-lb-frame { position: relative; max-width: 100%; }
.bw-lb-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100svh - 190px); object-fit: contain;
  border-radius: 16px; background: #fff; box-shadow: 0 28px 80px rgba(0, 0, 0, .38); cursor: default; }
/* The words hang under the photo (out of the layout), so only the photo is centred: a one-line or a two-line description
   never moves the photo. Room for up to 3 lines is kept below (padding-bottom); longer ones end with “…”. */
.bw-lb-cap { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(60ch, calc(100vw - 32px));
  margin: 0; color: #F6ECEF; font-size: 15px; line-height: 1.5; text-align: center;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* the next photo slides in a little from the side it comes from (the old one stays until the new one is ready: no dark gap) */
.bw-lb-img.from-next { animation: bw-lb-from-next .26s cubic-bezier(.2, .8, .2, 1); }
.bw-lb-img.from-prev { animation: bw-lb-from-prev .26s cubic-bezier(.2, .8, .2, 1); }
@keyframes bw-lb-from-next { from { opacity: .45; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes bw-lb-from-prev { from { opacity: .45; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
/* the counter (middle) and ✕ (right) sit just above the photo's top edge, not in the screen's corners */
.bw-lb-head { position: absolute; left: 0; right: 0; bottom: calc(100% + 12px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.bw-lb-count { grid-column: 2; margin: 0; padding: 6px 13px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.bw-lb-btn { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .12);
  color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.bw-lb-btn svg { width: 24px; height: 24px; }
.bw-lb-btn:active { transform: scale(.94); }
.bw-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .bw-lb-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; } }
.bw-lb-x { position: relative; grid-column: 3; justify-self: end; width: 44px; height: 44px; }
.bw-lb-x svg { width: 22px; height: 22px; }
/* the arrows: 24 px outside the widest photo of the set (site.js sets --lb-w), half-way down */
.bw-lb-prev, .bw-lb-next { top: calc(50% - 12px); margin-top: -25px;   /* the photo's middle: (76 px top − 100 px bottom) / 2 */ transition: background .15s ease, transform .15s ease, left .25s ease, right .25s ease; }
.bw-lb-prev { left: calc(50% - var(--lb-w) / 2 - 74px); }
.bw-lb-next { right: calc(50% - var(--lb-w) / 2 - 74px); }
@media (max-width: 760px) {
  /* bottom: arrows (18 + 50 px) + 12 px + up to 3 lines of words (14 + 68 px) = 162 px; ✕ never under the clock / notch */
  .bw-lb { padding: 64px 12px 162px; padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .bw-lb-img { max-height: calc(100vh - 226px); max-height: calc(100svh - 226px - env(safe-area-inset-top, 0px)); border-radius: 12px; }
  .bw-lb-prev, .bw-lb-next { top: auto; bottom: 18px; margin-top: 0; }
  .bw-lb-prev { left: calc(50% - 64px); }
  .bw-lb-next { right: calc(50% - 64px); }
}
@media (prefers-reduced-motion: reduce) { .bw-lb-bg, .bw-lb-fig, .bw-lb-btn, .td-gallery img { transition: none; } .bw-lb-img.from-next, .bw-lb-img.from-prev { animation: none; } }
@media print { .bw-lb { display: none !important; } }