/* Bonafide Beauty — bonafidebeauty.ca design system.
   Editorial beauty-studio look rebuilt from the client's Wix site: cream +
   blush surfaces, espresso ink, dusty-clay accent, Fraunces display serif,
   Jost body, Great Vibes script accents, and the arch photo motif from the
   original hero. Served as a repo static because the platform CSP is
   nonce-based (page assets carry no inline <script>; inline style attributes
   are fine). Class prefix: bb- (layout/skin) and bbp- (JS-wired hooks in
   /static/js/bonafide-pages.js). Bump the ?v= in the _head fragments on edit. */

:root {
  --bb-ink: #2e2624;
  --bb-body: #5c4f4a;
  --bb-soft: #8a7a72;
  --bb-cream: #fbf7f3;
  --bb-blush: #f6e3df;
  --bb-blush-deep: #f0d3cd;
  --bb-rose: #e9bfb7;
  --bb-clay: #b97264;
  --bb-clay-dk: #a05a4c;
  --bb-taupe: #9a857c;
  --bb-charcoal: #322b29;
  --bb-line: #eaddd6;
  --bb-serif: 'Fraunces', 'Georgia', serif;
  --bb-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --bb-script: 'Great Vibes', cursive;
}

html { scroll-behavior: smooth; }
/* This stylesheet only loads on Bonafide pages, so the reset is page-scoped.
   Without it the browser's default 8px body margin frames the whole site.
   The background matches the page so overscroll never flashes white. */
body { margin: 0; background: var(--bb-cream); }
.bb-site {
  font-family: var(--bb-sans);
  color: var(--bb-ink);
  background: var(--bb-cream);
  font-size: 16.5px;
  line-height: 1.6;
  /* clip, NOT hidden: overflow-x:hidden on this ancestor silently disables
     position:sticky for the header. clip clips the same without creating a
     scroll container, so the sticky header actually sticks. */
  overflow-x: clip;
}
.bb-site *, .bb-site *::before, .bb-site *::after { box-sizing: border-box; }
.bb-site img { max-width: 100%; display: block; }
.bb-site a { color: inherit; text-decoration: none; }
.bb-site p { margin: 0; color: var(--bb-body); }

.bb-wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

/* ---------------- Type ---------------- */
.bb-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bb-clay);
}
.bb-h1 {
  margin: 0;
  font-family: var(--bb-serif);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--bb-ink);
}
.bb-h2 {
  margin: 0;
  font-family: var(--bb-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--bb-ink);
}
.bb-h3 {
  margin: 0;
  font-family: var(--bb-serif);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.25;
  color: var(--bb-ink);
}
.bb-script { font-family: var(--bb-script); font-weight: 400; color: var(--bb-clay); }
.bb-lede { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; max-width: 62ch; }
.bb-caps {
  font-size: 13px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bb-soft);
}

/* ---------------- Buttons ---------------- */
.bb-btn, .bb-btn-ghost, .bb-btn-dark {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px; border-radius: 999px;
  font-family: var(--bb-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.bb-btn { background: var(--bb-clay); color: #fff; border: 1px solid var(--bb-clay); }
.bb-btn:hover { background: var(--bb-clay-dk); border-color: var(--bb-clay-dk); }
.bb-btn-ghost { background: transparent; color: var(--bb-ink); border: 1px solid var(--bb-ink); }
.bb-btn-ghost:hover { background: var(--bb-ink); color: var(--bb-cream); }
.bb-btn-dark { background: var(--bb-ink); color: var(--bb-cream); border: 1px solid var(--bb-ink); }
.bb-btn-dark:hover { background: var(--bb-clay); border-color: var(--bb-clay); }

/* ---------------- Header ---------------- */
.bb-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 247, 243, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bb-line);
}
.bb-header-in {
  max-width: 1160px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 32px);
  display: flex; align-items: center; gap: 18px 28px;
}
.bb-logo { display: inline-flex; flex-direction: column; line-height: 1; flex: none; }
.bb-logo .bb-logo-script {
  font-family: var(--bb-script); font-size: 34px; color: var(--bb-ink);
  transform: rotate(-2deg); margin-bottom: -2px;
}
.bb-logo .bb-logo-caps {
  font-size: 10px; font-weight: 500; letter-spacing: 0.52em;
  text-transform: uppercase; color: var(--bb-clay); padding-left: 6px;
}
.bb-nav {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 4px 26px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
.bb-nav a { color: var(--bb-body); padding: 6px 0; border-bottom: 1px solid transparent; }
.bb-nav a:hover, .bb-nav a[aria-current="page"] { color: var(--bb-ink); border-bottom-color: var(--bb-clay); }
.bb-header .bb-btn { min-height: 44px; padding: 0 22px; flex: none; }
.bb-navbtn {
  display: none; flex: none; width: 44px; height: 44px; border: 1px solid var(--bb-line);
  border-radius: 999px; background: transparent; cursor: pointer; position: relative;
}
.bb-navbtn span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--bb-ink);
  border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease;
}
.bb-navbtn span:nth-child(1) { top: 16px; }
.bb-navbtn span:nth-child(2) { top: 21px; }
.bb-navbtn span:nth-child(3) { top: 26px; }
.bb-navbtn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.bb-navbtn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bb-navbtn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 899px) {
  .bb-navbtn { display: block; }
  .bb-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--bb-cream); border-bottom: 1px solid var(--bb-line);
    padding: 10px clamp(16px, 4vw, 32px) 18px;
  }
  .bb-nav.is-open { display: flex; }
  .bb-nav a { padding: 10px 0; font-size: 15px; width: 100%; }
}

/* ---------------- Sections ---------------- */
.bb-sec { padding: clamp(48px, 8vw, 96px) 0; }
.bb-sec-tight { padding: clamp(32px, 5vw, 64px) 0; }
.bb-band { background: var(--bb-blush); }
.bb-band-soft { background: #f9efec; }
.bb-band-dark { background: var(--bb-charcoal); }
.bb-band-dark .bb-h2, .bb-band-dark .bb-h3 { color: var(--bb-cream); }
.bb-band-dark p { color: #cbbdb6; }
.bb-band-dark .bb-eyebrow { color: var(--bb-rose); }
.bb-sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(24px, 4vw, 44px); }
.bb-sec-head.bb-center { align-items: center; text-align: center; }

/* ---------------- Hero ---------------- */
.bb-hero { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 5vw, 64px); }
.bb-hero-copy { flex: 1.15 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.bb-hero-art { flex: 1 1 320px; min-width: 0; display: flex; justify-content: center; }

/* ---------------- Photo slots ----------------
   Real client photos are added later (Cloudflare Images / repo statics) — an
   <img> dropped inside .bb-photo fills the frame. Until then the frame renders
   as a finished-looking blush panel with the studio monogram, never a broken
   image icon. */
.bb-photo {
  position: relative; overflow: hidden; border-radius: 20px;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(233, 191, 183, 0.65), rgba(233, 191, 183, 0) 60%),
    radial-gradient(110% 110% at 85% 90%, rgba(185, 114, 100, 0.28), rgba(185, 114, 100, 0) 55%),
    linear-gradient(160deg, #f6e3df 0%, #f0d3cd 55%, #ecc9c2 100%);
  min-height: 240px;
}
.bb-photo::after {
  content: attr(data-monogram);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--bb-script); font-size: clamp(42px, 7vw, 72px);
  color: rgba(160, 90, 76, 0.28); pointer-events: none;
}
.bb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-photo img + * { display: none; }
.bb-photo.bb-arch { border-radius: 999px 999px 22px 22px; }
.bb-photo .bb-photo-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: #5a4038; background: rgba(250, 246, 238, 0.85);
  padding: 5px 12px; border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* ---------------- Cards & grids ---------------- */
.bb-grid { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.5vw, 28px); }
.bb-card {
  flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px;
  background: #fff; border: 1px solid var(--bb-line); border-radius: 20px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: 0 24px 44px -34px rgba(46, 38, 36, 0.35);
}
.bb-card .bb-photo { min-height: 200px; }
.bb-card-link { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.bb-card-link:hover { transform: translateY(-3px); box-shadow: 0 30px 52px -32px rgba(46, 38, 36, 0.42); }
.bb-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bb-clay);
}

/* ---------------- Price rows ---------------- */
.bb-price-list { display: flex; flex-direction: column; }
.bb-price-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  padding: 16px 2px; border-bottom: 1px solid var(--bb-line);
}
.bb-price-row:first-child { border-top: 1px solid var(--bb-line); }
.bb-price-name { flex: 1 1 220px; min-width: 0; font-weight: 600; font-size: 16.5px; color: var(--bb-ink); }
.bb-price-note { flex: 2 1 260px; min-width: 0; font-size: 14.5px; color: var(--bb-soft); }
.bb-price-amt { flex: none; font-family: var(--bb-serif); font-size: 21px; font-weight: 600; color: var(--bb-clay); }

/* ---------------- Reviews ---------------- */
.bb-stars { color: var(--bb-clay); font-size: 15px; letter-spacing: 0.2em; }
.bb-review {
  flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--bb-line); border-radius: 20px;
  padding: clamp(20px, 2.6vw, 28px);
}
.bb-review blockquote { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--bb-body); }
.bb-review cite { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-soft); }

/* ---------------- FAQ accordion (JS: bonafide-pages.js) ---------------- */
.bb-faq { display: flex; flex-direction: column; }
[data-bbp-faq] { border-bottom: 1px solid var(--bb-line); }
[data-bbp-faq]:first-child { border-top: 1px solid var(--bb-line); }
[data-bbp-faqbtn] {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 2px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--bb-sans);
}
.bbp-q { font-size: 16.5px; font-weight: 600; color: var(--bb-ink); line-height: 1.4; }
[data-bbp-sign] {
  flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--bb-rose); border-radius: 999px; color: var(--bb-clay);
  font-size: 17px; line-height: 1;
}
[data-bbp-faqbody] { padding: 0 2px 20px; }
.bbp-a { font-size: 15.5px; line-height: 1.7; color: var(--bb-body); max-width: 72ch; }

/* ---------------- Forms ---------------- */
.bb-form { display: flex; flex-direction: column; gap: 16px; }
.bb-form label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-ink);
}
.bb-form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.bb-form-row > label { flex: 1 1 200px; min-width: 0; }
.bb-input {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 1px solid var(--bb-line); border-radius: 12px; background: #fff;
  font-family: var(--bb-sans); font-size: 15.5px; color: var(--bb-ink);
}
.bb-input:focus { outline: 2px solid var(--bb-rose); outline-offset: 1px; }
textarea.bb-input { min-height: 130px; resize: vertical; line-height: 1.55; }
select.bb-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bb-clay) 50%), linear-gradient(135deg, var(--bb-clay) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.bb-form-err { display: none; margin: 0; font-size: 14px; font-weight: 600; color: #93372a; }
.bb-form-ok {
  display: none; flex-direction: column; gap: 6px; padding: 18px 20px;
  border-radius: 14px; background: var(--bb-blush); border: 1px solid var(--bb-rose);
}
.bb-form-ok strong { font-family: var(--bb-serif); font-size: 18px; color: var(--bb-ink); }
.bb-form-ok span { font-size: 14.5px; line-height: 1.55; color: var(--bb-body); }
.bb-fineprint { font-size: 12.5px; line-height: 1.5; color: var(--bb-soft); }

/* ---------------- Breadcrumbs ---------------- */
.bb-crumbs {
  display: flex; flex-wrap: wrap; gap: 6px 10px; padding-top: 18px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-soft);
}
.bb-crumbs a:hover { color: var(--bb-clay); }
.bb-crumbs .sep { color: var(--bb-rose); }

/* ---------------- Footer ---------------- */
.bb-footer { background: var(--bb-charcoal); color: #cbbdb6; }
.bb-footer p { color: #cbbdb6; }
.bb-footer-in {
  max-width: 1160px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 32px) 28px;
  display: flex; flex-wrap: wrap; gap: 32px 48px;
}
.bb-footer-brand { flex: 1.4 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bb-footer .bb-logo-script { color: var(--bb-cream); }
.bb-footer .bb-logo-caps { color: var(--bb-rose); }
.bb-footer-col { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.bb-footer-col a:hover { color: var(--bb-cream); }
.bb-footer-col .bb-caps { color: var(--bb-rose); font-size: 11.5px; margin-bottom: 4px; }
.bb-footer-legal {
  flex: 1 1 100%; padding-top: 18px; border-top: 1px solid rgba(203, 189, 182, 0.25);
  display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; color: #a3948d;
}

/* ---------------- Misc ---------------- */
.bb-split { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: center; }
.bb-split > .bb-split-copy { flex: 1.15 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bb-split > .bb-split-art { flex: 1 1 300px; min-width: 0; }
.bb-chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px;
  border: 1px solid var(--bb-rose); border-radius: 999px;
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bb-clay);
}
.bb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-hr { border: 0; border-top: 1px solid var(--bb-line); margin: 0; }
/* No flex here: a flex <p> would turn inline <em>/<a> children into separate
   flex items and scramble the sentence. Absolute dot + padding instead. */
.bb-check { position: relative; padding-left: 19px; }
.bb-check::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--bb-clay);
}
/* ---------------- Responsive: tablet ---------------- */
@media (max-width: 1024px) {
  .bb-site { font-size: 16px; }
  .bb-nav { gap: 4px 18px; font-size: 13px; }
  .bb-hero { gap: clamp(22px, 4vw, 40px); }
  .bb-hero-art > .bb-photo, .bb-split-art > .bb-photo { margin: 0 auto; }
  .bb-card { flex-basis: 280px; }
  .bb-footer-col { flex-basis: 150px; }
}

/* ---------------- Responsive: mobile ---------------- */
@media (max-width: 640px) {
  .bb-sec { padding: 44px 0; }
  .bb-sec-tight { padding: 26px 0; }
  .bb-sec-head { margin-bottom: 22px; }
  .bb-card { padding: 18px 16px; border-radius: 16px; }
  .bb-review { padding: 18px 16px; }
  .bb-price-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 2px; }
  .bb-price-amt { font-size: 19px; }
  .bb-btn, .bb-btn-ghost, .bb-btn-dark { min-height: 46px; padding: 0 20px; font-size: 13px; letter-spacing: 0.1em; }
  .bb-hero-art { width: 100%; }
  .bb-hero-art > .bb-photo { width: 100% !important; max-width: 340px; }
  .bb-split-art > .bb-photo { max-width: 100%; }
  .bb-chips { gap: 8px; }
  .bb-chip { min-height: 30px; padding: 0 12px; font-size: 11.5px; }
  .bb-footer-brand, .bb-footer-col { flex-basis: 100%; }
  .bb-footer-in { gap: 24px; }
  [data-bbp-faqbtn] { padding: 15px 2px; }
  .bbp-q { font-size: 15.5px; }
}

/* ---------------- Hero CTA row ----------------
   Two side-by-side buttons that must STAY on one row on phones: they share
   the width at a tighter size instead of wrapping to two rows. */
.bb-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) {
  .bb-cta-row { flex-wrap: nowrap; gap: 8px; }
  .bb-cta-row .bb-btn, .bb-cta-row .bb-btn-ghost {
    flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
    padding: 0 10px; font-size: 11.5px; letter-spacing: 0.07em;
  }
}

/* ---------------- Floating mobile tab bar (Home · Services · Book) ----------
   Mobile-only quick nav; a floating cream-glass pill above the safe area.
   Markup lives in _chrome_footer.html; active state set by bonafide-pages.js
   from location.pathname. NOT a footer substitute — every page keeps its real
   <footer> (CLAUDE.md rule). */
.bb-tabbar {
  display: none; position: fixed; z-index: 80;
  left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 247, 243, 0.92);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--bb-line); border-radius: 999px;
  box-shadow: 0 18px 40px -18px rgba(46, 38, 36, 0.4);
  padding: 7px;
}
.bb-tabbar a {
  flex: 1 1 0; min-width: 0; min-height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 999px; color: var(--bb-soft);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.bb-tabbar a svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bb-tabbar a[aria-current="page"] { color: var(--bb-clay); background: var(--bb-blush); }
.bb-tabbar .bb-tabbar-book { background: var(--bb-clay); color: #fff; }
.bb-tabbar .bb-tabbar-book[aria-current="page"] { background: var(--bb-clay-dk); color: #fff; }
@media (max-width: 767px) {
  .bb-tabbar { display: flex; gap: 6px; }
  /* Keep the real footer readable above the floating bar. */
  .bb-footer-in { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* The floating tab bar carries mobile navigation; the header scrolls away
     to give small screens their space back. Sticky is desktop + tablet. */
  .bb-header { position: static; }
  /* The platform's "Powered by linq" post-footer renders BELOW our footer,
     where the floating tab bar covered it — clear the bar's height. */
  .lqpb-post { margin-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------- Responsive: small phones ---------------- */
@media (max-width: 480px) {
  .bb-header-in { padding: 10px 14px; gap: 10px; }
  .bb-logo .bb-logo-script { font-size: 28px; }
  .bb-logo .bb-logo-caps { font-size: 9px; letter-spacing: 0.44em; }
  .bb-header .bb-btn { min-height: 38px; padding: 0 14px; font-size: 11.5px; margin-left: auto; }
  .bb-navbtn { width: 40px; height: 40px; }
  .bb-navbtn span { left: 10px; right: 10px; }
  .bb-navbtn span:nth-child(1) { top: 14px; }
  .bb-navbtn span:nth-child(2) { top: 19px; }
  .bb-navbtn span:nth-child(3) { top: 24px; }
  .bb-navbtn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .bb-navbtn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bb-card-link, .bb-btn, .bb-btn-ghost, .bb-btn-dark, .bb-navbtn span { transition: none; }
}