/* ============================================================
   BARESPACE TEMPLATE STYLES  —  the boutique design system.
   Everything keys off --accent (set from config.brandColor),
   so one colour recolours the whole site. Rarely touch this.
   ============================================================ */

:root {
  --accent: #7c1d3a;                                   /* set at runtime from config */
  --ink: #1c1c1a;
  --muted: #6f6a66;
  --bg: #ffffff;
  --warm: #faf6f2;                                     /* warm off-white base */
  --soft: color-mix(in srgb, var(--accent) 7%, #ffffff); /* brand-tinted panel */
  --line: #ece7e1;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 2px;            /* corner shape, set by the theme */
  --card: #ffffff;          /* card surface — a theme can darken it */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }

body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.7; font-weight: 300; overflow-x: clip; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.1; }

section { max-width: 1120px; margin: 0 auto; padding: 6rem 1.5rem; }

.section-eyebrow, .eyebrow {
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .75rem;
}
.section-head { text-align: center; margin-bottom: 3rem; }

/* Buttons */
.btn {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: .95rem 2.4rem; border-radius: var(--radius); font-family: var(--sans);
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: transform .2s ease, opacity .2s ease;
}
.btn { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, opacity .2s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 45%, transparent); }

/* NAV — solid refined bar, sits above the hero */
nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 2.5rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
/* Owner-controlled logo size (config.logoSize, 100 = default). */
.logo { font-family: var(--serif); font-weight: 600; font-size: calc(1.5rem * var(--logo-scale, 1)); color: var(--ink); letter-spacing: .04em; line-height: 1.1; }
.logo img { height: calc(38px * var(--logo-scale, 1)); max-width: min(52vw, 420px); object-fit: contain; display: block; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { background: var(--accent); color: #fff !important; padding: .55rem 1.3rem; border-radius: var(--radius); }


/* Mobile hamburger (hidden on desktop, shown < 640px) */
.nav-toggle { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; cursor: pointer; padding: 0; z-index: 25; }
.nav-toggle span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, top .3s ease; }
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 10px; }
.nav-toggle span:nth-child(3) { top: 18px; }
nav.open .nav-toggle span:nth-child(1) { top: 10px; transform: rotate(45deg); }
nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.open .nav-toggle span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* HERO — full-bleed photo, editorial headline, two CTAs, rating */
.hero {
  position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: center; justify-content: center;
  text-align: center; background: var(--ink); color: #fff; padding: 6rem 1.5rem; overflow: hidden;
}
/* photo layer — slow cinematic zoom (Ken Burns) behind the scrim */
.hero-photo { position: absolute; inset: -2%; z-index: 0; background: center/cover no-repeat;
  animation: kenburns 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
/* An eyebrow the owner has deliberately cleared (e.g. the hero address) leaves
   no gap above the headline. */
.eyebrow.is-empty { display: none; }
/* config.scrollStyle = "parallax": the hero holds still and the page lifts over
   it. Wide viewports only — iOS Safari ignores a fixed backdrop. */
@media (min-width: 861px) {
  .scroll-parallax .hero-photo { inset: 0; background-attachment: fixed; background-size: cover; animation: none; transform: none; }
}
/* richer scrim: vignette for focus + stronger top/bottom so text always reads */
.hero-scrim { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(125% 95% at 50% 32%, transparent 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,.58) 100%),
  linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 42%, rgba(0,0,0,.72) 100%); }
.hero-inner { position: relative; z-index: 2; max-width: 900px; text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.hero .eyebrow { color: rgba(255,255,255,.85); letter-spacing: .3em; }
.hero-h1 { font-family: var(--serif); font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1.28; font-weight: 500; margin-bottom: 1.4rem; }
.hero-h1 em { font-style: italic; color: var(--accent); display: block; margin-top: .5em; font-size: .8em; line-height: 1.15; }
.caps .hero-h1 { letter-spacing: .03em; line-height: 1.3; }
.hero-tag { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 34rem; margin: 0 auto 2rem; }
.hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.btn-outline { background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff; box-shadow: none; }
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.hero-rating { margin-top: 1.6rem; font-size: .9rem; color: rgba(255,255,255,.85); }
.hero-rating .stars { color: var(--accent); letter-spacing: .12em; margin-right: .4rem; }

/* ABOUT — editorial split: photo beside the copy (the lassie-style rhythm) */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.about-media { aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--soft) center/cover no-repeat; box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.about-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.about-copy .section-eyebrow { margin: 0; }
.about-copy h2 { margin: 0; }
.about-text { font-family: var(--serif); font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.55; color: var(--ink); font-style: italic; }
.btn-arrow { display: inline-block; margin-left: .55em; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.btn:hover .btn-arrow { transform: translateX(4px); }
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; gap: 2rem; }
  .about-media { aspect-ratio: 16 / 11; }
}

/* SERVICES — editorial two-column (heading/intro beside the list) */
.services { background: var(--soft); max-width: none; }
.services-inner { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; max-width: 1120px; margin: 0 auto; }
.services-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; position: sticky; top: 96px; }
.services-head h2 { margin: 0; }
.services-head .section-eyebrow { margin: 0; }
.services-intro { color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 30ch; }
.service-list { columns: 1; }
.svc { break-inside: avoid; display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.svc-name { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; }
.svc-name small { display: block; font-family: var(--sans); font-size: .78rem; color: var(--muted); font-weight: 300; margin-top: .12rem; line-height: 1.6; }
/* Formatted description blocks — spans, not <p>/<ul>: the description sits
   inside <small> inside a <span>, where the parser would hoist a real block. */
.svc-desc .rt-p, .svc-desc .rt-h, .svc-desc .rt-ul, .svc-desc .rt-li { display: block; }
.svc-desc .rt-p + .rt-p, .svc-desc .rt-ul, .svc-desc .rt-p + .rt-h { margin-top: .6rem; }
.svc-desc .rt-h { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-top: .8rem; margin-bottom: .2rem; }
.svc-desc .rt-h:first-child { margin-top: 0; }
.svc-desc .rt-li { position: relative; padding-left: .9rem; }
.svc-desc .rt-li::before { content: "·"; position: absolute; left: .2rem; color: var(--accent); }
.svc-desc strong { font-weight: 600; color: var(--ink); }
.svc-book { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.svc-book:hover { border-bottom-color: var(--accent); }
.svc-price { font-family: var(--sans); color: var(--accent); font-weight: 600; font-size: .95rem; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.service-list.collapsed .svc:nth-child(n+9) { display: none; }  /* show first 8, rest behind "View all" */
.svc-toggle-wrap { text-align: center; margin-top: 1.9rem; }
.svc-toggle { display: inline-block; text-decoration: none; cursor: pointer; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .75rem 1.7rem; border-radius: var(--radius); transition: background .2s ease, color .2s ease; }
.svc-toggle:hover { background: var(--accent); color: #fff; }
/* Category-grouped menu (services pulled from the booking link) */
.service-list[data-categorized="1"] { border-top: 0; }
.svc-cat { margin-bottom: 1.8rem; }
.svc-cat-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: 0; border-top: 2px solid var(--ink); cursor: pointer; text-align: left; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0; padding: 1.2rem 0 .4rem; }
.svc-cat-meta { display: inline-flex; align-items: center; gap: .6rem; }
.svc-cat-n { font-size: .72rem; color: var(--muted); }
.svc-cat-chev { transition: transform .25s ease; }
.svc-cat.closed .svc-cat-chev { transform: rotate(-90deg); }
.svc-cat.closed .svc-cat-items { display: none; }
@media (max-width: 760px) {
  .services-inner { grid-template-columns: 1fr; gap: 2rem; }
  .services-head { position: static; }
}

/* GALLERY — even grid (uniform tiles, centered — no left-stacking) */
/* Flex (not grid) so an incomplete last row CENTERS instead of orphaning photos.
   --gcols (set by main.js) drives per-row count; tablet 2-up; phones swipe. */
.gallery-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 1080px; margin: 0 auto; }
@media (min-width: 901px) {
  .gallery-grid { max-width: var(--gmax, 1080px); margin: 0 auto; }
}
.gallery-grid .gal { overflow: hidden; border-radius: var(--radius); flex: 0 1 calc((100% - (var(--gcols, 3) - 1) * 1rem) / var(--gcols, 3)); }
.gallery-grid img { width: 100%; aspect-ratio: 4/5; height: auto; display: block; object-fit: cover; }
@media (max-width: 900px) { .gallery-grid .gal { flex-basis: calc((100% - 1rem) / 2); } }
/* Phones keep a tidy 2-up masonry (natural aspect — never a single giant column) */
/* Phone: horizontal swipe carousel (snap + peek) instead of stacked */
@media (max-width: 600px) {
  .gallery-grid { columns: auto; display: flex; flex-wrap: nowrap; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -1.25rem; padding: 0 1.25rem .5rem; max-width: none; }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-grid .gal { flex: 0 0 80%; scroll-snap-align: center; margin: 0; }
  .gallery-grid img { width: 100%; height: 60vh; height: 60svh; max-height: 440px; object-fit: cover; }
  /* Reviews swipe sideways on phones too (was messily stacked) */
  .reviews-grid { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: none; margin: 2rem -1.25rem 0; padding: 0 1.25rem .5rem; }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid .review-card { flex: 0 0 85%; scroll-snap-align: center; margin: 0; }
}

/* TEAM */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem; max-width: 1080px; margin: 0 auto; }
.team-card { text-align: center; }
.team-photo { width: 100%; aspect-ratio: 3 / 4; background: var(--soft) center/cover no-repeat; border-radius: var(--radius); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.team-card:hover .team-photo { transform: translateY(-6px); }
.team-card figcaption { margin-top: 1rem; }
.team-card h3 { font-family: var(--serif); font-size: 1.3rem; }
.team-card p { color: var(--muted); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .25rem; }
/* Bio: a readable sentence or two under the role, so it must drop the role's
   uppercase mono-label treatment entirely. */
.team-card .team-bio { font-size: .88rem; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: .6rem; text-align: left; white-space: pre-line; }
/* Awards & recognition — photo + caption cards (title · organisation · year).
   Photos use `contain` (not `cover`) so certificates/plaques are never cropped. */
.awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.8rem; max-width: 1080px; margin: 0 auto; }
.award-card { text-align: center; }
.award-photo { width: 100%; aspect-ratio: 4 / 5; background: var(--soft) center/contain no-repeat; background-origin: content-box; padding: 1.1rem; box-sizing: border-box; border-radius: var(--radius); border: 1px solid var(--line, rgba(0,0,0,.08)); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.award-card:hover .award-photo { transform: translateY(-6px); }
.award-photo--empty { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--accent); }
.award-card figcaption { margin-top: 1rem; }
.award-card h3 { font-family: var(--serif); font-size: 1.2rem; }
.award-meta { color: var(--muted); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .3rem; }
@media (max-width: 560px) { .awards-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.gallery-grid .gal:hover img { transform: scale(1.05); }

/* FEEDS / REVIEWS */
.feed, .reviews { text-align: center; }
.reviews { background: var(--soft); max-width: none; }
.feed-slot { margin-top: 2rem; }
.ig-follow { text-align: center; margin-bottom: 1.6rem; }
.ig-follow:empty { display: none; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 64rem; margin: 2rem auto 0; }
.review-stat { display: inline-flex; align-items: baseline; gap: .6rem; margin-top: 1rem; }
.review-stat .num { font-family: var(--serif); font-size: 3rem; color: var(--accent); line-height: 1; }
.review-stat .stars { color: var(--accent); letter-spacing: .1em; font-size: 1.2rem; }
.review-stat .count { color: var(--muted); font-size: .9rem; }
.reviews-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; max-width: 1000px; margin: 2.5rem auto 0; text-align: left; }
.reviews-grid .review-card { flex: 1 1 280px; max-width: 340px; }
.review-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.review-card .stars { color: var(--accent); letter-spacing: .08em; margin-bottom: .6rem; }
.stars-edit .star-pick { cursor: pointer; opacity: .3; transition: opacity .12s; }
.stars-edit .star-pick.on, .stars-edit .star-pick:hover { opacity: 1; }
.review-card .rtext { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink); margin-bottom: .8rem; }
.review-card .rauthor { font-size: .82rem; color: var(--muted); font-weight: 500; }
.review-cta { text-align: center; margin-top: 2.5rem; }
.review-cta:empty { display: none; }

/* CONTACT */
.contact { text-align: center; max-width: 720px; }
.contact-line { font-size: 1.05rem; color: var(--muted); margin: .3rem 0; }
.contact .btn { margin-top: 1.75rem; }
.socials { margin-top: 2rem; }
.socials a { display: inline-block; margin: 0 .75rem; color: var(--ink); font-weight: 500; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.socials a:hover { color: var(--accent); }

/* FOOTER */
footer { text-align: center; padding: 3rem 1.5rem; color: var(--muted); font-size: .82rem; letter-spacing: .05em; background: var(--warm); }

/* ===== SUBPAGES (blog posts + standalone pages) ===== */
.post { max-width: 760px; margin: 0 auto; padding: 8rem 1.5rem 5rem; }
.post-eyebrow { font-family: var(--sans); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.post-title { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; color: var(--ink); }
.post-lede { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--muted); margin-top: 1.1rem; }
.post-cover { width: 100%; aspect-ratio: 16 / 9; background: var(--soft) center/cover no-repeat; border-radius: var(--radius); margin: 2.5rem 0; box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.post-body { font-family: var(--sans); font-size: 1.06rem; line-height: 1.8; color: var(--ink); }
.post-body > * + * { margin-top: 1.2rem; }
.post-body h2 { font-family: var(--serif); font-size: 1.9rem; line-height: 1.2; margin-top: 2.4rem; }
.post-body h3 { font-family: var(--serif); font-size: 1.4rem; margin-top: 1.8rem; }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li + li { margin-top: .5rem; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 1.6rem 0; }
.post-body blockquote { border-left: 3px solid var(--accent); padding-left: 1.2rem; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--muted); }
.post-foot { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.post-foot a.back { color: var(--muted); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.post-foot a.back:hover { color: var(--accent); }

/* ---- Rich page layouts: a course list and a priced treatment menu --------
   Subpages load only this stylesheet, so these work under every layout. Built
   on the same tokens as the rest of the template, so a theme restyles them for
   free. A course list or a price menu needs more room than an article measure,
   hence .post-wide. */
/* Every rhythm change below is scoped to .post-wide, so existing articles and
   posts are visually untouched. */
.post.post-wide { max-width: 1000px; }
.post-wide .post-eyebrow:empty { display: none; }
.post-wide .post-title { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.02em; }
.post-wide .post-lede {
  font-size: clamp(1.15rem, 2vw, 1.5rem); max-width: 30ch;
  margin-top: 1.4rem; padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--line);
}
/* A cover on a wide page is the hero, not an illustration mid-article */
.post-wide .post-cover {
  aspect-ratio: 21 / 9; margin: 2.75rem 0 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.16);
}
.post-wide .post-body { margin-top: 2.75rem; max-width: 62ch; }
.post-wide .post-body h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-top: 3.25rem;
}
.post-wide .post-foot { margin-top: 4.5rem; }

/* Course list */
.pl-wrap { margin-top: 3rem; }
.pl-group {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--ink);
  margin: 3rem 0 .25rem;
}
.pl-group:first-child { margin-top: 0; }
.pl { display: flex; flex-direction: column; }
.pl-row { border-top: 1px solid var(--line); }
.pl-row:last-child { border-bottom: 1px solid var(--line); }
.pl-head {
  width: 100%; background: none; border: 0; cursor: pointer; color: inherit;
  font-family: inherit; text-align: left;
  display: grid; grid-template-columns: 1fr auto auto; gap: .3rem 1.25rem; align-items: baseline;
  padding: 1.35rem .2rem; transition: background-color .25s;
}
.pl-head:hover { background: var(--soft); }
.pl-head.pl-static { cursor: default; grid-template-columns: 1fr auto; }
.pl-head.pl-static:hover { background: none; }
.pl-name {
  font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.28; color: var(--ink);
}
.pl-head[aria-expanded="true"] .pl-name { color: var(--accent); }
.pl-meta {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums;
}
.pl-sign { position: relative; width: 1.1rem; height: 1.1rem; }
.pl-sign::before, .pl-sign::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: var(--muted); transition: transform .34s cubic-bezier(.16,1,.3,1);
}
.pl-sign::after { transform: rotate(90deg); }
.pl-head[aria-expanded="true"] .pl-sign::before { background: var(--accent); }
.pl-head[aria-expanded="true"] .pl-sign::after { transform: rotate(0deg); background: var(--accent); }
.pl-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1); }
.pl-row.open .pl-body { grid-template-rows: 1fr; }
.pl-body > div { overflow: hidden; }
.pl-lede {
  font-family: var(--serif); font-style: italic; font-size: 1.1rem;
  color: var(--muted); padding: 0 .2rem .4rem;
}
.pl-detail { padding: 0 .2rem 1.75rem; }
.pl-detail p { font-size: 1rem; line-height: 1.75; color: var(--ink); }
.pl-detail p + p { margin-top: .55rem; }
.pl-note { padding: 0 .2rem 1.2rem; font-size: .95rem; color: var(--muted); }

/* Priced treatment menu */
.pm-wrap { margin-top: 3rem; }
.pm-group + .pm-group { margin-top: 3.25rem; }
.pm-title {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--ink);
  margin-bottom: .6rem;
}
.pm { display: flex; flex-direction: column; }
.pm-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem;
  padding: .95rem .15rem; border-top: 1px solid var(--line);
}
.pm-row:last-child { border-bottom: 1px solid var(--line); }
.pm-name { font-family: var(--sans); font-size: 1rem; color: var(--ink); flex: 0 1 auto; }
/* A leader ties the name to its price instead of leaving a long empty gap */
.pm-lead {
  flex: 1 1 1.5rem; min-width: 1.5rem; align-self: center;
  border-bottom: 1px dotted var(--line);
}
.pm-price {
  font-family: var(--serif); font-size: 1.08rem; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto;
}
.pm-note { flex: 0 0 100%; font-size: .82rem; color: var(--muted); }
.pm-flag {
  display: inline-block; margin-left: .5rem; vertical-align: .08em;
  font-family: var(--sans); font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: .16rem .4rem;
}

/* A page's secondary call to action sits quieter than the primary one */
.post-foot .btn-quiet {
  background: none; color: var(--ink); border: 1px solid var(--line);
}
.post-foot .btn-quiet:hover { border-color: var(--accent); color: var(--accent); }

/* Journal index (list of posts) */
.journal { max-width: 1100px; margin: 0 auto; padding: 8rem 1.5rem 5rem; }
.journal-head { text-align: center; margin-bottom: 3.5rem; }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.journal-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.journal-card .jc-cover { width: 100%; aspect-ratio: 4 / 3; background: var(--soft) center/cover no-repeat; border-radius: var(--radius); overflow: hidden; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.journal-card:hover .jc-cover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.journal-card .jc-date { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 1rem 0 .4rem; }
.journal-card h3 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.journal-card p { color: var(--muted); font-size: .95rem; line-height: 1.6; margin-top: .5rem; }
@media (max-width: 640px) {
  .post { padding-top: 6rem; }
  .journal { padding-top: 6rem; }
  .journal-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ===== Theme variations (driven by body class from the chosen theme) ===== */

/* Condensed / uppercase headings (Modern Mono, Bold Barber) */
.caps h2, .caps h3 { text-transform: uppercase; letter-spacing: .02em; }
/* (All themes now use the full-bleed photo hero — no solid/light hero variants.) */

/* Card corners follow the theme too */
.service-card { border-radius: var(--radius); }

/* Opening hours */
.hours { max-width: 360px; margin: 1.75rem auto 0; text-align: left; }
.hours-row { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink); }
.hours-row span:last-child { color: var(--muted); }

/* Google map */
.map { margin-top: 2.5rem; }
.map iframe { width: 100%; height: 360px; border: 0; border-radius: var(--radius); display: block; }

/* Instagram blockquote grid */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 1000px; margin: 2rem auto 0; }
@media (max-width: 720px) { .ig-grid { grid-template-columns: 1fr; } }

/* ===== Engaging hover micro-interactions ===== */
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0; background: var(--accent); transition: width .28s cubic-bezier(.16,1,.3,1); }
.nav-links a:not(.nav-cta):hover::after { width: 100%; }

.svc { position: relative; transition: background .25s ease, padding-left .3s cubic-bezier(.16,1,.3,1); }
.svc::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 0; background: var(--accent); border-radius: 3px; transition: width .3s cubic-bezier(.16,1,.3,1); }
.svc-name { display: inline-block; transition: transform .25s cubic-bezier(.16,1,.3,1), color .25s ease; }
.svc:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); padding-left: 1.1rem; }
.svc:hover::before { width: 3px; }
.svc:hover .svc-name { color: var(--accent); transform: translateX(4px); }

/* Premium card lift + faint accent ring on hover */
.review-card, .team-card .team-photo { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.review-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(0,0,0,.12), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Thin scroll-progress bar (futuristic accent line, top of viewport) */
#bs-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9998;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); transition: width .1s linear; }

/* Image reveal mask — photos wipe up instead of fading */
.gal { opacity: 1 !important; transform: none !important; overflow: hidden; }
.gal img { clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), filter .4s ease; }
.in .gal img { clip-path: inset(0 0 0 0); transform: scale(1); }
.gal:hover img { transform: scale(1.08); filter: saturate(1.08) brightness(1.03); }

/* Custom cursor */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .gal, .has-cursor .svc { cursor: none; }
#bs-cursor { position: fixed; top: 0; left: 0; width: 26px; height: 26px; border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 9999; will-change: transform; transition: width .22s ease, height .22s ease, background .22s ease; }
#bs-cursor.hover { width: 56px; height: 56px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
@media (pointer: coarse) { #bs-cursor { display: none; } .has-cursor, .has-cursor * { cursor: auto; } }

.review-card { transition: transform .25s ease, box-shadow .25s ease; }
.review-card:hover { transform: translateY(-5px); box-shadow: 0 16px 44px rgba(0,0,0,.10); }

.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.18); transform: translateX(-100%); transition: transform .45s ease; }
.btn:hover::after { transform: translateX(0); }

/* Click-to-edit mode (portal editor) */
.bs-edit .bs-editable { outline: 1px dashed transparent; transition: outline-color .15s ease, background .15s ease; border-radius: 4px; cursor: text; }
.bs-edit .bs-editable:hover { outline-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.bs-edit .bs-editable:focus { outline: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* .bs-pick borrows the editable highlight but opens a panel instead of a text
   caret (the logo), so it must not read as a text field. */
.bs-edit .bs-editable.bs-pick { cursor: pointer; }

/* Scroll-reveal animation — cinematic focus-in: rise + subtle scale + blur→sharp */
.reveal { opacity: 0; transform: translateY(46px) scale(.985); filter: blur(9px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); will-change: opacity, transform, filter; }
.reveal.in { opacity: 1; transform: none; filter: none; }
/* Section headings lead the section in, content follows */
.section-head.reveal { transition-delay: .04s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero-photo { animation: none !important; transform: none !important; }
}

/* Staggered children for grids + service rows (cards/photos/rows rise in sequence) */
.service-card, .gal, .review-card, .svc { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.in .service-card, .in .gal, .in .review-card, .in .svc { opacity: 1; transform: none; }
.in .service-card:nth-child(2), .in .gal:nth-child(2), .in .review-card:nth-child(2), .in .svc:nth-child(2) { transition-delay: .08s; }
.in .service-card:nth-child(3), .in .gal:nth-child(3), .in .review-card:nth-child(3), .in .svc:nth-child(3) { transition-delay: .16s; }
.in .service-card:nth-child(4), .in .gal:nth-child(4), .in .review-card:nth-child(4), .in .svc:nth-child(4) { transition-delay: .24s; }
.in .service-card:nth-child(n+5), .in .gal:nth-child(n+5), .in .svc:nth-child(n+5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .svc { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Videos */
.videos .video-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; max-width: 58rem; margin: 0 auto; }
.videos .video-grid:has(.video-embed:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
.video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.hero-photo.has-video { background-color: #000; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
.hero-photo.has-video iframe.hero-video { width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media (max-width: 820px) { .videos .video-grid, .videos .video-grid:has(.video-embed:nth-child(2)) { grid-template-columns: 1fr; } }

/* Kinetic marquee band */
.marquee { overflow: hidden; white-space: nowrap; padding: 2.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee-track { display: inline-block; animation: marquee 26s linear infinite; }
.marquee span { font-family: var(--marquee-font, var(--serif)); font-size: clamp(2.2rem, 6vw, 4.5rem); font-weight: 600; padding: 0 1.2rem; text-transform: uppercase; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1px var(--accent); }
.marquee.is-static { text-align: center; white-space: normal; }
/* A static banner must not rise, scale and un-blur as you scroll past it. The
   scrolling band hides that with its own motion; standing still it reads as a
   jump (CS: "still slightly jumpy"). Fade only. */
.marquee.is-static.reveal { transform: none; filter: none; transition: opacity .6s ease; }
.marquee.is-static .marquee-track { animation: none; transform: none; display: block; }
.marquee.is-static span { padding: 0; }
.marquee span.fill { color: var(--accent); -webkit-text-stroke: 0; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

@media (max-width: 640px) {
  nav { position: sticky; } /* containing block for the absolutely-pinned toggle */
  .nav-toggle { display: block; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); }
  /* nav links become a slide-down panel toggled by the hamburger */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
    padding: .25rem 1.25rem 1.1rem; box-shadow: 0 18px 40px rgba(0,0,0,.12);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
  }
  nav.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  /* Instagram posts swipe sideways on phones instead of stacking */
  .ig-grid { display: flex; grid-template-columns: none; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: -1.25rem; margin-right: -1.25rem; padding: 0 1.25rem .5rem; }
  .ig-grid::-webkit-scrollbar { display: none; }
  .ig-grid > * { flex: 0 0 85%; scroll-snap-align: center; margin: 0 !important; min-width: 0; }
  .nav-links a { display: block; font-size: .95rem; }
  .nav-links a:not(.nav-cta) { padding: .95rem .2rem; border-bottom: 1px solid var(--line); }
  .nav-links a:not(.nav-cta)::after { display: none; }
  .nav-links .nav-cta { text-align: center; margin-top: .9rem; padding: .85rem 1.3rem; }
  section { padding: 4rem 1.25rem; }
  nav { padding: 1rem 1.25rem; }
  .hero { min-height: 82vh; min-height: 82svh; padding: 5rem 1.25rem; }
  /* headline: smaller floor + break long words so the accent never clips off-screen */
  .hero-h1 { font-size: clamp(2rem, 8.5vw, 2.9rem); line-height: 1.25; overflow-wrap: break-word; word-break: break-word; }
  .hero-tag { font-size: 1rem; }
  /* CTAs: stack full-width instead of crowding/clipping side-by-side */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .service-grid { grid-template-columns: 1fr; }
  /* Team swipes sideways on a phone, like the gallery does. Two-up made every
     card tiny and stacking made a big team endless; a carousel keeps the
     section one screen tall however many staff there are. The 76% width leaves
     the next card peeking so it is obvious it scrolls. */
  .team-grid { display: flex; flex-wrap: nowrap; grid-template-columns: none; gap: .8rem;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; max-width: none; margin: 0 -1.25rem; padding: 0 1.25rem .5rem; }
  .team-grid::-webkit-scrollbar { display: none; }
  .team-card { flex: 0 0 76%; scroll-snap-align: center; }
  .team-card h3 { font-size: 1.1rem; }
  .map iframe { height: 280px; }
}

/* Multiple booking buttons ("Book with X" / "Book with Y") */
.book-multi { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Optional Education section (image + text) */
.bs-education { max-width: 1120px; margin: 0 auto; padding: 6rem 1.5rem; }
.bs-education .bs-edu-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); align-items: center; }
.bs-education .bs-edu-inner.no-media { grid-template-columns: 1fr; max-width: 44rem; margin: 0 auto; text-align: center; }
.bs-edu-media { aspect-ratio: 4/5; border-radius: var(--radius); background: var(--soft) center/cover no-repeat; box-shadow: 0 24px 60px rgba(0,0,0,.14); }
/* Two per row, but wrap+centre (like .gallery-grid) so an odd last tile — 3 photos,
   5 photos — sits centred instead of stranded on the left. Flex, not grid: WebKit
   handles the fill more reliably (see the iOS single-tile bug). */
.bs-edu-media--multi { aspect-ratio: auto; background: none; box-shadow: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.bs-edu-media--multi .bs-edu-tile { flex: 0 1 calc((100% - .55rem) / 2); aspect-ratio: 1; border-radius: var(--radius); background: var(--soft) center/cover no-repeat; box-shadow: 0 16px 44px rgba(0,0,0,.12); }
.bs-edu-copy h2 { margin: .3rem 0 1rem; }
.bs-edu-copy p:not(.section-eyebrow) { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem,2vw,1.5rem); line-height: 1.5; color: var(--ink); }
/* Collection = product list: bold name, description on its own line(s). */
.bs-products .bs-product { font-family: var(--sans); font-style: normal; font-size: 1rem; line-height: 1.55; color: var(--muted); margin: 0 0 1.1rem; }
.bs-products .bs-product:last-child { margin-bottom: 0; }
.bs-products .bs-product-name { display: block; font-family: var(--sans); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.bs-products .bs-product-desc { display: block; margin-top: .15rem; }
.bs-edu-cta { margin-top: 1.6rem; }
@media (max-width: 760px) { .bs-education .bs-edu-inner { grid-template-columns: 1fr; gap: 2rem; } }

/* FAQ accordion — JS-injected before #contact; also powers the FAQPage schema. */
.bs-faq .l-sec-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.bs-faq .l-sec-head h2 { margin: .3rem 0 0; }
.bs-faq-list { max-width: 760px; margin: 0 auto; }
.bs-faq-item { border-top: 1px solid var(--line); }
.bs-faq-item:last-child { border-bottom: 1px solid var(--line); }
.bs-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.3; color: var(--ink); }
.bs-faq-item summary::-webkit-details-marker { display: none; }
.bs-faq-ic { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.bs-faq-ic::before, .bs-faq-ic::after { content: ""; position: absolute; background: var(--accent); transition: transform .25s ease, opacity .25s ease; }
.bs-faq-ic::before { top: 8px; left: 0; width: 18px; height: 2px; }
.bs-faq-ic::after { left: 8px; top: 0; width: 2px; height: 18px; }
.bs-faq-item[open] .bs-faq-ic::after { transform: scaleY(0); opacity: 0; }
.bs-faq-a { padding: 0 0 1.5rem; color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 64ch; }
.bs-faq-a p { margin: 0 0 .7rem; } .bs-faq-a p:last-child { margin-bottom: 0; }
.bs-faq-a ul { margin: 0; padding-left: 1.1rem; } .bs-faq-a li { margin-bottom: .4rem; }

/* Locations hub (multi-branch salons). Cards link to each location's own page. */
.bs-locations { max-width: 1120px; margin: 0 auto; padding: 6rem 1.5rem; }
.bs-locations .l-sec-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.loc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.loc-card { flex: 0 1 calc((100% - 1.4rem) / 2); min-width: 16rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.loc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0,0,0,.13); }
.loc-photo { aspect-ratio: 16/10; background: var(--soft) center/cover no-repeat; }
.loc-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.loc-body h3 { font-family: var(--serif); font-size: 1.35rem; margin: 0; }
.loc-addr, .loc-phone { font-size: .9rem; color: var(--muted); margin: 0; }
.loc-phone a { color: inherit; text-decoration: none; }
.loc-phone a:hover { color: var(--accent); }
.loc-hours { margin: .3rem 0 .2rem; }
.loc-hours .hours-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; color: var(--muted); padding: .2rem 0; border-bottom: 1px solid var(--line); }
.loc-actions { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.loc-more { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.loc-more:hover { text-decoration: underline; }
@media (max-width: 760px) { .loc-card { flex-basis: 100%; } .bs-locations { padding: 4rem 1.25rem; } }

/* Location detail page (server-rendered at /locations/<slug>/) */
.loc-page { max-width: 900px; margin: 0 auto; padding: clamp(3rem,7vw,6rem) 1.5rem; }
.loc-page .loc-hero { aspect-ratio: 16/9; background: var(--soft) center/cover no-repeat; border-radius: var(--radius); margin-bottom: 2.2rem; }
.loc-page h1 { font-family: var(--serif); font-size: clamp(2rem,5vw,3rem); margin: 0 0 .6rem; }
.loc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
.loc-meta h2 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .6rem; }
.loc-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.loc-gallery img { flex: 0 1 calc((100% - 2rem) / 3); aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 700px) { .loc-meta { grid-template-columns: 1fr; gap: 1.4rem; } .loc-gallery img { flex-basis: calc((100% - 1rem) / 2); } }

/* Colour mode — click a region of the page to recolour it. Only active while the
   editor turns it on, so it never affects a live site. */
.bs-colour .bs-ctarget { position: relative; cursor: pointer; outline: 2px dashed transparent; outline-offset: -4px; transition: outline-color .15s ease, background .15s ease; }
.bs-colour .bs-ctarget:hover { outline-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.bs-colour .bs-ctarget:hover::after {
  content: "🎨 " attr(data-clabel); position: absolute; z-index: 60; top: 8px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px;
  white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
/* In colour mode the page is a picker, not a website — don't let links navigate
   away and don't let text editing steal the click. */
.bs-colour .bs-ctarget a, .bs-colour .bs-ctarget button { pointer-events: none; }
.bs-colour .bs-editable { cursor: pointer; }

/* ---- Closing CTA band (pinned just above the contact block) ---------------
   config.closingCta. Optional photo behind it; without one it is a soft accent
   band so it still reads as a full-stop at the end of the page. */
.bs-closing { position: relative; overflow: hidden; max-width: none; margin: 0; padding: clamp(4rem, 9vw, 8rem) 1.25rem; text-align: center; background: var(--soft); }
.bs-closing-bg { position: absolute; inset: 0; background: center/cover no-repeat; }
.bs-closing.has-photo .bs-closing-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.6)); }
.bs-closing-inner { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bs-closing h2 { font-family: var(--serif); font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.15; margin: 0; }
.bs-closing-text { color: var(--muted); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.bs-closing-btn { margin-top: .4rem; }
.bs-closing.has-photo h2, .bs-closing.has-photo .bs-closing-text { color: #fff; }

/* Remove-this-element control, portal preview only (never on a live site) */
.bs-edit .review-cta { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.bs-del { border: 1px solid currentColor; background: transparent; color: var(--muted); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: .75rem; line-height: 1; padding: 0; opacity: .45; transition: opacity .15s ease, color .15s ease; }
.bs-del:hover { opacity: 1; color: #c0392b; }

/* Long team bios: clamped with a Read more toggle. Never clamped in the portal
   preview - you cannot edit text you cannot see. */
.team-card.is-clamped .team-bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.team-card.is-clamped.is-open .team-bio { -webkit-line-clamp: unset; overflow: visible; }
.bs-edit .team-card.is-clamped .team-bio { -webkit-line-clamp: unset; overflow: visible; }
.team-bio-toggle { display: block; background: none; border: 0; padding: 0 0 2px; margin-top: .45rem; cursor: pointer;
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid currentColor; transition: opacity .2s ease; }
.team-bio-toggle:hover { opacity: .55; }
.bs-edit .team-bio-toggle { display: none; }

/* ---- Collection brands: brand + logo, then that brand's products ---------- */
.bs-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: 1.2rem; }
.bs-brands.is-single { grid-template-columns: 1fr; }
.bs-brand { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: .5rem; }
/* contain, never cover - a cropped brand logo looks like a mistake */
.bs-brand-logo { width: 100%; max-width: 9rem; height: 3.4rem; background: center left/contain no-repeat; }
.bs-brand-name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; margin: 0; }
.bs-brand .bs-products { margin: 0; }

.bs-brand-desc { color: var(--muted); font-size: .92rem; line-height: 1.65; margin: 0; }

/* Team strip arrows — only shown when the strip actually overflows */
.team-strip { position: relative; }
.team-nav { display: none; position: absolute; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink); cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0 0 3px; transform: translateY(-50%);
  box-shadow: 0 6px 20px rgba(0,0,0,.14); transition: opacity .15s ease, background .15s ease; }
.team-strip.has-nav .team-nav { display: block; }
.team-nav.prev { left: -6px; }
.team-nav.next { right: -6px; }
.team-nav:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.team-nav:disabled { opacity: .28; cursor: default; }

/* ---- TikTok section. Cards that open the video on TikTok, not their embed -
   see tiktokCardHtml in main.js for why the player had to go. Portrait 9:16 to
   match the source video, so the cover is never cropped oddly. --- */
.bs-tiktok .tt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.2rem; max-width: 1080px; margin: 0 auto; justify-items: center; }
.bs-tiktok .tt-follow { text-align: center; margin-top: 2rem; }
.tt-card { position: relative; display: block; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; border-radius: var(--radius, 12px);
  overflow: hidden; background: var(--soft, #eee); text-decoration: none; color: #fff;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.tt-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.tt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-poster-empty { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, #1a1a1a), #101010); }
.tt-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.72) 100%); }
/* Play affordance: it has to be obvious the card opens a video, since it no
   longer looks like a player. */
.tt-play { position: absolute; top: 50%; left: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem;
  border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .3s ease; }
.tt-play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-style: solid; border-width: .58rem 0 .58rem .95rem; border-color: transparent transparent transparent #111; }
.tt-card:hover .tt-play { transform: scale(1.08); }
.tt-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem .9rem 1rem; font-size: .78rem; line-height: 1.45;
  color: #fff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  .bs-tiktok .tt-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .tt-cap { font-size: .7rem; -webkit-line-clamp: 2; padding: .6rem .6rem .7rem; }
  .tt-play { width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; }
  .tt-play::after { border-width: .44rem 0 .44rem .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-card, .tt-play { transition: none; }
  .tt-card:hover { transform: none; }
}

/* Team photo shape - config.teamShape. Landscape staff photos were being cropped
   to portrait and losing their sides. */
.team-grid[data-shape="square"] .team-photo { aspect-ratio: 1 / 1; }
.team-grid[data-shape="landscape"] .team-photo { aspect-ratio: 4 / 3; }

/* Hero slideshow layers — cross-fade inside .hero-photo so the Ken Burns zoom
   and parallax on the container still apply. */
.hero-slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity 1.4s ease-in-out; }
.hero-slide.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

/* Banner: every second word in its own colour (config.marqueeAlternate).
   The outline treatment is dropped on alternating words - an outlined word in a
   second colour reads as a rendering fault rather than a choice. */
.marquee.is-alt span i { font-style: normal; -webkit-text-stroke: 0; }
.marquee.is-alt span i.w-base { color: var(--accent); }
.marquee.is-alt span i.w-alt { color: var(--marquee-alt, var(--ink)); }
/* Every repeat must look identical. The band's normal rhythm is outlined words
   with every third repeat solid; keeping that under alternating colours meant
   two repeats in three rendered as faint ghosts with the alternate words
   punched through, which read as broken. Alternating replaces that rhythm
   rather than layering on top of it. */
.marquee.is-alt span, .marquee.is-alt span.fill { color: var(--accent); -webkit-text-stroke: 0; }

/* Custom sections borrowing a built-in layout (config.customSections[].layout) */
.bs-custom-cards, .bs-custom-brands, .bs-custom-photos, .bs-custom-faq { max-width: 1120px; margin: 0 auto; padding: 6rem 1.5rem; }
.bs-custom-cards .section-head, .bs-custom-brands .section-head, .bs-custom-photos .section-head, .bs-custom-faq .section-head { text-align: center; margin-bottom: 3rem; }
/* A duplicated photo set / Q&A block: same furniture as the built-in gallery and
   FAQ, so a second one is indistinguishable from the real thing. */
.bs-custom-photos .bs-custom-intro { max-width: 46rem; margin: -1.6rem auto 2.4rem; text-align: center; color: var(--muted, #666); line-height: 1.7; }
.bs-custom-cta { text-align: center; margin-top: 2.5rem; }