/* Styles for the "See your site live" demo funnel. Two namespaces:
   .fsb-*  = the funnel chrome (overlay, steps, browser frame, CTAs)
   .sb-*   = the generated sample site (accent driven by --ac/--ac2/--soft set inline per industry)
   Matches the marketing landing's design system (Outfit, indigo→violet gradient, --radius scale). */

.fsb-ov {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(11, 18, 32, 0.55);
  backdrop-filter: blur(8px);
  font-family: "Outfit", system-ui, sans-serif;
  animation: fsb-fade 0.2s ease;
}
@keyframes fsb-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fsb-modal {
  position: relative;
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(11, 18, 32, 0.35);
  animation: fsb-rise 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes fsb-rise {
  from {
    transform: translateY(14px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.fsb-x {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(11, 18, 32, 0.06);
  color: #3a475c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.fsb-x:hover {
  background: rgba(11, 18, 32, 0.12);
}
.fsb-inner {
  padding: 40px 36px;
}

/* steps */
.fsb-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 26px;
}
.fsb-dots span {
  width: 30px;
  height: 5px;
  border-radius: 99px;
  background: #e7ecf4;
  transition: background 0.25s;
}
.fsb-dots span.on {
  background: linear-gradient(120deg, #4f46e5, #7c3aed);
}
.fsb-dots span.done {
  background: #c7ccf7;
}
.fsb-step {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.fsb-count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c3aed;
}
.fsb-step h2 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0b1220;
  margin: 10px 0 6px;
}
.fsb-hint {
  color: var(--muted, #5c6780);
  font-size: 15px;
  margin: 0 0 22px;
}
.fsb-input {
  width: 100%;
  font-family: inherit;
  font-size: 18px;
  color: #0b1220;
  text-align: center;
  background: #f6f8fc;
  border: 2px solid #e7ecf4;
  border-radius: 14px;
  padding: 15px 18px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.fsb-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14);
  background: #fff;
}
.fsb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-top: 16px;
}
.fsb-chip {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #3a475c;
  background: #fff;
  border: 1px solid #e7ecf4;
  border-radius: 99px;
  padding: 9px 15px;
  cursor: pointer;
  transition:
    transform 0.1s,
    border-color 0.15s,
    color 0.15s;
}
.fsb-chip:hover {
  border-color: #4f46e5;
  color: #4f46e5;
  transform: translateY(-1px);
}
/* The second tier of trade chips. Kept behind a toggle so the common dozen stay scannable — forty
   chips in one block is not "more choice", it is a wall to read before you can answer a question. */
.fsb-more {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #4f46e5;
  background: none;
  border: 0;
  padding: 10px 12px; /* keeps the tap target at 44px with the line-height */
  margin-top: 10px;
  cursor: pointer;
  border-radius: 8px;
}
.fsb-more:hover {
  text-decoration: underline;
}
.fsb-chips-more {
  margin-top: 6px;
}
.fsb-chips-more[hidden] {
  display: none; /* [hidden] loses to .fsb-chips' display:flex without this */
}
/* Visually hidden, still announced. NOT display:none or visibility:hidden — both remove the element
   from the accessibility tree, which would defeat the entire point of adding the label. */
.sb-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.fsb-err {
  color: #dc2626;
  font-size: 14px;
  font-weight: 600;
  min-height: 20px;
  margin-top: 12px;
}
.fsb-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.fsb-back {
  font-family: inherit;
  background: none;
  border: none;
  color: var(--muted, #5c6780);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 10px;
}
.fsb-back:hover {
  color: #0b1220;
}
.fsb-next {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border: none;
  border-radius: 13px;
  padding: 14px 26px;
  cursor: pointer;
  background: linear-gradient(120deg, #4f46e5, #7c3aed);
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.32);
  transition:
    filter 0.15s,
    transform 0.1s;
}
.fsb-next:hover {
  filter: brightness(1.07);
}
.fsb-next:active {
  transform: translateY(1px);
}

/* building beat */
.fsb-building {
  text-align: center;
  padding: 40px 10px;
}
.fsb-building h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 22px 0 6px;
}
.fsb-spin {
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border: 4px solid #e7ecf4;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: fsb-spin 0.8s linear infinite;
}
@keyframes fsb-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fsb-spin {
    animation: none;
  }
  .fsb-ov,
  .fsb-modal {
    animation: none;
  }
}

/* result: ribbon + browser frame + CTAs */
.fsb-result {
  animation: fsb-fade 0.3s ease;
}
.fsb-ribbon {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #4f46e5;
  background: #eef0fe;
  border: 1px solid #dfe1fb;
  border-radius: 12px;
  padding: 11px 16px;
  margin-bottom: 18px;
}
.fsb-frame {
  border: 1px solid #e7ecf4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(20, 27, 52, 0.14);
  background: #fff;
}
.fsb-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #f6f8fc;
  border-bottom: 1px solid #e7ecf4;
}
.fsb-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.fsb-dot.r {
  background: #ff5f57;
}
.fsb-dot.y {
  background: #febc2e;
}
.fsb-dot.g {
  background: #28c840;
}
.fsb-addr {
  margin-left: 12px;
  font-size: 12.5px;
  color: var(--muted, #5c6780);
  font-weight: 500;
}
.fsb-screen {
  max-height: 62vh;
  overflow: auto;
}
.fsb-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}
.fsb-get {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: 13px;
  padding: 14px 26px;
  background: linear-gradient(120deg, #4f46e5, #7c3aed);
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.32);
}
.fsb-get:hover {
  filter: brightness(1.07);
}
.fsb-again {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #3a475c;
  background: #fff;
  border: 1px solid #e7ecf4;
  border-radius: 13px;
  padding: 13px 20px;
  cursor: pointer;
}
.fsb-again:hover {
  border-color: #4f46e5;
  color: #4f46e5;
}
.fsb-full {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted, #5c6780);
  text-decoration: none;
}
.fsb-full:hover {
  color: #0b1220;
}
.fsb-legal {
  text-align: center;
  color: #98a1b3;
  font-size: 12.5px;
  margin: 16px auto 0;
  max-width: 520px;
}

/* ── the generated sample site (accent from --ac / --ac2 / --soft, set inline per industry) ───────── */
.sb-site {
  /* --muted was never DEFINED — thirteen call sites all fell through to their own fallback
     (#6b7590 / #6b7891), which measures 4.0-4.3:1 on the cream and off-white grounds these trades
     use: under the 4.5 AA floor for body text on every one of them. Defined once, dark enough to
     clear it, so the fallbacks become what they look like — a fallback. */
  --muted: #5c6780;
  --page-bg: #fff; /* the ground the scroll-shadow fades into */
  /* Full-bleed bands inside (see .ux-quote .sb-reviews) are sized with viewport units, and 100vw
     counts the scrollbar while the content box does not — so they overhang by the scrollbar width
     and the whole page scrolls sideways on a phone. Clipped here, at the one element that spans the
     viewport anyway. `clip` and not `hidden`: hidden would make this a scroll container and change
     what the sticky techniques stick to. */
  overflow-x: clip;

  /* ONE MEASURE for every stacked content section.

     Reported by Alese (2026-07-30): "'why east asia cuisine' is all the way to the left, ignoring
     the margin. We want that to be more uniform automatically." It was not one stray section — 21
     sections were centred at SEVEN different widths (720 / 780 / 860 / 900 / 940 / 980 / 1000), so
     every band down the page started and ended on a different vertical line and the whole thing read
     ragged. Centring hides this from whoever wrote each section and shows it to everyone else.

     940px matches what the footer and hero already used, so header, body and footer now share one
     spine. Deliberately NOT applied to reading columns (.sb-hero-in, .sb-page) or small components
     (.sb-quotez, .sb-ticket, .sb-estdia): those are narrow because prose and dialogs should be, and
     they are centred inside the spine rather than defining their own edge. */
  --sec: 940px;
  /* --body/--display are set per ARCHETYPE (see siteVars in lib/sitebuilder.js). Outfit remains the
     fallback, so anything without an archetype renders exactly as before. The eight design looks
     set their own faces later in this file and still win. */
  font-family: var(--body, "Outfit", system-ui, sans-serif);
  color: #0b1220;
  background: #fff;
}
/* The display face is what makes two menu-led businesses read as different companies rather than
   the same site with different words. */
.sb-site h1,
.sb-site h2,
.sb-site h3,
.sb-site .sb-secttl,
.sb-site .sb-name {
  font-family: var(--display, "Outfit", system-ui, sans-serif);
}
.sb-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid #eef1f6;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.sb-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}
.sb-logo-img {
  height: 34px;
  max-width: 150px;
  object-fit: contain;
  border-radius: 6px;
}
.sb-name {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.sb-nav {
  display: flex;
  gap: 18px;
  margin-left: auto;
}
.sb-nav span {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted, #5c6780);
}
.sb-nav span.on {
  color: var(--ac);
  font-weight: 700;
}
.sb-book {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  background: var(--ac);
  cursor: default;
}
.sb-nav + .sb-book {
  margin-left: 4px;
}
.sb-hero {
  background: linear-gradient(180deg, var(--soft), #fff);
  padding: 46px 26px 40px;
  text-align: center;
}
.sb-hero-in {
  max-width: 620px;
  margin: 0 auto;
}
.sb-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 99px;
  padding: 6px 14px;
  margin-bottom: 16px;
}
.sb-hero h1 {
  font-size: clamp(26px, 5.4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  /* Break BETWEEN words only — never inside one — and even out the resulting lines. */
  hyphens: none;
  overflow-wrap: break-word; /* last resort for a single unbroken 30-character word */
  word-break: normal;
  text-wrap: balance;
}
/* Every headline the generator writes, so no business name is ever split mid-word. */
.sb-name,
.sb-secttl,
.sb-split h3,
.sb-band h2 {
  hyphens: none;
  word-break: normal;
  text-wrap: balance;
}
.sb-hero p {
  font-size: 17px;
  color: #3a475c;
  margin: 0 auto 22px;
  max-width: 520px;
  line-height: 1.5;
}
.sb-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.sb-cta .sb-book {
  font-size: 15px;
  padding: 12px 24px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}
.sb-ghost {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ac);
  background: #fff;
  border: 1.5px solid var(--ac);
  border-radius: 10px;
  padding: 12px 22px;
  cursor: default;
}
.sb-body {
  padding: 34px 26px 8px;
  max-width: var(--sec);
  margin: 0 auto;
}
.sb-secttl {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac);
  text-align: center;
  margin-bottom: 18px;
}
.sb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sb-card {
  border: 1px solid #eef1f6;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 27, 52, 0.05);
}
.sb-thumb {
  height: 78px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--soft), var(--ac2));
  opacity: 0.85;
}
.sb-card b {
  font-size: 14px;
  font-weight: 700;
}
.sb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.sb-price {
  font-weight: 800;
  color: var(--ac);
  font-size: 14px;
}
.sb-add {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--soft);
  color: var(--ac);
  font-weight: 800;
}
.sb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  /* Same content box as every other section block (.sb-body/.sb-menu/.sb-steps/.sb-faq). Without
     this the "Why <business>" column hugged the viewport edge while its neighbours were inset. */
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sb-split h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.sb-why ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb-why li {
  position: relative;
  padding-left: 26px;
  color: #3a475c;
  font-size: 15px;
}
.sb-why li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ac);
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.sb-hours {
  font-weight: 600;
  color: #0b1220;
  margin: 0 0 4px;
}
.sb-loc {
  color: var(--muted, #5c6780);
  margin: 0 0 12px;
}
.sb-map {
  height: 96px;
  border-radius: 12px;
  background: linear-gradient(120deg, #eef1f6, var(--soft));
  border: 1px solid #eef1f6;
}
.sb-reviews {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  /* On the spine like every sibling section (.sb-faq, .sb-shop, .sb-gal, .sb-menu). It was the one
     band with `margin: 30px 0` and no max-width, so it ran to the full width of .sb-site and then
     added its own 16px padding on top — measured 15px past the viewport at 390px, which is the only
     thing making a generated site scroll sideways on a phone. It also sat outside the shared measure
     the .sb-site comment above exists to enforce. */
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 16px 26px;
  box-sizing: border-box;
  /* max-width alone does not save this on a phone: 940px never binds at 390px, and a nowrap flex row
     refuses to shrink below its content, so the strip stayed wider than the screen. It has to be
     allowed to wrap. */
  flex-wrap: wrap;
  text-align: center;
  background: var(--soft);
  border-radius: 14px;
}
.sb-stars {
  color: var(--ac);
  font-size: 18px;
  letter-spacing: 2px;
}
.sb-rvnote {
  color: var(--muted, #5c6780);
  font-size: 13.5px;
  font-style: italic;
  min-width: 0; /* a flex item's default min-width:auto is what stops the line breaking */
}
.sb-foot {
  text-align: center;
  padding: 20px;
  color: #98a1b3;
  font-size: 13px;
  border-top: 1px solid #eef1f6;
  margin-top: 20px;
}
.sb-foot b {
  color: #4f46e5;
}

/* ── design refresh: bolder hero, trust bar, richer cards + CTAs ─────────────────────────────── */
.sb-hero {
  padding: 58px 26px 46px;
  background: radial-gradient(760px 320px at 50% -12%, var(--soft), #fff 72%);
}
.sb-hero h1 {
  font-size: clamp(32px, 6.5vw, 56px);
  margin-bottom: 10px;
}
.sb-hero .sb-kicker {
  font-size: clamp(18px, 2.7vw, 24px);
  font-weight: 700;
  color: var(--ac);
  letter-spacing: -0.01em;
  max-width: 580px;
  margin: 0 auto 8px;
}
.sb-hero .sb-sub {
  font-size: 16.5px;
  color: #3a475c;
  max-width: 500px;
  margin: 0 auto 26px;
  line-height: 1.55;
}
.sb-book {
  transition:
    filter 0.15s,
    transform 0.1s;
}
.sb-book.lg {
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}
/* trust bar — the credibility signals that lift conversion */
.sb-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  padding: 15px 22px;
  background: var(--soft);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.sb-trust-b {
  font-size: 13.5px;
  font-weight: 600;
  color: #0b1220;
  white-space: nowrap;
}
/* offering cards: flush image, tidy body, a pill CTA */
.sb-card {
  padding: 0;
  overflow: hidden;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.sb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 27, 52, 0.1);
}
.sb-thumb {
  height: 104px;
  margin-bottom: 0;
  border-radius: 0;
  opacity: 1;
  background: linear-gradient(140deg, var(--soft), var(--ac2));
}
.sb-card-b {
  padding: 12px 13px 14px;
}
.sb-add {
  width: auto;
  height: auto;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* CTAs inside the lower sections */
.sb-why > .sb-book,
.sb-visit .sb-call {
  margin-top: 16px;
}
.sb-call {
  width: 100%;
}
.sb-visit .sb-map {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .fsb-inner {
    padding: 30px 20px;
  }
  /* The nav used to be display:none here with NOTHING replacing it — no hamburger, no drawer, no
     rail — so a phone visitor's only navigation was the footer, four to eight screens down. The
     technique that would have fixed it (tabRail) is layout-kind and gated off by default, which
     means in practice nobody got it. A horizontal rail is the smallest thing that restores
     navigation without a menu to open: the items stay visible, and four short labels mostly fit
     without scrolling at 390px anyway. */
  .sb-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    margin: 0 -4px;
    padding: 0 4px;
  }
  .sb-nav::-webkit-scrollbar {
    display: none;
  }
  .sb-nav span {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .sb-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sb-split {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   HERO SCENE + MOTION — the per-industry scroll-assembled signature animation (lib/scenes.js) plus
   reveal-on-scroll and card-tilt plumbing. demo-site.js drives layer transforms; CSS owns the props
   (plate, barbell, steam…), the FINALE keyframes (the slam + burst), and reduced-motion stills.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.sb-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
  max-width: var(--sec);
  margin: 0 auto;
}
@media (min-width: 800px) {
  .sb-hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    text-align: left;
  }
  .sb-hero-grid .sb-hero-in {
    margin: 0;
  }
  .sb-hero-grid .sb-cta {
    justify-content: flex-start;
  }
  .sb-hero-grid .sb-hero-in p {
    margin-left: 0;
  }
}
.sb-scene {
  position: relative;
  height: 300px;
  min-width: 260px;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.sb-scene .ly {
  position: absolute;
  left: 50%;
  top: 50%;
  will-change: transform, opacity;
  line-height: 1;
  filter: drop-shadow(0 10px 16px rgba(15, 21, 38, 0.18));
}
/* CSS-drawn props */
.sb-scene .plate {
  width: 190px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #fff, #e7e2d8 68%, #cfc8ba);
  box-shadow: 0 14px 22px rgba(15, 21, 38, 0.16);
}
.sb-scene .steam {
  width: 10px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0),
    rgba(120, 120, 120, 0.35)
  );
  animation: steamRise 2.6s ease-in-out infinite;
}
.sb-scene .steam.s2 {
  animation-delay: 1.2s;
  height: 38px;
}
@keyframes steamRise {
  0% {
    transform: translate(-50%, -50%) translateY(6px) scaleY(0.7);
    opacity: 0;
  }
  40% {
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) translateY(-26px) scaleY(1.15);
    opacity: 0;
  }
}
.sb-scene .shine {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 58%
  );
  mix-blend-mode: screen;
}
.sb-scene .bar {
  width: 240px;
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #b9c2cf, #6b7686 60%, #99a3b2);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35);
}
.sb-scene .pl {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #3a4352, #12161e 72%);
  border: 4px solid #232b38;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.4);
}
.sb-scene .pl.sm {
  width: 38px;
  height: 38px;
  border-width: 3px;
}
.sb-scene .dust {
  width: 56px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(160, 160, 160, 0.55),
    transparent 70%
  );
}
.sb-scene .open {
  width: 96px;
  height: 40px;
  border-radius: 9px;
  background: #16a34a;
  color: #fff;
  font:
    800 17px/40px "Outfit",
    sans-serif;
  text-align: center;
  letter-spacing: 0.14em;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
}
.sb-scene .open::after {
  content: "OPEN";
}
/* FINALE — the hero piece slams home with an overshoot; bursts pop; props react. */
.sb-scene.finale .hit {
  animation: sceneSlam 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
.sb-scene.finale .burst {
  animation: burstPop 0.7s cubic-bezier(0.18, 1.25, 0.4, 1) 0.18s both;
}
.sb-scene.finale .shine {
  animation: shineSweep 0.9s ease-out 0.1s both;
}
.sb-scene.finale .dust {
  animation: dustPuff 0.6s ease-out 0.12s both;
}
.sb-scene.finale.still .hit,
.sb-scene.finale.still .burst,
.sb-scene.finale.still .dust {
  animation: none;
  opacity: 1;
}
@keyframes sceneSlam {
  0% {
    margin-top: -70px;
  }
  55% {
    margin-top: 10px;
  }
  75% {
    margin-top: -6px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes burstPop {
  0% {
    opacity: 0;
    scale: 0.3;
  }
  60% {
    opacity: 1;
    scale: 1.25;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes shineSweep {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(-90px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateX(90px);
  }
}
@keyframes dustPuff {
  0% {
    opacity: 0;
    scale: 0.4;
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    scale: 1.8;
  }
}
/* Reveal-on-scroll + card tilt plumbing (added by demo-site.js) */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.sb-card {
  transition:
    transform 0.18s ease,
    box-shadow 0.25s ease;
  transform-style: preserve-3d;
}
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sb-scene .steam {
    animation: none;
    opacity: 0.5;
  }
}
@media (max-width: 799px) {
  .sb-scene {
    height: 230px;
    margin-top: -6px;
  }
  .sb-scene .ly {
    zoom: 0.82;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   DEPTH SECTIONS — ticker, photo cards, grouped menu, gallery, numbered steps, FAQ, closing band.
   Base styles here; the industry identities below re-flavor them (leaders, corners, dark surfaces).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.sb-ticker {
  overflow: hidden;
  border-block: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--soft);
}
.sb-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  white-space: nowrap;
  padding: 11px 0;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ac);
  animation: sbTicker 26s linear infinite;
  will-change: transform;
}
.sb-ticker-track i {
  font-style: normal;
  opacity: 0.45;
}
@keyframes sbTicker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.33%);
  }
}
.sb-thumb {
  overflow: hidden;
  position: relative;
}
.sb-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sb-card:hover .sb-thumb img {
  transform: scale(1.07);
}
.sb-menu {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sb-menu-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 42px;
}
.sb-menu-g h4 {
  font-size: 15px;
  margin: 14px 0 8px;
  color: var(--ac);
  letter-spacing: 0.04em;
}
.sb-mi {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
}
.sb-mi-n {
  font-weight: 600;
  font-size: 14.5px;
}
.sb-mi-n em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  /* 0.5 alpha measured 3.90:1 on the light grounds — under the 4.5 AA floor for body text on EVERY
     trade, which is the sort of thing a prospect's accessibility consultant finds, not us. */
  color: rgba(0, 0, 0, 0.62);
  margin-top: 2px;
}
.sb-mi-dots {
  flex: 1;
  border-bottom: 2px dotted rgba(0, 0, 0, 0.22);
  transform: translateY(-4px);
}
.sb-mi-p {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sb-gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 26px; /* had the width but not the inset — same edge-hugging on narrow screens */
  max-width: var(--sec);
  margin: 30px auto 8px;
  padding: 0 26px;
}
.sb-gal-ph {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--soft);
}
.sb-gal-ph.wide {
  grid-column: span 2;
  aspect-ratio: auto;
}
.sb-gal-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sb-gal-ph:hover img {
  transform: scale(1.05);
}
.sb-steps {
  max-width: var(--sec);
  margin: 34px auto 4px;
  padding: 0 26px;
}
.sb-steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sb-step {
  position: relative;
  padding: 18px 4px 4px;
}
.sb-step-n {
  display: block;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  color: var(--ac);
  opacity: 0.22;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
}
.sb-step b {
  font-size: 15.5px;
}
.sb-step p {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.55);
}
.sb-faq {
  max-width: var(--sec);
  margin: 30px auto 8px;
  padding: 0 26px;
}
.sb-qa {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sb-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 2px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  list-style: none;
}
.sb-qa summary::-webkit-details-marker {
  display: none;
}
.sb-qa-x {
  font-size: 20px;
  font-weight: 400;
  color: var(--ac);
  transition: transform 0.25s;
}
.sb-qa[open] .sb-qa-x {
  transform: rotate(45deg);
}
.sb-qa p {
  margin: 0 0 15px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.6);
  /* The FAQ section widened from 720px to the shared --sec so its EDGE lines up with every other
     band. An answer set across the full 940px would run past 110 characters a line, which is the
     opposite of readable — so the section aligns and the prose keeps a sane measure inside it. */
  max-width: 68ch;
}
.sb-band {
  text-align: center;
  padding: 56px 26px 60px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
}
.sb-band h2 {
  font-size: clamp(24px, 4.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.sb-band .sb-book {
  background: #fff;
  color: var(--ac);
}
@media (max-width: 720px) {
  .sb-menu-cols,
  .sb-steps-row {
    grid-template-columns: 1fr;
  }
  .sb-gal {
    grid-template-columns: 1fr 1fr;
  }
  .sb-gal-ph.wide {
    grid-column: span 2;
  }
}

/* ── Hero VARIANTS (each industry declares one — center / split / full) ─────────────────────────── */
/* ── Industry-specific sections ─────────────────────────────────────────────────────────────────── */
.sb-team {
  max-width: var(--sec);
  margin: 34px auto 6px;
  padding: 0 26px;
}
.sb-team-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: center;
}
.sb-team-av {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 10px;
  border-radius: 50%;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
}
.sb-team-av.av0 {
  background: linear-gradient(135deg, var(--ac), var(--ac2));
}
.sb-team-av.av1 {
  background: linear-gradient(135deg, var(--ac2), var(--ac));
}
.sb-team-av.av2 {
  background: var(--ac);
}
.sb-team-m b {
  font-size: 15.5px;
}
.sb-team-m p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.55);
}
.sb-sched {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sb-sched-wrap {
  overflow-x: auto;
  border-radius: 14px;
  /* The timetable is 620px wide minimum, so on a phone it scrolls inside here — correctly, the page
     itself does not move. But it scrolled with no scrollbar and no edge cue, so the single most
     used element on a gym's site looked like it had been cropped. This is the pure-CSS scroll
     shadow: the two `local` layers sit on the content and slide away with it, the two `scroll`
     layers stay pinned, so a shadow shows only on a side that has more to see.  */
  background:
    linear-gradient(to right, var(--page-bg, #fff) 30%, transparent) left
      center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--page-bg, #fff) 30%, transparent) right
      center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.18), transparent)
      left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.18), transparent)
      right center / 14px 100% no-repeat scroll;
}
.sb-sched table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}
.sb-sched th {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 8px;
  text-align: center;
  opacity: 0.7;
}
.sb-sched td {
  padding: 7px 6px;
  text-align: center;
  border-top: 1px solid rgba(127, 127, 127, 0.15);
}
.sb-sched-t {
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0.7;
}
.sb-sched-c {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--soft);
  color: var(--ac);
  white-space: nowrap;
}
.sb-shop {
  max-width: var(--sec);
  margin: 30px auto 8px;
  padding: 0 26px;
}
.sb-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 18px;
}
.sb-shop-ph {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--soft);
  margin-bottom: 10px;
}
.sb-shop-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sb-shop-it:hover .sb-shop-ph img {
  transform: scale(1.06);
}
.sb-shop-it b {
  display: block;
  font-size: 14px;
}
.sb-shop-it span {
  font-size: 13.5px;
  color: rgba(0, 0, 0, 0.55);
  font-variant-numeric: tabular-nums;
}
.ba2-pair {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sb-ba {
  max-width: var(--sec);
  margin: 30px auto 8px;
  padding: 0 26px;
}
.sb-ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ba2-x {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 4px;
  background: var(--soft);
}
.ba2-x img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-ba-ph {
  position: relative; /* .sb-ba-tag is absolute — without this both tags escape to the page corner */
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 4px;
  background: var(--soft);
}
.sb-ba-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sb-ba-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  background: #16202e;
  color: #fff;
}
.ba2-x:last-child .sb-ba-tag {
  background: var(--ac);
}
/* ── Rich footer (common industry pages: About us, Careers, …) ──────────────────────────────────── */
.sb-footer {
  border-top: 1px solid rgba(127, 127, 127, 0.18);
  margin-top: 26px;
}
.sb-footer-in {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 40px;
  justify-content: space-between;
  align-items: flex-start;
  max-width: var(--sec);
  margin: 0 auto;
  padding: 30px 26px 8px;
}
.sb-footer-brand {
  max-width: 320px;
}
.sb-footer-brand b {
  font-size: 16px;
}
.sb-footer-brand p {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: 0.6;
}
.sb-footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px 28px;
}
.sb-fl {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
  cursor: default;
}
.sb-fl:hover {
  opacity: 1;
  color: var(--ac);
}
@media (max-width: 720px) {
  .sb-team-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .sb-shop-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sb-ba-row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   INDUSTRY IDENTITIES — each template is a genuinely different site, not a palette-swapped clone:
   its own typography, surfaces and shapes (scoped .sb-site.ind-*). These are the DEFAULT "Signature"
   design per category; the explicit look-* classes (below, later in the cascade) still override.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* ☕ CAFE — warm paper, cozy chunky serif, hand-baked menu-board feel. */
.sb-site.ind-cafe {
  background: #faf3e7;
  color: #3d2c1e;
  font-family: "Outfit", sans-serif;
}
.sb-site.ind-cafe .sb-top {
  background: rgba(250, 243, 231, 0.94);
  border-bottom: 1px dashed #d9c9ae;
}
.sb-site.ind-cafe .sb-name,
.sb-site.ind-cafe .sb-hero h1,
.sb-site.ind-cafe .sb-secttl,
.sb-site.ind-cafe .sb-split h3 {
  font-family: "Fraunces", Georgia, serif;
}
.sb-site.ind-cafe .sb-hero {
  background:
    radial-gradient(1100px 420px at 70% -10%, #f3e2c4, transparent), #faf3e7;
}
.sb-site.ind-cafe .sb-hero h1 {
  font-weight: 900;
  letter-spacing: -0.01em;
}
.sb-site.ind-cafe .sb-eyebrow {
  background: #fff8ec;
  border: 1px dashed #d9c9ae;
  color: #8a5a22;
}
.sb-site.ind-cafe .sb-card {
  background: #fffaf0;
  border: 1px solid #ecdcc0;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(120, 82, 30, 0.1);
}
.sb-site.ind-cafe .sb-thumb {
  border-radius: 12px 12px 4px 4px;
}
.sb-site.ind-cafe .sb-book {
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(180, 83, 9, 0.3);
}
.sb-site.ind-cafe .sb-hero p {
  color: #6d5843;
}
/* 💇 SALON — high-fashion elegance: airy white + blush, fine italic serif, hairline rules. */
.sb-site.ind-salon {
  background: #fffbfc;
  color: #2c2126;
}
.sb-site.ind-salon .sb-name,
.sb-site.ind-salon .sb-hero h1,
.sb-site.ind-salon .sb-secttl,
.sb-site.ind-salon .sb-split h3,
.sb-site.ind-salon .sb-card b {
  font-family: "Cormorant Garamond", Georgia, serif;
}
.sb-site.ind-salon .sb-hero h1 {
  font-weight: 600;
  font-style: italic;
  font-size: clamp(36px, 6.4vw, 58px);
  letter-spacing: 0.01em;
}
.sb-site.ind-salon .sb-hero {
  background: linear-gradient(180deg, #fdf0f5, #fffbfc);
}
.sb-site.ind-salon .sb-eyebrow {
  background: transparent;
  border: none;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 11px;
  padding: 4px 2px;
}
.sb-site.ind-salon .sb-card {
  border: 1px solid #f3dfe8;
  border-radius: 4px;
  box-shadow: none;
}
.sb-site.ind-salon .sb-card:hover {
  box-shadow: 0 16px 36px rgba(219, 39, 119, 0.12);
}
.sb-site.ind-salon .sb-thumb {
  border-radius: 100px 100px 4px 4px;
}
.sb-site.ind-salon .sb-book,
.sb-site.ind-salon .sb-ghost {
  border-radius: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12.5px;
}
/* 🩺 CLINIC — calm, airy, ultra-rounded; soft clinical light. */
.sb-site.ind-clinic {
  background: #f7fdfe;
  color: #123a44;
}
.sb-site.ind-clinic .sb-hero {
  background: linear-gradient(180deg, #e8fafd, #f7fdfe);
}
.sb-site.ind-clinic .sb-hero h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sb-site.ind-clinic .sb-card {
  border-radius: 22px;
  border: 1px solid #d9f2f7;
  box-shadow: 0 10px 24px rgba(8, 145, 178, 0.08);
}
.sb-site.ind-clinic .sb-thumb {
  border-radius: 18px;
}
.sb-site.ind-clinic .sb-book,
.sb-site.ind-clinic .sb-ghost,
.sb-site.ind-clinic .sb-eyebrow {
  border-radius: 999px;
}
.sb-site.ind-clinic .sb-trust {
  background: #eefcff;
}
/* 🔧 TRADES — industrial: slate steel, condensed caps, safety-stripe underline, hard corners. */
.sb-site.ind-trades {
  background: #f4f6f9;
  color: #16202e;
}
.sb-site.ind-trades .sb-top {
  background: #16202e;
  color: #fff;
  border-bottom: none;
}
.sb-site.ind-trades .sb-top .sb-name {
  color: #fff;
}
.sb-site.ind-trades .sb-nav span {
  color: #9fb0c7;
}
.sb-site.ind-trades .sb-nav span.on {
  color: #fbbf24;
}
.sb-site.ind-trades .sb-name,
.sb-site.ind-trades .sb-hero h1,
.sb-site.ind-trades .sb-secttl,
.sb-site.ind-trades .sb-split h3 {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sb-site.ind-trades .sb-hero {
  background: linear-gradient(180deg, #e8edf4, #f4f6f9);
}
.sb-site.ind-trades .sb-hero h1 {
  font-size: clamp(34px, 6.6vw, 56px);
}
.sb-site.ind-trades .sb-hero h1::after {
  content: "";
  display: block;
  width: 120px;
  height: 8px;
  margin: 12px auto 0;
  background: repeating-linear-gradient(
    -45deg,
    #fbbf24 0 10px,
    #16202e 10px 20px
  );
}
.sb-site.ind-trades .sb-hero-grid .sb-hero-in h1::after {
  margin-left: 0;
}
.sb-site.ind-trades .sb-eyebrow,
.sb-site.ind-trades .sb-book,
.sb-site.ind-trades .sb-ghost,
.sb-site.ind-trades .sb-card,
.sb-site.ind-trades .sb-thumb {
  border-radius: 0;
}
.sb-site.ind-trades .sb-card {
  border: 2px solid #d3dbe6;
  box-shadow: 4px 4px 0 rgba(22, 32, 46, 0.12);
}
/* 🛍️ RETAIL — editorial lookbook: ivory, big italic serif, thin rules, uppercase spaced nav. */
.sb-site.ind-retail {
  background: #fcfbf7;
  color: #191714;
}
.sb-site.ind-retail .sb-name,
.sb-site.ind-retail .sb-hero h1,
.sb-site.ind-retail .sb-secttl,
.sb-site.ind-retail .sb-split h3 {
  font-family: "Fraunces", Georgia, serif;
}
.sb-site.ind-retail .sb-hero {
  background: #fcfbf7;
  border-bottom: 1px solid #191714;
}
.sb-site.ind-retail .sb-hero h1 {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(36px, 6.6vw, 60px);
}
.sb-site.ind-retail .sb-nav span {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11.5px;
}
.sb-site.ind-retail .sb-eyebrow {
  border-radius: 0;
  background: #191714;
  color: #fcfbf7;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 10.5px;
}
.sb-site.ind-retail .sb-card,
.sb-site.ind-retail .sb-thumb,
.sb-site.ind-retail .sb-book,
.sb-site.ind-retail .sb-ghost {
  border-radius: 0;
}
.sb-site.ind-retail .sb-card {
  border: 1px solid #e4e0d5;
  box-shadow: none;
}
.sb-site.ind-retail .sb-card:hover {
  box-shadow: 0 18px 40px rgba(25, 23, 20, 0.12);
}
/* 🏋️ FITNESS — dark energy: near-black gym, neon accent, big condensed italics. */
.sb-site.ind-fitness {
  /* ONE colour system on this page. The category baked #34d399 green into the eyebrow, the ticker
     and the prices while the archetype set --ac to violet, so the gym rendered a violet CTA beside
     green pills beside a lavender class grid — two palettes arguing on one screen, and the violet
     measured 3.10:1 on the near-black ground. --ac-text is the SAME accent lightened until it reads
     on a dark ground, so the page stays in one family and stays legible. */
  --ac-text: color-mix(in oklab, var(--ac) 42%, #fff);
  /* The light-ground muted grey is a dark grey, which is the wrong direction on a near-black page —
     routing the secondary text through the token made it WORSE here (4.00 -> 3.23:1) until this
     existed. Same role, opposite side of the ground. */
  --muted: #a8c2b6;
  --page-bg: #0d1110;
  --sticky-bg: rgba(13, 17, 16, 0.94);
  background: #0d1110;
  color: #e8f5ee;
}
.sb-site.ind-fitness .sb-top {
  background: rgba(13, 17, 16, 0.92);
  border-bottom: 1px solid #1e2a25;
}
.sb-site.ind-fitness .sb-top .sb-name {
  color: #fff;
}
.sb-site.ind-fitness .sb-nav span {
  color: #7d968a;
}
.sb-site.ind-fitness .sb-name,
.sb-site.ind-fitness .sb-hero h1,
.sb-site.ind-fitness .sb-secttl,
.sb-site.ind-fitness .sb-split h3 {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  text-transform: uppercase;
  font-style: italic;
}
.sb-site.ind-fitness .sb-hero {
  background:
    radial-gradient(
      900px 400px at 30% -20%,
      rgba(52, 211, 153, 0.16),
      transparent
    ),
    #0d1110;
}
.sb-site.ind-fitness .sb-hero h1 {
  color: #fff;
  font-size: clamp(38px, 7vw, 62px);
}
.sb-site.ind-fitness .sb-hero p {
  color: #a8c2b6;
}
.sb-site.ind-fitness .sb-eyebrow {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}
.sb-site.ind-fitness .sb-card {
  background: #131a17;
  border: 1px solid #223129;
  border-radius: 14px;
  box-shadow: none;
}
.sb-site.ind-fitness .sb-card b,
.sb-site.ind-fitness .sb-split h3 {
  color: #fff;
}
.sb-site.ind-fitness .sb-secttl,
.sb-site.ind-fitness .sb-price {
  color: var(--ac-text);
}
.sb-site.ind-fitness .sb-why li,
.sb-site.ind-fitness .sb-hours,
.sb-site.ind-fitness .sb-loc {
  color: #a8c2b6;
}
.sb-site.ind-fitness .sb-trust {
  background: #101614;
}
.sb-site.ind-fitness .sb-trust-b {
  color: #a8c2b6;
}
.sb-site.ind-fitness .sb-reviews {
  background: #101614;
}
.sb-site.ind-fitness .sb-foot {
  background: #0a0d0c;
  color: #7d968a;
}
.sb-site.ind-fitness .sb-ghost {
  background: transparent;
  color: #34d399;
}
/* ✨ GENERIC — clean neutral slate (deliberately NOT the FlipsideUS indigo). */
.sb-site.ind-generic {
  background: #f8fafb;
  color: #17222b;
}
.sb-site.ind-generic .sb-hero {
  background: linear-gradient(180deg, #eef3f6, #f8fafb);
}
.sb-site.ind-generic .sb-card {
  border-radius: 14px;
  border: 1px solid #e2eaef;
}
/* Depth-section flavoring per identity */
.sb-site.ind-cafe .sb-mi-dots {
  border-bottom-style: dashed;
  border-color: #cbb08a;
}
.sb-site.ind-cafe .sb-gal-ph {
  border-radius: 16px 16px 4px 4px;
}
.sb-site.ind-cafe .sb-menu-g h4 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 19px;
}
.sb-site.ind-salon .sb-gal-ph {
  border-radius: 0;
}
.sb-site.ind-salon .sb-gal-ph:first-child {
  border-radius: 200px 200px 0 0;
}
.sb-site.ind-salon .sb-menu-g h4 {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 21px;
}
.sb-site.ind-salon .sb-mi-dots {
  border-bottom: 1px solid #ecd6e1;
}
.sb-site.ind-salon .sb-ticker {
  border-block-color: #f3dfe8;
  background: #fdf0f5;
}
.sb-site.ind-clinic .sb-gal-ph {
  border-radius: 22px;
}
.sb-site.ind-clinic .sb-step-n {
  opacity: 0.3;
}
.sb-site.ind-trades .sb-gal-ph,
.sb-site.ind-trades .sb-band .sb-book {
  border-radius: 0;
}
.sb-site.ind-trades .sb-menu-g h4,
.sb-site.ind-trades .sb-step b {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
}
.sb-site.ind-trades .sb-ticker {
  background: #16202e;
  border: none;
}
.sb-site.ind-trades .sb-ticker-track {
  color: #fbbf24;
}
.sb-site.ind-retail .sb-gal-ph {
  border-radius: 0;
}
.sb-site.ind-retail .sb-menu-g h4 {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 20px;
}
.sb-site.ind-retail .sb-ticker {
  background: #191714;
  border: none;
}
.sb-site.ind-retail .sb-ticker-track {
  color: #fcfbf7;
}
.sb-site.ind-fitness .sb-ticker {
  background: #101614;
  border-block-color: #1e2a25;
}
.sb-site.ind-fitness .sb-ticker-track {
  color: #34d399;
}
.sb-site.ind-fitness .sb-menu-g h4,
.sb-site.ind-fitness .sb-step b {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  color: #fff;
}
.sb-site.ind-fitness .sb-mi-n {
  color: #e8f5ee;
}
.sb-site.ind-fitness .sb-mi-n em {
  color: #7d968a;
}
.sb-site.ind-fitness .sb-mi-p {
  color: var(--ac-text);
}
.sb-site.ind-fitness .sb-mi-dots {
  border-color: #2c3d35;
}
.sb-site.ind-fitness .sb-step p {
  color: #a8c2b6;
}
.sb-site.ind-fitness .sb-step-n {
  opacity: 0.4;
}
.sb-site.ind-fitness .sb-qa {
  border-color: #223129;
}
.sb-site.ind-fitness .sb-qa summary {
  color: #e8f5ee;
}
.sb-site.ind-fitness .sb-qa p {
  color: #a8c2b6;
}
.sb-site.ind-fitness .sb-gal-ph {
  border-radius: 12px;
}
.sb-site.ind-fitness .sb-band {
  background: linear-gradient(135deg, #065f46, #34d399);
}
.sb-site.ind-fitness .sb-sched th {
  color: #7d968a;
}
.sb-site.ind-fitness .sb-sched td {
  border-top-color: #1e2a25;
}
.sb-site.ind-fitness .sb-sched-t {
  color: #7d968a;
}
.sb-site.ind-fitness .sb-sched-c {
  background: #17241f;
  color: #34d399;
}
.sb-site.ind-fitness .sb-footer {
  border-top-color: #1e2a25;
}
.sb-site.ind-fitness .sb-fl {
  color: #a8c2b6;
}
.sb-site.ind-retail .sb-shop-ph {
  border-radius: 0;
}
.sb-site.ind-retail .sb-shop-it b {
  font-family: "Fraunces", serif;
}
.sb-site.ind-retail .sb-footer {
  border-top: 1px solid #191714;
}
.sb-site.ind-salon .sb-team-av {
  border-radius: 200px 200px 8px 8px;
}
.sb-site.ind-trades .sb-sched-c,
.sb-site.ind-trades .sb-team-av {
  border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   DESIGN LOOKS — a prospect flips the generated sample-site between these on demo-site.html. Each is
   a pure reskin of the SAME .sb-site markup (see sitebuilder DESIGN_LOOKS), scoped to `.sb-site.look-*`
   so switching is an instant class swap. The industry accent (--ac/--ac2/--soft) carries through every
   look; what changes is the typography, hero treatment, card + button shape. Base .sb-site = Signature.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* 🎬 Cinematic — elegant serif, tall dramatic hero, pill buttons, hairline cards (wedding/venue feel). */
.sb-site.look-cinematic .sb-name,
.sb-site.look-cinematic .sb-hero h1,
.sb-site.look-cinematic .sb-secttl,
.sb-site.look-cinematic .sb-split h3,
.sb-site.look-cinematic .sb-card b {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: 0;
}
.sb-site.look-cinematic .sb-hero {
  background: linear-gradient(180deg, var(--soft), #fff);
  padding: 78px 26px 60px;
}
.sb-site.look-cinematic .sb-hero h1 {
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 800;
}
.sb-site.look-cinematic .sb-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  background: transparent;
  border-color: transparent;
}
.sb-site.look-cinematic .sb-book,
.sb-site.look-cinematic .sb-ghost {
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.sb-site.look-cinematic .sb-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  box-shadow: none;
}
.sb-site.look-cinematic .sb-secttl {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ac);
}

/* ✨ Aurora Glass — vivid gradient hero with white text, frosted translucent cards. */
.sb-site.look-aurora .sb-hero {
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
  padding: 60px 26px 54px;
}
.sb-site.look-aurora .sb-hero h1,
.sb-site.look-aurora .sb-hero p {
  color: #fff;
}
.sb-site.look-aurora .sb-eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
}
.sb-site.look-aurora .sb-cta .sb-book {
  background: #fff;
  color: var(--ac);
}
.sb-site.look-aurora .sb-hero .sb-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
}
.sb-site.look-aurora .sb-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 12px 30px rgba(20, 27, 52, 0.08);
}
.sb-site.look-aurora .sb-book,
.sb-site.look-aurora .sb-ghost {
  border-radius: 12px;
}

/* 📰 Editorial — serif, hairline rules, LEFT-aligned hero, square corners (newspaper feel). */
.sb-site.look-editorial {
  font-family: Georgia, "Times New Roman", serif;
}
.sb-site.look-editorial .sb-hero {
  background: #fff;
  text-align: left;
  border-bottom: 2px solid #0b1220;
  padding: 40px 26px 34px;
}
.sb-site.look-editorial .sb-hero-in {
  margin: 0;
}
.sb-site.look-editorial .sb-cta {
  justify-content: flex-start;
}
.sb-site.look-editorial .sb-hero h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sb-site.look-editorial .sb-hero p {
  margin-left: 0;
}
.sb-site.look-editorial .sb-eyebrow {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-color: #0b1220;
}
.sb-site.look-editorial .sb-book,
.sb-site.look-editorial .sb-ghost,
.sb-site.look-editorial .sb-card,
.sb-site.look-editorial .sb-thumb {
  border-radius: 0;
}
.sb-site.look-editorial .sb-card {
  border: 1px solid #d7ddea;
  box-shadow: none;
}

/* 🍱 Soft Bento — big rounded surfaces, pastel soft fills, playful + friendly. */
.sb-site.look-bento .sb-hero {
  margin: 16px;
  border-radius: 26px;
  background: var(--soft);
  padding: 44px 26px;
}
.sb-site.look-bento .sb-card {
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 26px rgba(20, 27, 52, 0.07);
}
.sb-site.look-bento .sb-thumb {
  border-radius: 16px;
}
.sb-site.look-bento .sb-book,
.sb-site.look-bento .sb-ghost {
  border-radius: 999px;
}
.sb-site.look-bento .sb-eyebrow {
  border-radius: 999px;
  background: #fff;
}

/* 🔲 Bold — neo-brutalist: heavy weights, hard borders, offset shadows, square corners. */
.sb-site.look-bold {
  font-weight: 500;
}
.sb-site.look-bold .sb-name,
.sb-site.look-bold .sb-hero h1,
.sb-site.look-bold .sb-secttl,
.sb-site.look-bold .sb-split h3 {
  font-weight: 900;
  letter-spacing: -0.02em;
}
.sb-site.look-bold .sb-hero {
  background: var(--soft);
  border-bottom: 3px solid #0b1220;
}
.sb-site.look-bold .sb-eyebrow {
  border: 2px solid #0b1220;
  border-radius: 0;
  background: #fff;
  font-weight: 800;
}
.sb-site.look-bold .sb-book {
  border-radius: 0;
  border: 2px solid #0b1220;
  box-shadow: 4px 4px 0 #0b1220;
}
.sb-site.look-bold .sb-ghost {
  border-radius: 0;
  border: 2px solid #0b1220;
  color: #0b1220;
  box-shadow: 4px 4px 0 #0b1220;
}
.sb-site.look-bold .sb-card {
  border-radius: 0;
  border: 2px solid #0b1220;
  box-shadow: 5px 5px 0 rgba(11, 18, 32, 0.9);
}
.sb-site.look-bold .sb-thumb {
  border-radius: 0;
  border-bottom: 2px solid #0b1220;
}

/* The switcher bar (demo-site.html) — a scrollable row of look buttons above the framed sample. */
.ds-looks {
  max-width: 1000px;
  margin: 18px auto 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ds-looks-lbl {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted, #5c6780);
  letter-spacing: 0.02em;
  margin-right: 4px;
}
.ds-look {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2e3a52;
  background: #fff;
  border: 1.5px solid #dfe4ee;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.05s;
}
.ds-look:hover {
  border-color: #a9b3c8;
}
.ds-look:active {
  transform: translateY(1px);
}
.ds-look.on {
  color: #fff;
  background: linear-gradient(120deg, #4f46e5, #7c3aed);
  border-color: transparent;
}
.ds-look .em {
  margin-right: 5px;
}
@media (max-width: 680px) {
  .ds-looks-lbl {
    width: 100%;
    margin-bottom: 2px;
  }
}

/* Hero BACKGROUND media (None/Photo/Video toggle on demo-site.html) — a layer behind the hero content
   with a dark overlay so the name/tagline stay legible. Injected by demo-site.js; works over any look. */
.sb-hero.has-media {
  position: relative;
}
.sb-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.sb-hero-media img,
.sb-hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* GLOBAL scrim: mood and edge legibility. Deliberately not strong enough on its own — a scrim heavy
   enough to guarantee contrast over a white sky (0.66+) turns every hero photo to mud, which is why
   the guarantee lives on the text box below instead. */
.sb-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 17, 28, 0.38),
    rgba(12, 17, 28, 0.7)
  );
}
.sb-hero.has-media .sb-hero-in {
  position: relative;
  z-index: 1;
}
/* LOCAL scrim, behind the copy only.
   The photo is chosen by the business and changes per site, so its brightness under the headline is
   unknowable — you cannot measure your way to safety here, you can only put a floor under it. The
   worst case is white text over a white sky: with the global scrim alone that measured 2.1:1, which
   is unreadable. This adds a second layer bounded to the 620px text box so the combined alpha under
   the words never drops below the level heroScrim.test.js asserts, while the rest of the photo keeps
   its light. Soft falloff and negative inset so there is no visible rectangle edge. */
.sb-hero.has-media .sb-hero-in::before {
  content: "";
  position: absolute;
  inset: -9% -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    125% 105% at 50% 50%,
    rgba(8, 12, 20, 0.58) 0%,
    rgba(8, 12, 20, 0.55) 62%,
    rgba(8, 12, 20, 0) 100%
  );
}
.sb-hero.has-media h1,
.sb-hero.has-media .sb-kicker,
.sb-hero.has-media .sb-sub {
  color: #fff !important;
}
/* The chip behind the eyebrow was rgba(255,255,255,0.18) — a WHITE wash under WHITE text, which
   lightens the one layer that needed to stay dark and cost ~4:1 of the contrast the scrims had just
   bought back. Same frosted look, opposite direction: tint the chip DARK and let the border carry
   the edge. */
.sb-hero.has-media .sb-eyebrow {
  color: #fff !important;
  background: rgba(8, 12, 20, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.sb-hero.has-media .sb-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
}

/* Divider + label between the two banner groups (looks | background) on demo-site.html. */
.ds-sep {
  width: 1px;
  height: 20px;
  background: #dfe4ee;
  flex: 0 0 auto;
  margin: 0 4px;
}

/* ── Sub-pages (careers / about / contact / info) — same shell, real-site feel ─────────────────── */
.sb-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 26px 44px;
  min-height: 46vh;
}
.sb-page h2 {
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
}
.sb-page p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 14px;
  opacity: 0.85;
}
.sb-page-lead {
  font-size: 16px !important;
  opacity: 0.7 !important;
}
.sb-crumb {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac);
  cursor: pointer;
  margin-bottom: 6px;
}
.sb-crumb:hover {
  text-decoration: underline;
}
.sb-home {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.sb-nav span {
  cursor: pointer;
}
.sb-fl {
  cursor: pointer;
}
.sb-jobs {
  display: grid;
  gap: 14px;
  margin: 20px 0 26px;
}
.sb-job {
  border: 1px solid rgba(127, 127, 127, 0.25);
  border-radius: 14px;
  padding: 18px 20px;
}
.sb-job-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sb-job-h b {
  font-size: 16.5px;
}
.sb-job-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ac);
}
.sb-job p {
  margin: 8px 0 14px;
  font-size: 14px;
}
.sb-apply {
  border: 2px solid var(--ac);
  border-radius: 16px;
  padding: 20px;
  display: grid;
  gap: 10px;
}
.sb-apply h3 {
  margin: 0 0 4px;
}
.sb-apply input,
.sb-apply textarea,
.sb-contact-form input,
.sb-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14.5px;
  padding: 11px 13px;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 10px;
  background: transparent;
  color: inherit;
}
.sb-apply-note {
  font-size: 12.5px !important;
  opacity: 0.65 !important;
  margin: 2px 0 0 !important;
}
.sb-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 18px;
}
.sb-contact-card {
  border: 1px solid rgba(127, 127, 127, 0.25);
  border-radius: 16px;
  padding: 18px 20px;
}
.sb-contact-form {
  display: grid;
  gap: 10px;
  align-content: start;
}
.sb-contact-form h3 {
  margin: 0;
}
.sb-about-ph {
  border-radius: 16px;
  overflow: hidden;
  margin: 6px 0 18px;
  aspect-ratio: 5/2.4;
  background: var(--soft);
}
.sb-about-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-about-list {
  margin: 4px 0 22px;
  padding: 0 0 0 2px;
  list-style: none;
  display: grid;
  gap: 8px;
}
.sb-about-list li {
  font-weight: 600;
  font-size: 14px;
}
.sb-about-list li::before {
  content: "✓ ";
  color: var(--ac);
  font-weight: 900;
}
.sb-form-done {
  text-align: center;
  padding: 10px 4px;
}
.sb-form-done p {
  margin-top: 8px;
}
.sb-site.ind-fitness .sb-job,
.sb-site.ind-fitness .sb-contact-card {
  border-color: #223129;
  background: #131a17;
}
.sb-site.ind-trades .sb-job,
.sb-site.ind-trades .sb-apply,
.sb-site.ind-trades .sb-contact-card,
.sb-site.ind-trades .sb-about-ph {
  border-radius: 0;
}
.sb-site.ind-retail .sb-job,
.sb-site.ind-retail .sb-apply,
.sb-site.ind-retail .sb-about-ph {
  border-radius: 0;
}
@media (max-width: 680px) {
  .sb-contact {
    grid-template-columns: 1fr;
  }
}

/* ═══ Signature FX chrome (per-industry eye-catchers + universal conversion, demo-site.js mountFx) ═══ */
/* Kinetic headline: letters rise in one by one */
.kchar {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(3deg);
  animation: kcharIn 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}
@keyframes kcharIn {
  to {
    opacity: 1;
    transform: none;
  }
}
/* Open-now pill in the shared header */
.sb-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #15803d;
  background: #e7f4ec;
  border-radius: 100px;
  padding: 4px 10px;
  margin-left: 10px;
  white-space: nowrap;
}
.sb-open i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  animation: openPulse 2.2s ease-in-out infinite;
}
@keyframes openPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0);
  }
}
.sb-site.ind-fitness .sb-open {
  background: rgba(52, 211, 153, 0.14);
  color: #34d399;
}
/* Sticky CTA bar (appears when the hero scrolls away) */
.ds-cta-bar {
  position: fixed;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  z-index: 70;
  transition: bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ds-cta-bar.show {
  bottom: 18px;
}
.ds-cta-bar button {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  background: linear-gradient(120deg, #4f46e5, #7c3aed);
  box-shadow: 0 14px 34px rgba(31, 27, 74, 0.4);
}
.ds-cta-bar button:hover {
  filter: brightness(1.08);
}
/* Confetti burst */
.ds-confetti {
  position: fixed;
  z-index: 300;
  pointer-events: none;
}
.ds-confetti i {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiFly 1.1s cubic-bezier(0.16, 0.8, 0.4, 1) both;
}
@keyframes confettiFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--cx), calc(var(--cy) + 120px)) rotate(var(--cr));
  }
}
/* ☕ Latte fill line (page edge) */
.ds-fill {
  position: fixed;
  right: 14px;
  top: 16vh;
  height: 62vh;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.ds-fill .cup {
  font-size: 26px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s;
}
.ds-fill .track {
  flex: 1;
  width: 8px;
  border-radius: 10px;
  background: rgba(120, 80, 30, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
}
.ds-fill .fill {
  width: 100%;
  background: linear-gradient(180deg, #d7a86e, #8a5a22);
  border-radius: 10px;
  transition: height 0.15s linear;
}
.ds-fill.full .cup {
  animation: cupPop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes cupPop {
  40% {
    transform: scale(1.6) rotate(-8deg);
  }
}
/* 💇 Scissor cursor + snip pulse */
.sb-site.ind-salon .sb-menu.snippable {
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><text y='20' font-size='19'>✂️</text></svg>")
      13 13,
    pointer;
}
.ds-snip {
  position: fixed;
  z-index: 300;
  font-size: 26px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: snipPulse 0.65s ease-out both;
}
@keyframes snipPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6) rotate(-20deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.7) rotate(15deg);
    opacity: 0;
  }
}
/* 🦷 Whitening tooth */
.ds-tooth {
  position: fixed;
  left: 16px;
  bottom: 18px;
  z-index: 60;
  pointer-events: none;
}
.ds-tooth span {
  font-size: 40px;
  display: inline-block;
  filter: brightness(0.72) saturate(0.7);
  transition: filter 0.15s linear;
}
.ds-tooth em {
  position: absolute;
  right: -8px;
  top: -6px;
  font-style: normal;
  font-size: 20px;
  opacity: 0;
  transform: scale(0.3);
  transition: all 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.ds-tooth.bright em {
  opacity: 1;
  transform: scale(1);
}
/* 🔧 Spirit level */
.ds-level {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
  text-align: center;
}
.ds-level .glass {
  width: 120px;
  height: 14px;
  border-radius: 10px;
  background: rgba(22, 32, 46, 0.85);
  border: 2px solid #fbbf24;
  position: relative;
  overflow: hidden;
}
.ds-level .glass::before,
.ds-level .glass::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: #fbbf24;
  opacity: 0.7;
}
.ds-level .glass::before {
  left: 44px;
}
.ds-level .glass::after {
  right: 44px;
}
.ds-level .bubble {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 22px;
  height: 8px;
  margin-left: -11px;
  border-radius: 10px;
  background: radial-gradient(ellipse at 40% 35%, #d9f99d, #65a30d);
  transition: transform 0.18s ease-out;
}
.ds-level span {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #fbbf24;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.ds-level.true-level .glass {
  box-shadow: 0 0 10px rgba(101, 163, 13, 0.5);
}
/* 🏋️ Rep counter */
.ds-reps {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 60;
  pointer-events: none;
}
.ds-reps b {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #34d399;
  background: rgba(13, 17, 16, 0.92);
  border: 1px solid #223129;
  border-radius: 10px;
  padding: 8px 14px;
}
.ds-reps.pr b {
  color: #0d1110;
  background: #34d399;
  animation: prSlam 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes prSlam {
  30% {
    transform: scale(1.45) rotate(-4deg);
  }
}
/* 🛍️ Scarcity tag + lookbook corner-peel */
.sb-scarce {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #191714;
  color: #fcfbf7;
  padding: 5px 10px;
}
.sb-shop-it.in .sb-scarce {
  animation: scarceWiggle 0.7s ease-in-out 0.5s 2;
}
@keyframes scarceWiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(4deg);
  }
}
.sb-shop-ph::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background: linear-gradient(
    315deg,
    var(--soft) 48%,
    rgba(0, 0, 0, 0.12) 50%,
    transparent 52%
  );
  transition:
    width 0.3s,
    height 0.3s;
}
.sb-shop-it:hover .sb-shop-ph::after {
  width: 44px;
  height: 44px;
}
/* ✨ Star roll (generic reviews) */
.sb-stars .num {
  font-weight: 900;
  font-size: 18px;
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.sb-stars .st {
  opacity: 0.25;
  transition:
    opacity 0.2s,
    transform 0.2s;
  display: inline-block;
}
.sb-stars .st.lit {
  opacity: 1;
  transform: scale(1.15);
}
@media (max-width: 700px) {
  .ds-fill,
  .ds-level {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kchar {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .ds-cta-bar {
    transition: none;
  }
}

/* ═══ Wave-2 FX: feature theater (toasts, cart bubble, slots, insurance check, quote slider, spots) ═══ */
/* Activity toast (sample-labeled) */
.ds-toast {
  position: fixed;
  left: 16px;
  bottom: 76px;
  z-index: 65;
  max-width: 300px;
  background: #fff;
  color: #16202e;
  border-radius: 14px;
  padding: 12px 14px;
  font-family: "Outfit", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 14px 34px rgba(16, 21, 38, 0.22);
  opacity: 0;
  transform: translateY(14px);
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
}
.ds-toast.show {
  opacity: 1;
  transform: none;
}
.ds-toast em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #98a1b3;
  margin-top: 3px;
}
/* ☕ cart bubble + flying dot */
.ds-cart {
  position: fixed;
  left: 16px;
  bottom: 18px;
  z-index: 66;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #3d2c1e;
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(61, 44, 30, 0.4);
  transition: transform 0.2s;
}
.ds-cart .ct {
  background: #f59e0b;
  color: #3d2c1e;
  border-radius: 100px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
}
.ds-cart .tot {
  font-size: 13.5px;
  opacity: 0.85;
}
.ds-cart.bump {
  transform: scale(1.12);
}
.ds-fly {
  position: fixed;
  z-index: 300;
  color: #b45309;
  font-size: 18px;
  pointer-events: none;
  transition:
    transform 0.55s cubic-bezier(0.3, 0.1, 0.3, 1),
    opacity 0.55s;
  transform: translate(0, 0);
}
.sb-mi.orderable {
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.sb-mi.orderable:hover {
  background: rgba(180, 83, 9, 0.07);
}
/* 💇 booking slot chips */
.sb-slots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  justify-content: inherit;
}
.sb-slots .lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ac);
  letter-spacing: 0.04em;
}
.sb-slots .slot {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac);
  background: #fff;
  border: 1.5px solid var(--ac);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: all 0.15s;
}
.sb-slots .slot:hover {
  background: var(--soft);
  transform: translateY(-1px);
}
.sb-slots .slot.held {
  background: var(--ac);
  color: #fff;
}
/* 🦷 insurance quick-check */
.sb-inscheck {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
  position: relative;
}
.sb-inscheck input {
  flex: 1;
  min-width: 190px;
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 13px;
  border: 1px solid #bfe7ef;
  border-radius: 999px;
  background: #fff;
}
.sb-inscheck button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--ac);
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}
.sb-inscheck .res {
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  min-height: 18px;
}
.sb-inscheck .res.checking {
  color: var(--muted, #6b7891);
  background: linear-gradient(90deg, #9ab6bd 25%, #d9f2f7 50%, #9ab6bd 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: insShimmer 0.9s linear infinite;
}
.sb-inscheck .res.ok {
  color: #15803d;
}
@keyframes insShimmer {
  to {
    background-position: -200% 0;
  }
}
.sb-inscheck em {
  position: absolute;
  right: 2px;
  top: -14px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
}
/* 🔧 instant-quote slider */
.sb-quotez {
  max-width: 420px;
  margin: 26px auto 4px;
  border: 2px solid #16202e;
  padding: 18px 20px;
  background: #fff;
  box-shadow: 5px 5px 0 rgba(22, 32, 46, 0.9);
}
.sb-quotez .qz-t {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.04em;
  position: relative;
}
.sb-quotez .qz-t em {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #98a1b3;
  margin-left: 8px;
  vertical-align: middle;
}
.sb-quotez .qz-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 12px 0 4px;
  font-size: 13.5px;
  font-weight: 600;
}
.sb-quotez .qz-n {
  font-size: 18px;
  font-weight: 900;
  color: var(--ac);
}
.sb-quotez input[type="range"] {
  width: 100%;
  accent-color: var(--ac);
}
.sb-quotez .qz-price {
  font-family: "Oswald", sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin: 8px 0 4px;
  transition: transform 0.15s;
}
.sb-quotez .qz-price.tick {
  transform: scale(1.06);
}
.sb-quotez .qz-note {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}
/* 🏋️ class-capacity spots */
.sb-sched-c {
  position: relative;
}
.sb-sched-c .spots {
  display: block;
  margin-top: 4px;
}
.sb-sched-c .spots i {
  display: block;
  height: 3px;
  border-radius: 4px;
  background: #34d399;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sb-sched-c .spots b {
  font-size: 9px;
  font-weight: 800;
  opacity: 0.75;
}
.sb-sched-c .spots.filled b {
  color: #fbbf24;
}
@media (max-width: 700px) {
  .ds-toast {
    bottom: 84px;
    max-width: 240px;
  }
  .ds-cart {
    bottom: 74px;
  }
}

/* 🥂 BOUTIQUE look — champagne neutrals + serif calm (the "de-medicalized" award-circuit play). */
.sb-site.look-boutique {
  background: #f7f1e8;
  color: #2c2620;
}
.sb-site.look-boutique .sb-top {
  background: rgba(247, 241, 232, 0.94);
  border-bottom: 1px solid #e4d9c8;
}
.sb-site.look-boutique .sb-name,
.sb-site.look-boutique .sb-hero h1,
.sb-site.look-boutique .sb-secttl,
.sb-site.look-boutique .sb-split h3,
.sb-site.look-boutique .sb-card b,
.sb-site.look-boutique .sb-menu-g h4,
.sb-site.look-boutique .sb-page h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.01em;
}
.sb-site.look-boutique .sb-hero {
  background: linear-gradient(180deg, #f1e7d8, #f7f1e8);
  border-bottom: none;
}
.sb-site.look-boutique .sb-hero h1 {
  font-weight: 600;
  font-size: clamp(36px, 6.4vw, 60px);
  color: #2c2620;
}
.sb-site.look-boutique .sb-hero p {
  color: #6e6252;
}
.sb-site.look-boutique .sb-eyebrow {
  background: transparent;
  border: 1px solid #c9b896;
  color: #8a7a5c;
  border-radius: 999px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.sb-site.look-boutique .sb-book {
  background: #2c2620;
  border-radius: 2px;
  letter-spacing: 0.08em;
}
.sb-site.look-boutique .sb-ghost {
  color: #2c2620;
  border-color: #2c2620;
  background: transparent;
  border-radius: 2px;
}
.sb-site.look-boutique .sb-card {
  background: #fffdf9;
  border: 1px solid #e9dfcf;
  border-radius: 3px;
  box-shadow: none;
}
.sb-site.look-boutique .sb-card:hover {
  box-shadow: 0 18px 40px rgba(122, 103, 74, 0.14);
}
.sb-site.look-boutique .sb-thumb,
.sb-site.look-boutique .sb-gal-ph {
  border-radius: 3px;
}
.sb-site.look-boutique .sb-ticker {
  background: #efe5d4;
  border-block-color: #e4d9c8;
}
.sb-site.look-boutique .sb-ticker-track {
  color: #8a7a5c;
}
.sb-site.look-boutique .sb-band {
  background: #2c2620;
}
.sb-site.look-boutique .sb-band .sb-book {
  background: #f7f1e8;
  color: #2c2620;
}

/* ═══ Wave-3 FX: ghost word, magnetic CTAs, typed sign-off, emoji rain, BA slider, 3D gift card ═══ */
.sb-hero {
  position: relative;
  overflow: hidden;
}
.sb-ghostword {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-size: clamp(120px, 26vw, 300px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(127, 127, 127, 0.1);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  animation: ghostDrift 16s ease-in-out infinite alternate;
}
@keyframes ghostDrift {
  from {
    transform: translate(-54%, -52%) rotate(-1.5deg);
  }
  to {
    transform: translate(-46%, -48%) rotate(1.5deg);
  }
}
.sb-hero-grid,
.sb-hero .sb-hero-in {
  position: relative;
  z-index: 1;
}
.sb-site.ind-fitness .sb-ghostword {
  -webkit-text-stroke-color: rgba(52, 211, 153, 0.12);
}
.sb-book.lg {
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.sb-typed {
  margin-top: 8px;
  font-size: 12px;
  color: inherit;
  opacity: 0.75;
  font-style: italic;
}
.sb-typed i {
  font-style: normal;
  animation: caretBlink 0.8s step-start infinite;
}
.sb-typed i.done {
  animation: none;
  opacity: 0;
}
@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}
.ds-rain {
  position: fixed;
  top: -40px;
  z-index: 300;
  pointer-events: none;
  animation: rainFall 2.2s linear both;
}
@keyframes rainFall {
  to {
    transform: translateY(110vh) rotate(200deg);
  }
}
/* Before/After drag slider */
.sb-ba-row.ba-slider {
  display: block;
}
.ba-stage {
  position: relative;
  aspect-ratio: 2/1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--soft);
}
.ba-stage .ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-topwrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 50%);
}
.ba-stage .sb-ba-tag.after {
  left: auto;
  right: 12px;
  background: var(--ac);
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.ba-handle i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  color: #16202e;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.ba-stage input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
/* 3D gift card */
.gcard-wrap {
  perspective: 900px;
  margin: 18px 0 22px;
}
.gcard {
  position: relative;
  width: min(340px, 92%);
  aspect-ratio: 1.6;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}
.gcard.flipped {
  transform: rotateY(180deg);
}
.gc-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(130deg, var(--ac), var(--ac2) 70%, var(--ac));
  box-shadow: 0 20px 44px rgba(16, 21, 38, 0.3);
}
.gc-back {
  transform: rotateY(180deg);
  background: linear-gradient(130deg, #1c2331, #2c3a52);
  font-size: 13.5px;
  gap: 6px;
  justify-content: center;
}
.gc-biz {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.gc-amt {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.gc-lbl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3em;
  opacity: 0.8;
}
.gc-code {
  font-family: monospace;
  letter-spacing: 0.3em;
  opacity: 0.8;
}
.gc-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 58%
  );
  animation: gcShine 3.4s ease-in-out infinite;
}
@keyframes gcShine {
  0%,
  60% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
.gc-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.gc-chip {
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--ac);
  background: transparent;
  border: 1.5px solid var(--ac);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
}
.gc-chip.on {
  background: var(--ac);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .sb-ghostword,
  .gc-shine {
    animation: none;
  }
}

/* ═══ Wave-4 FX: velocity skew, spa mist, speed ring, blueprint hover, chalk dust, coffee ring ═══ */
.sb-secttl {
  transform: skewY(var(--skew, 0deg));
  transition: transform 0.12s ease-out;
  will-change: transform;
}
/* 💇 spa mist */
.sb-mist {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
  z-index: 0;
}
.sb-mist.m1 {
  width: 380px;
  height: 300px;
  left: -80px;
  top: 30%;
  background: rgba(244, 114, 182, 0.16);
}
.sb-mist.m2 {
  width: 300px;
  height: 260px;
  right: -60px;
  top: 8%;
  background: rgba(219, 39, 119, 0.1);
}
/* speed ring (footer) */
.sb-speed {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-speed svg {
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
}
.sb-speed circle {
  fill: none;
  stroke-width: 4;
}
.sb-speed .bg {
  stroke: rgba(127, 127, 127, 0.2);
}
.sb-speed .arc {
  stroke: #16a34a;
  stroke-linecap: round;
}
.sb-speed b {
  font-size: 16px;
  font-weight: 900;
  color: #16a34a;
  min-width: 30px;
}
.sb-speed span {
  font-size: 11.5px;
  font-weight: 700;
  opacity: 0.6;
  max-width: 90px;
  line-height: 1.3;
}
/* 🔧 blueprint hover: trades gallery photos flip to line-art blue */
.sb-site.ind-trades .sb-gal-ph img {
  transition:
    filter 0.35s,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sb-site.ind-trades .sb-gal-ph:hover img {
  filter: invert(0.92) sepia(0.6) hue-rotate(170deg) saturate(3) brightness(0.9);
}
.sb-site.ind-trades .sb-gal-ph::after {
  content: "BLUEPRINT VIEW";
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  background: #16202e;
  padding: 4px 8px;
  opacity: 0;
  transition: opacity 0.25s;
}
.sb-site.ind-trades .sb-gal-ph:hover::after {
  opacity: 1;
}
/* 🏋️ chalk dust on schedule chips */
.sb-site.ind-fitness .sb-sched-c {
  transition: transform 0.15s;
}
.sb-site.ind-fitness .sb-sched-c:hover {
  transform: translateY(-2px);
}
.sb-site.ind-fitness .sb-sched td {
  position: relative;
}
.sb-site.ind-fitness .sb-sched-c:hover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 40px;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse,
    rgba(232, 245, 238, 0.5),
    transparent 70%
  );
  animation: chalkPuff 0.5s ease-out both;
  pointer-events: none;
}
@keyframes chalkPuff {
  0% {
    opacity: 0;
    scale: 0.4;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    scale: 1.6;
  }
}
/* ☕ coffee-ring watermark behind the menu */
.sb-site.ind-cafe .sb-menu {
  position: relative;
}
.sb-site.ind-cafe .sb-menu::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -30px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 14px solid rgba(138, 90, 34, 0.07);
  transform: rotate(-12deg) scaleY(0.92);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sb-secttl {
    transform: none;
  }
  .sb-mist {
    display: none;
  }
}

/* ── Wave 5 FX (docs/DEMO-IDEAS.md ideas 2,6,8,13,27,36,38,39,40,41,43,44) ── */
/* 2: rotating kicker line */
.sb-kflip {
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.85;
}
.sb-kflip .kword {
  display: inline-block;
  min-width: 90px;
  text-align: left;
  color: var(--ac, inherit);
}
.sb-kflip .kword.swap {
  animation: kwordSwap 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes kwordSwap {
  0% {
    opacity: 0;
    transform: translateY(0.6em) rotateX(70deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
/* 6: retail editorial drop-cap */
.sb-site.ind-retail .kchar.kdrop {
  font-size: 1.5em;
  line-height: 0.8;
  margin-right: 3px;
  color: var(--ac, inherit);
}
/* 8: café cursor steam */
.ds-steam {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  filter: blur(2px);
  animation: steamRise 1.2s ease-out both;
}
@keyframes steamRise {
  0% {
    opacity: 0.7;
    transform: translate(-50%, 0) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sway, 12px)), -70px) scale(1.7);
  }
}
/* 40: café menu paper grain + coffee-ring watermark */
.sb-site.ind-cafe .sb-menu.paper {
  position: relative;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(120, 90, 60, 0.025) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(120, 90, 60, 0.02) 0 1px,
      transparent 1px 4px
    );
}
.sb-site.ind-cafe .sb-menu.paper::after {
  content: "";
  position: absolute;
  right: 6%;
  top: 14px;
  width: 92px;
  height: 78px;
  border: 9px solid rgba(124, 82, 46, 0.09);
  border-radius: 50%;
  transform: rotate(-8deg);
  pointer-events: none;
}
/* 41: salon iridescent section titles */
@supports (-webkit-background-clip: text) {
  .sb-site.ind-salon .sb-secttl.irid {
    background-image: linear-gradient(
      100deg,
      #b76e79,
      #d4a5b5,
      #9f8fd4,
      #7fc4c9,
      #b76e79
    );
    background-size: 300% 100%;
    background-position: var(--iridx, 50%) 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.3s ease-out;
  }
}
/* 13: clinic gallery view pill */
.ds-viewpill {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  color: #1c2733;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(10, 20, 40, 0.22);
  transition:
    opacity 0.2s,
    transform 0.12s ease-out;
}
.ds-viewpill.show {
  opacity: 1;
}
/* 27: trades dispatch radar ping */
.sb-ping {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 9px 14px;
  border-radius: 100px;
  background: rgba(10, 18, 28, 0.55);
  color: #eef4fb;
  font-size: 13.5px;
  backdrop-filter: blur(4px);
}
.sb-ping .radar {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}
.sb-ping .radar b {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #4ade80;
}
.sb-ping .radar i {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(74, 222, 128, 0.7);
  border-radius: 50%;
  animation: pingRing 2.4s ease-out infinite;
}
.sb-ping .radar i + i {
  animation-delay: 1.2s;
}
@keyframes pingRing {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
.sb-ping .eta {
  color: #4ade80;
}
.sb-ping .eta.tick {
  animation: etaTick 0.3s ease;
}
@keyframes etaTick {
  50% {
    transform: translateY(-3px);
  }
}
.sb-ping em {
  font-style: normal;
  font-size: 10px;
  opacity: 0.55;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* 43: trades blueprint hover on gallery photos */
.sb-site.ind-trades .sb-gal-ph {
  position: relative;
}
.sb-site.ind-trades .sb-gal-ph img {
  transition: filter 0.35s ease;
}
.sb-site.ind-trades .sb-gal-ph:hover img {
  filter: invert(0.88) sepia(0.6) hue-rotate(170deg) saturate(2.6)
    contrast(1.05);
}
.sb-site.ind-trades .sb-gal-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(160, 210, 255, 0.16) 0 1px,
      transparent 1px 24px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(160, 210, 255, 0.16) 0 1px,
      transparent 1px 24px
    );
  transition: opacity 0.35s ease;
}
.sb-site.ind-trades .sb-gal-ph:hover::after {
  opacity: 1;
}
/* 36: fitness tear-off ticket */
.sb-ticket {
  display: flex;
  max-width: 560px;
  margin: 26px auto 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
}
.sb-ticket .tk-main {
  flex: 1;
  padding: 18px 22px;
  background: linear-gradient(120deg, var(--ac, #e11d48), var(--ac2, #7c3aed));
  color: #fff;
  border-radius: 14px 0 0 14px;
}
.sb-ticket .tk-main b {
  display: block;
  font-size: 21px;
  letter-spacing: 0.04em;
}
.sb-ticket .tk-main span {
  font-size: 12.5px;
  opacity: 0.85;
}
.sb-ticket .tk-stub {
  flex: none;
  width: 78px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  border-left: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: 0 14px 14px 0;
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.7, 1),
    opacity 0.5s;
  font-family: inherit;
}
.sb-ticket .tk-stub:hover {
  background: rgba(0, 0, 0, 0.35);
}
.sb-ticket.torn .tk-stub {
  transform: translate(46px, 90px) rotate(24deg);
  opacity: 0;
  pointer-events: none;
}
/* 44: fitness chalk dust */
.ds-chalk {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(0.5px);
  animation: chalkPuff 0.7s ease-out both;
}
@keyframes chalkPuff {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, -18px))
      )
      scale(1.4);
  }
}
/* 38: retail size pills + self-drawing check */
.sb-sizes {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.sb-sizes .sz {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 100px;
  border: 1.5px solid rgba(25, 23, 20, 0.25);
  background: transparent;
  color: inherit;
  font-weight: 700;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.sb-sizes .sz.on {
  background: #191714;
  color: #fcfbf7;
  border-color: #191714;
}
.sb-sizes .sz svg {
  width: 12px;
  height: 12px;
}
.sb-sizes .sz.on svg path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: szCheck 0.35s ease-out 0.05s forwards;
}
@keyframes szCheck {
  to {
    stroke-dashoffset: 0;
  }
}
/* 39: generic adjustable-estimate diagram */
.sb-estdia {
  max-width: 760px;
  margin: 30px auto 0;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--soft, rgba(0, 0, 0, 0.04));
}
.sb-estdia .ed-t {
  font-weight: 800;
  margin-bottom: 16px;
}
.sb-estdia .ed-t em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-left: 8px;
}
.sb-estdia .ed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sb-estdia .ed-step {
  flex: 1;
  min-width: 130px;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.sb-estdia .ed-step span {
  display: block;
  font-size: 26px;
}
.sb-estdia .ed-step b {
  display: block;
  font-size: 14.5px;
  margin-top: 4px;
}
.sb-estdia .ed-step i {
  font-style: normal;
  font-size: 12px;
  opacity: 0.65;
}
.sb-estdia u {
  flex: none;
  width: 34px;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.4s ease;
  text-decoration: none;
}
.sb-estdia.go .ed-step {
  opacity: 1;
  transform: none;
}
.sb-estdia.go .ed-step:nth-child(3) {
  transition-delay: 0.35s;
}
.sb-estdia.go .ed-step:nth-child(5) {
  transition-delay: 0.7s;
}
.sb-estdia.go u {
  opacity: 0.35;
  transform: none;
}
.sb-estdia.go u:first-of-type {
  transition-delay: 0.25s;
}
.sb-estdia.go u:last-of-type {
  transition-delay: 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .sb-kflip .kword.swap,
  .ds-steam,
  .ds-chalk,
  .sb-ping .radar i {
    animation: none;
  }
  .sb-estdia .ed-step,
  .sb-estdia u {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Brand font: when the business's own site declares a Google Font we load the same one and let it
   drive the headings. Scoped to .brand-font so it only applies once a real font was found, and the
   industry pairing stays the default. */
.sb-site.brand-font .sb-name,
.sb-site.brand-font .sb-hero h1,
.sb-site.brand-font .sb-secttl,
.sb-site.brand-font .sb-split h3,
.sb-site.brand-font .sb-band h2 {
  font-family: var(--font-brand), Georgia, serif;
}

/* ── SIGNATURE SECTIONS ──────────────────────────────────────────────────────────────────────────
   A block that belongs to one trade and appears nowhere else. These are what stop a brewery and a
   bakery being the same page in different paint. Each is styled as its own object, not as a variant
   of the shared card grid. */

/* Tap board — reads like the chalkboard behind the bar, not a menu list. */
.sb-taplist {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sb-taps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.sb-tap {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) minmax(90px, 1fr) 90px 48px;
  gap: 14px;
  align-items: center;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.sb-tap .tp-n {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sb-tap .tp-s {
  color: var(--muted, #6b7590);
  font-size: 13px;
}
.sb-tap .tp-m {
  height: 7px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.09);
  overflow: hidden;
}
.sb-tap .tp-m i {
  display: block;
  height: 100%;
  background: var(--ac);
}
.sb-tap .tp-a {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13.5px;
}
.sb-tapnote {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted, #6b7590);
}
@media (max-width: 640px) {
  .sb-tap {
    grid-template-columns: 1fr 56px;
    row-gap: 4px;
  }
  .sb-tap .tp-s {
    grid-column: 1 / -1;
  }
  .sb-tap .tp-m {
    grid-column: 1 / -1;
  }
}

/* Artist roster — people first, because you book a PERSON at a studio or a chair. */
.sb-roster {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sb-artists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.sb-artist {
  margin: 0;
  background: var(--soft);
  border-radius: 16px;
  padding: 18px;
  text-align: center;
}
.sb-artist .ar-face {
  width: 62px;
  height: 62px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  background: var(--ac);
}
.sb-artist b {
  display: block;
  font-size: 16px;
}
.sb-artist span {
  display: block;
  font-size: 13px;
  color: var(--muted, #6b7590);
  margin-top: 2px;
}
.sb-artist em {
  display: block;
  font-style: normal;
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.75;
}
.sb-artist .sb-book.sm {
  margin-top: 12px;
  font-size: 13px;
  padding: 8px 14px;
}

/* Emergency bar — loud on purpose: for a vet or a burst pipe, "we answer now" IS the pitch. */
.sb-urgent {
  margin: 26px 0 0;
  background: var(--ac);
  color: #fff;
}
.sb-urgent .ug-in {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.sb-urgent b {
  display: block;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.sb-urgent span {
  display: block;
  font-size: 14px;
  opacity: 0.9;
}
.sb-urgent .sb-book {
  margin-left: auto;
  background: #fff;
  color: var(--ac);
}
.sb-urgent .ug-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  flex: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: ugPulse 2s infinite;
}
@keyframes ugPulse {
  70% {
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb-urgent .ug-pulse {
    animation: none;
  }
}

/* ── The other eleven signatures ─────────────────────────────────────────────────────────────────
   Each is styled as its own object, so a florist board and a storage-yard unit grid share no visual
   DNA beyond the site accent. */

/* Fresh board — what is actually in, today. Restaurants, bakers, butchers, florists. */
.sb-fresh {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sb-freshlist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.sb-freshlist li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 12px 2px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.16);
}
.sb-freshlist .fb-n {
  font-weight: 800;
}
.sb-freshlist .fb-d {
  grid-column: 1;
  color: var(--muted, #6b7590);
  font-size: 13px;
}
.sb-freshlist .fb-p {
  /* grid-column is REQUIRED, not tidiness. With a definite row and an auto column, grid places this
     in step 2 of auto-placement — BEFORE the fully-auto .fb-n — so the price took column 1 and shoved
     the item name out to the right margin. Measured: price x=10, "Sourdough loaf" x=274 in a 400px
     row. Every bakery, deli, pizzeria, butcher and farm stand read its board back-to-front. */
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sb-freshnote {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted, #6b7590);
}

/* Order bar — the whole pitch for a drive-thru or a truck is skipping the line. */
.sb-orderbar {
  margin: 26px 0 0;
  background: var(--ac);
  color: #fff;
}
.sb-orderbar .ob-in {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.sb-orderbar b {
  display: block;
  font-size: 18px;
}
.sb-orderbar span {
  display: block;
  font-size: 13.5px;
  opacity: 0.9;
}
.sb-orderbar .sb-book {
  margin-left: auto;
  background: #fff;
  color: var(--ac);
}
.sb-orderbar .ob-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  flex: none;
}

/* Turnaround — a promise about time, for cleaners, tailors, print and repair shops. */
.sb-turn {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sb-turnsteps {
  list-style: none;
  counter-reset: t;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.sb-turnsteps li {
  counter-increment: t;
  background: var(--soft);
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
}
.sb-turnsteps li::before {
  content: counter(t);
  position: absolute;
  top: -10px;
  left: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ac);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
}
.sb-turnsteps b {
  display: block;
  margin-top: 6px;
}
.sb-turnsteps span {
  display: block;
  font-size: 13px;
  color: var(--muted, #6b7590);
  margin-top: 3px;
}

/* Before / after — the only proof that matters for a contractor or a detailer. */
.sb-ba2 {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.ba2-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.ba2-pair figure {
  margin: 0;
  height: 190px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.03));
}
.ba2-pair .ba2-y {
  background: linear-gradient(135deg, var(--ac), var(--ac2, var(--ac)));
}
.ba2-pair span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  border-radius: 100px;
  padding: 4px 10px;
}

/* Lookbook — editorial grid for boutiques, specialty retail, photographers. */
.sb-lookbook {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.lb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
  gap: 10px;
  margin-top: 14px;
}
.lb-c {
  margin: 0;
  border-radius: 12px;
  background: var(--soft);
}
.lb-1 {
  grid-column: span 2;
  grid-row: span 2;
}
.lb-4 {
  grid-column: span 2;
}
.lb-c:nth-child(odd) {
  background: linear-gradient(135deg, var(--ac), transparent 70%);
  opacity: 0.85;
}

/* Class grid — a real week, for gyms, studios, dance and martial arts. */
.sb-classes {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.cg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.cg-day {
  background: var(--soft);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.cg-day b {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* The tile ground is --soft (#f5f3ff for this archetype) — ALWAYS light, including on the dark
     fitness page. So its labels take a fixed dark ink rather than the page's --muted, which points
     the other way on a dark ground and put light-on-light here (1.73:1). */
  color: #5c6780;
}
.cg-day span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  /* The chip is ALWAYS white, so its text must always be dark ink. Inheriting the page colour meant
     the fitness palette's near-white #e8f5ee landed on white: measured 1.12:1, i.e. the class times
     were invisible — on the schedule archetype, whose whole reason to exist is the timetable. */
  color: #0f172a;
  border-radius: 8px;
  padding: 5px 0;
}

/* Pet and people cards — who we look after: grooming, boarding, childcare, home care. */
.sb-petcards {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.pc-c {
  margin: 0;
  background: var(--soft);
  border-radius: 16px;
  padding: 16px;
  border-top: 4px solid var(--ac);
}
.pc-c b {
  display: block;
  font-size: 15px;
}
.pc-c span {
  display: block;
  font-size: 13px;
  color: var(--muted, #6b7590);
  margin-top: 3px;
}
.pc-c em {
  display: block;
  font-style: normal;
  font-weight: 800;
  margin-top: 8px;
}

/* Credentials bar — what a professional service is actually selling: trust. */
.sb-case {
  margin: 26px 0 0;
  background: var(--soft);
}
.cs-in {
  max-width: 940px;
  margin: 0 auto;
  padding: 20px 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.cs-stat b {
  display: block;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.cs-stat span {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #6b7590);
  margin-top: 2px;
}

/* Fleet — for anyone whose product is turning up: movers, couriers, mobile mechanics. */
.sb-fleet {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.fl-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.fl-r {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.fl-r .fl-i {
  width: 4px;
  height: 26px;
  border-radius: 2px;
  background: var(--ac);
  flex: none;
}
.fl-r .fl-n b {
  display: block;
}
.fl-r .fl-n em {
  font-style: normal;
  font-size: 13px;
  color: var(--muted, #6b7590);
}
.fl-r .fl-p {
  margin-left: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Unit grid — storage and rental, where the question is always what is free. */
.sb-units {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.ug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.ug-c {
  margin: 0;
  background: var(--soft);
  border-radius: 14px;
  padding: 16px;
  position: relative;
}
.ug-c b {
  display: block;
  font-size: 17px;
}
.ug-c span {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #6b7590);
  margin-top: 2px;
}
.ug-c em {
  display: block;
  font-style: normal;
  font-weight: 800;
  margin-top: 8px;
}
.ug-c i {
  position: absolute;
  top: 12px;
  right: 12px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 3px 9px;
  background: rgba(21, 128, 61, 0.12);
  color: #15803d;
}
.ug-c.taken i {
  background: rgba(180, 83, 9, 0.14);
  color: #b45309;
}

/* Space cards — venues and stays, where availability is the whole conversation. */
.sb-spaces {
  max-width: var(--sec);
  margin: 30px auto 6px;
  padding: 0 26px;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.sp-c {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line, #e6e9f2);
  border-radius: 16px;
  padding: 18px;
  box-shadow:
    0 1px 2px rgba(16, 21, 38, 0.04),
    0 10px 26px rgba(16, 21, 38, 0.05);
}
.sp-c b {
  display: block;
  font-size: 16px;
}
.sp-c span {
  display: block;
  font-size: 13px;
  color: var(--muted, #6b7590);
  margin-top: 3px;
}
.sp-c em {
  display: block;
  font-style: normal;
  font-size: 19px;
  font-weight: 800;
  margin: 10px 0 12px;
}

/* Lookbook captions — the grid has to say what it is showing, or it is just coloured boxes. */
.lb-c {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.lb-c figcaption {
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
  color: #fff;
}
.lb-c figcaption b {
  display: block;
  font-size: 13.5px;
  line-height: 1.25;
}
.lb-c figcaption span {
  display: block;
  font-size: 12px;
  opacity: 0.9;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.lb-1 figcaption b {
  font-size: 16px;
}

/* ── Hero per ARCHETYPE ───────────────────────────────────────────────────────────────────────────
   Ten architectures were sharing three hero treatments, so the first thing anyone judged looked the
   same across most trades. Each of these is a different opening move, not a restyle: what is
   centred, how loud the headline is, whether the scene competes with the copy, and what the eye
   lands on first. The base .sb-hero-grid (1fr, becoming 1.15fr/0.85fr at 800px) is still the
   fallback for anything without its own rule. */

/* BOARD — menu-led. Centred like a menu board above a counter; the scene sits low so the words win. */
.sb-hero.hv-board .sb-hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
}
.sb-hero.hv-board .sb-hero-in {
  margin: 0 auto;
}
.sb-hero.hv-board .sb-cta {
  justify-content: center;
}
.sb-hero.hv-board .sb-scene {
  height: 230px;
  margin-top: -6px;
  opacity: 0.92;
}

/* PORTRAIT — you are booking a person. The scene is given real room, beside the copy, not under it. */
@media (min-width: 800px) {
  .sb-hero.hv-portrait .sb-hero-grid {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
  }
}
.sb-hero.hv-portrait .sb-scene {
  height: 330px;
}
.sb-site .sb-hero.hv-portrait h1 {
  font-size: clamp(34px, 5.6vw, 58px);
}

/* CALLOUT — something is broken NOW. Tight, loud, phone-first; the scene is nearly out of the way. */
.sb-hero.hv-callout {
  padding: 52px 26px 44px;
}
.sb-hero.hv-callout .sb-hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
  gap: 4px;
}
.sb-site .sb-hero.hv-callout h1 {
  font-size: clamp(38px, 7vw, 66px);
  line-height: 1.02;
}
.sb-hero.hv-callout .sb-cta {
  justify-content: center;
  margin-top: 14px;
}
.sb-hero.hv-callout .sb-scene {
  height: 130px;
  opacity: 0.55;
}

/* SHOWCASE — the work is the pitch, so the scene leads and the copy sits under it. */
.sb-hero.hv-showcase .sb-hero-grid {
  grid-template-columns: 1fr;
}
.sb-hero.hv-showcase .sb-scene {
  height: 300px;
  order: -1;
  margin-bottom: 10px;
}
.sb-site .sb-hero.hv-showcase h1 {
  font-size: clamp(34px, 6vw, 62px);
}

/* BANNER — a timetable business. Wide, energetic, big type, scene as a band behind the words. */
.sb-hero.hv-banner {
  padding: 76px 26px 64px;
}
.sb-hero.hv-banner .sb-hero-grid {
  max-width: 1100px;
  grid-template-columns: 1fr;
  text-align: center;
}
.sb-site .sb-hero.hv-banner h1 {
  font-size: clamp(46px, 9vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.sb-hero.hv-banner .sb-cta {
  justify-content: center;
}
.sb-hero.hv-banner .sb-scene {
  height: 200px;
  margin-top: -18px;
  opacity: 0.8;
}

/* WINDOW — a shop window: the scene is the display, generous and uninterrupted, copy to one side. */
@media (min-width: 800px) {
  .sb-hero.hv-window .sb-hero-grid {
    grid-template-columns: 0.8fr 1.2fr;
  }
}
.sb-hero.hv-window .sb-scene {
  height: 360px;
}
.sb-site .sb-hero.hv-window h1 {
  font-size: clamp(32px, 5vw, 52px);
}

/* WIDE — availability. Roomy and calm; you are picturing yourself in the space. */
.sb-hero.hv-wide {
  padding: 82px 26px 70px;
}
.sb-hero.hv-wide .sb-hero-grid {
  max-width: 1120px;
}
.sb-hero.hv-wide .sb-scene {
  height: 320px;
}

/* LETTERHEAD — a professional practice. Restrained, typographic, NO scene competing for attention;
   a solicitor's page that opens with an animated illustration reads as a template. */
.sb-hero.hv-letterhead {
  padding: 64px 26px 52px;
}
.sb-hero.hv-letterhead .sb-hero-grid {
  grid-template-columns: 1fr;
  max-width: 720px;
  text-align: left;
}
.sb-site .sb-hero.hv-letterhead h1 {
  font-size: clamp(32px, 4.6vw, 50px);
  letter-spacing: -0.015em;
}
.sb-hero.hv-letterhead .sb-scene {
  display: none;
}
.sb-hero.hv-letterhead .sb-eyebrow {
  letter-spacing: 0.14em;
}

/* TICKETED — drop off, collect. A stub-like offset with the scene small and to the side. */
@media (min-width: 800px) {
  .sb-hero.hv-ticketed .sb-hero-grid {
    grid-template-columns: 1.35fr 0.65fr;
  }
}
.sb-hero.hv-ticketed .sb-scene {
  height: 220px;
}
.sb-site .sb-hero.hv-ticketed h1 {
  font-size: clamp(32px, 5.2vw, 54px);
}

/* ROUTE — the product is turning up. Copy left, scene right and low, like something on its way in. */
@media (min-width: 800px) {
  .sb-hero.hv-route .sb-hero-grid {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: end;
  }
}
.sb-hero.hv-route .sb-scene {
  height: 250px;
}
.sb-site .sb-hero.hv-route h1 {
  font-size: clamp(34px, 5.4vw, 56px);
}

/* ── Section SHAPES per architecture ──────────────────────────────────────────────────────────────
   The markup below is identical for every trade — only the layout changes. That is the difference
   between "the same page with different words" and a page that looks built for this business, and
   it costs no extra HTML.

   Anything without an arch-* class keeps the shared shapes exactly as they were. */

/* CREDENTIAL — a professional practice. Services are a plain, quiet list: a solicitor's work is not
   photographs, and a four-up grid of stock imagery is what makes a firm's site look bought. */
.arch-credential .sb-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line, #e6e9f2);
}
.arch-credential .sb-card {
  border: 0;
  border-bottom: 1px solid var(--line, #e6e9f2);
  border-radius: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 15px 2px;
}
.arch-credential .sb-thumb {
  display: none; /* no stock photography on a practice's service list */
}
.arch-credential .sb-card-b {
  padding: 0;
}
/* .sb-site prefix is load-bearing. An archetype deliberately hiding a control is (0,2,0), the same
   as the toolbox rule `.ux-bigtap .sb-add` that sets display:inline-flex to make its 48px minimum
   apply — and the toolbox sits later in the file, so it won and the law firm got its "Get started"
   cart pill back. Any technique added later would have done the same. (0,3,0) settles it. */
.sb-site.arch-credential .sb-add {
  display: none; /* you enquire, you do not "add to cart" a legal opinion */
}

/* CATALOGUE — browsing IS the experience, so more per row and the picture doing the work. */
.arch-catalogue .sb-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.arch-catalogue .sb-thumb {
  aspect-ratio: 3 / 4; /* product proportions, not landscape crops */
}

/* URGENT — wide rows, big price, the call-out doing the work. Someone with a burst pipe is scanning
   for a number and a cost, not admiring a card grid. */
.arch-urgent .sb-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
.arch-urgent .sb-card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 14px;
}
.arch-urgent .sb-thumb {
  height: 68px;
  border-radius: 10px;
}
.arch-urgent .sb-price {
  font-size: 20px;
  font-weight: 800;
}

/* MENU — one tall board rather than two columns, like something read top to bottom on a wall. */
.arch-menu .sb-menu-cols {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}

/* AVAILABILITY — fewer, larger tiles: you are picturing yourself in the space, not comparing twelve. */
.arch-availability .sb-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.arch-availability .sb-thumb {
  aspect-ratio: 16 / 10;
}

/* ROSTER — you are choosing a person, so the faces get room and the row stays scannable. */
.arch-roster .sb-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.arch-roster .sb-thumb {
  aspect-ratio: 1 / 1; /* a portrait crop, not a landscape one */
}

/* TURNAROUND — the process is the product, so the numbered steps get weight instead of the cards. */
.arch-turnaround .sb-steps-row {
  gap: 18px;
}
.arch-turnaround .sb-step-n {
  font-size: 30px;
}
.arch-turnaround .sb-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* FLEET — a list of what turns up and what it costs; photographs add nothing to a van arriving. */
.arch-fleet .sb-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
.arch-fleet .sb-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.arch-fleet .sb-thumb {
  display: none;
}

/* ── THE UX TOOLBOX ────────────────────────────────────────────────────────────────────────────────
   Twelve techniques, assigned three-at-a-time per page architecture by lib/uxToolbox.js, so a bakery
   and a law firm no longer move identically. Every comment in the existing FX layer begins with the
   word "Universal" — the same kinetic type and tilt on every site — and that sameness is the thing
   being fixed here. This is the part that VARIES.

   Two rules hold across every technique below:
   1. It degrades to nothing. The page is complete and usable with all of it switched off.
   2. prefers-reduced-motion turns off motion, not information. Nothing here carries meaning. */

/* 1. Scroll-driven reveals. Native, compositor-driven, no observer. Guarded by @supports so browsers
      without scroll timelines keep the existing IntersectionObserver path instead of getting both. */
@supports (animation-timeline: view()) {
  .ux-reveal .sb-card,
  .ux-reveal .sb-step,
  .ux-reveal .sb-gal-ph,
  .ux-reveal .sb-team-m,
  .ux-reveal .sb-qa,
  .ux-reveal .sb-menu-g {
    animation: ux-rise linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 34%;
  }
  /* The JS reveal adds .rv/.rv.in; with a scroll timeline running we must not have both fighting. */
  .ux-reveal .rv {
    opacity: 1;
    transform: none;
  }
}
@keyframes ux-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 2. CSS-only carousel: a snapping rail with native markers. No JavaScript anywhere. */
.ux-rail .sb-gal,
.ux-rail .sb-shop-grid,
.ux-rail .sb-lookbook {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.ux-rail .sb-gal > *,
.ux-rail .sb-shop-grid > *,
.ux-rail .sb-lookbook > * {
  flex: 0 0 min(78%, 320px);
  scroll-snap-align: center;
}
.ux-rail .sb-gal::-webkit-scrollbar {
  display: none;
}
@supports selector(::scroll-marker) {
  .ux-rail .sb-gal,
  .ux-rail .sb-shop-grid {
    scroll-marker-group: after;
  }
  .ux-rail .sb-gal > *::scroll-marker,
  .ux-rail .sb-shop-grid > *::scroll-marker {
    content: "";
    width: 8px;
    height: 8px;
    margin: 10px 4px 0;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.18);
  }
  .ux-rail .sb-gal > *::scroll-marker:target-current,
  .ux-rail .sb-shop-grid > *::scroll-marker:target-current {
    background: var(--ac);
  }
}

/* 3. Stacking cards: each pins briefly as the next arrives. Pure sticky, no script. */
.ux-stack .sb-step,
.ux-stack .sb-spaces > *,
.ux-stack .sb-units > * {
  position: sticky;
  top: 84px;
  background: #fff;
  border-radius: 14px;
}

/* 4. Masked reveal: photographs wipe in rather than fade. */
@supports (animation-timeline: view()) and
  (mask-image: linear-gradient(#000, #000)) {
  .ux-wipe .sb-gal-ph,
  .ux-wipe .ba2-x {
    animation: ux-unmask linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 40%;
  }
}
@keyframes ux-unmask {
  from {
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 12%);
    mask-image: linear-gradient(to top, #000 0%, transparent 12%);
  }
  to {
    -webkit-mask-image: linear-gradient(to top, #000 100%, transparent 140%);
    mask-image: linear-gradient(to top, #000 100%, transparent 140%);
  }
}

/* 5. Variable weight: a heading thickens as it settles. Only bites on a variable font; a static face
      ignores the axis, which is the correct no-op rather than a broken render. */
@supports (animation-timeline: view()) and (font-variation-settings: "wght" 400) {
  .ux-weight .sb-secttl,
  .ux-weight h2 {
    animation: ux-wght linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }
}
@keyframes ux-wght {
  from {
    font-variation-settings: "wght" 420;
    letter-spacing: 0.01em;
  }
  to {
    font-variation-settings: "wght" 820;
    letter-spacing: -0.02em;
  }
}

/* 6. Pointer spotlight over a card grid. --mx/--my are set by JS; with no JS they stay at 50% and
      this is a static, perfectly acceptable sheen. */
.ux-spot .sb-card,
.ux-spot .sb-team-m,
.ux-spot .sb-shop-it {
  position: relative;
  overflow: hidden;
}
.ux-spot .sb-card::after,
.ux-spot .sb-team-m::after,
.ux-spot .sb-shop-it::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--ac) 18%, transparent),
    transparent 70%
  );
}
.ux-spot .sb-card:hover::after,
.ux-spot .sb-team-m:hover::after,
.ux-spot .sb-shop-it:hover::after {
  opacity: 1;
}
/* Touch devices have no hover, so the spotlight was simply dead on every phone — and phones are where
   most of these sites are actually opened. There the highlight is shown at rest instead of chasing a
   cursor that does not exist: same treatment, no interaction required. */
@media (hover: none) {
  .ux-spot .sb-card::after,
  .ux-spot .sb-team-m::after,
  .ux-spot .sb-shop-it::after {
    opacity: 0.75;
  }
}

/* 7. A nav that frosts on leaving the hero. */
@supports (animation-timeline: scroll()) {
  .ux-frost .sb-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    animation: ux-frost linear both;
    animation-timeline: scroll();
    animation-range: 0 240px;
  }
}
@keyframes ux-frost {
  from {
    background: transparent;
    backdrop-filter: blur(0);
    box-shadow: none;
  }
  to {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
  }
}

/* 8. Counting figures. The number is ALWAYS in the markup; script only animates toward it, so a
      failure leaves the true figure on screen rather than a zero. */
.ux-count .sb-trust b {
  font-variant-numeric: tabular-nums;
}

/* 9. Headline lines in sequence — editorial and calm, the opposite of letter-by-letter. Spans are
      added by script; with none, the headline is simply present. */
.ux-lines .sb-hero h1 .ux-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: ux-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* 10. A vertical edge ticker. Hidden on anything narrow: it is decoration and must never crowd. */
.ux-edge::before {
  content: attr(data-edge);
  position: fixed;
  right: 6px;
  top: 0;
  height: 100vh;
  display: none;
  align-items: center;
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ac) 55%, transparent);
  pointer-events: none;
  animation: ux-edge 26s linear infinite;
}
@media (min-width: 1024px) {
  .ux-edge::before {
    display: flex;
  }
}
@keyframes ux-edge {
  from {
    transform: translateY(28%);
  }
  to {
    transform: translateY(-28%);
  }
}

/* 11. Drag-to-compare. The seam is a real range input, so it is keyboard-operable and announced by a
       screen reader for free — a div with a drag handler would have been neither. */
.ux-peel .ba2-pair {
  position: relative;
}
.ux-peel .ba2-seam {
  width: 100%;
  accent-color: var(--ac);
}
.ux-peel .ba2-y {
  clip-path: inset(0 0 0 var(--seam, 50%));
}

/* 12. A drifting mesh backdrop, built from the site's own accent. Atmosphere without a photograph. */
.ux-mesh .sb-band,
.ux-mesh .sb-spaces,
.ux-mesh .sb-lookbook {
  background-image:
    radial-gradient(
      42% 60% at 18% 22%,
      color-mix(in oklab, var(--ac) 22%, transparent),
      transparent 70%
    ),
    radial-gradient(
      38% 52% at 82% 68%,
      color-mix(in oklab, var(--ac2, var(--ac)) 20%, transparent),
      transparent 72%
    );
  background-size: 160% 160%;
  animation: ux-mesh 24s ease-in-out infinite alternate;
}
@keyframes ux-mesh {
  from {
    background-position:
      0% 0%,
      100% 100%;
  }
  to {
    background-position:
      18% 12%,
      78% 84%;
  }
}

/* The rule that outranks all of the above. */
@media (prefers-reduced-motion: reduce) {
  .ux-reveal .sb-card,
  .ux-reveal .sb-step,
  .ux-reveal .sb-gal-ph,
  .ux-reveal .sb-team-m,
  .ux-reveal .sb-qa,
  .ux-reveal .sb-menu-g,
  .ux-wipe .sb-gal-ph,
  .ux-wipe .ba2-x,
  .ux-weight .sb-secttl,
  .ux-weight h2,
  .ux-frost .sb-nav,
  .ux-mesh .sb-band,
  .ux-mesh .sb-spaces,
  .ux-mesh .sb-lookbook,
  .ux-edge::before,
  .ux-lines .sb-hero h1 .ux-line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    mask-image: none !important;
  }
}

/* ── MOBILE-FIRST TOOLBOX ──────────────────────────────────────────────────────────────────────────
   Baseline only. Transitions, transforms, scroll-snap, position:sticky, :active, details/summary —
   all of it years old in every mobile browser. Nothing here needs a scroll timeline, which is what
   made four of the original twelve invisible on a phone rather than merely subtle.

   A phone is not a narrow desktop, so these are thumb reach, gestures and tap feedback rather than
   desktop effects made smaller. */

/* 1. Tap-press feedback. Hover does nothing on touch, so without this a tap has no acknowledgement
      at all until the page changes underneath it. */
.ux-tap .sb-card,
.ux-tap .sb-book,
.ux-tap .sb-ghost,
.ux-tap .sb-shop-it {
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ux-tap .sb-card:active,
.ux-tap .sb-book:active,
.ux-tap .sb-ghost:active,
.ux-tap .sb-shop-it:active {
  transform: scale(0.972);
  filter: brightness(0.97);
}

/* 2. Thumb-reach action bar. The safe-area inset keeps it clear of the home indicator; without that
      the button sits under the gesture bar and is genuinely hard to press. */
.ux-thumb .sb-thumbbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
@media (min-width: 860px) {
  .ux-thumb .sb-thumbbar {
    display: none;
  }
}

/* 3. Swipeable cards — native scrolling, so momentum and rubber-banding are the device's own. */
.ux-swipe .sb-grid,
.ux-swipe .sb-shop-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.ux-swipe .sb-grid > *,
.ux-swipe .sb-shop-grid > * {
  flex: 0 0 82%;
  scroll-snap-align: center;
}
.ux-swipe .sb-grid::-webkit-scrollbar,
.ux-swipe .sb-shop-grid::-webkit-scrollbar {
  display: none;
}

/* 4. Sticky section headings — on a phone every page is long, and this is the cheapest way to keep
      your place. */
.ux-stickyhead .sb-secttl {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0;
  /* Was hard-coded white. On the fitness palette the page is near-black, so a white bar appeared
     behind green eyebrow text: measured 1.66:1, effectively unreadable, on the schedule archetype.
     --sticky-bg lets a dark category say what its own ground is; the default keeps every light
     trade exactly as it was. */
  background: var(--sticky-bg, rgba(255, 255, 255, 0.93));
}

/* 5. Scroll-edge fade. There are no scrollbars on a phone, so this is how "there is more" is said. */
.ux-fade .sb-grid,
.ux-fade .sb-gal,
.ux-fade .sb-shop-grid {
  -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, #000 86%, transparent 100%);
}

/* 6. Native accordion. The browser's own disclosure element: correct for keyboard and screen reader
      with no script at all. */
.ux-acc .sb-qa summary,
.ux-acc .sb-mi {
  min-height: 48px;
  display: flex;
  align-items: center;
}
.ux-acc .sb-qa[open] summary {
  color: var(--ac);
}

/* 7. Reading progress. --prog is set by script; at 0 the rail is simply invisible. */
.ux-prog .sb-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(var(--prog, 0));
  transform-origin: 0 50%;
  background: var(--ac);
  z-index: 50;
}

/* 8. Loading shimmer, for the seconds a phone connection actually takes. */
.ux-skel .sb-thumb:empty,
.ux-skel .sb-gal-ph:empty {
  background: linear-gradient(100deg, #eef1f6 30%, #f7f9fc 50%, #eef1f6 70%);
  background-size: 220% 100%;
  animation: ux-shimmer 1.4s linear infinite;
}
@keyframes ux-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

/* 9. Section snapping — PROXIMITY, not mandatory, so it never fights a deliberate scroll. */
@media (max-width: 860px) {
  .ux-snapsec {
    scroll-snap-type: y proximity;
  }
  .ux-snapsec .sb-body,
  .ux-snapsec .sb-menu,
  .ux-snapsec .sb-gal,
  .ux-snapsec .sb-band {
    scroll-snap-align: start;
    scroll-margin-top: 8px;
  }
}

/* 10. Scrollable tab rail, instead of tabs wrapping into three cramped rows. */
.ux-tabs .sb-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ux-tabs .sb-nav > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.ux-tabs .sb-nav::-webkit-scrollbar {
  display: none;
}

/* 11. Press-lift: confirms WHICH of a dense grid the finger actually landed on. */
.ux-lift .sb-card,
.ux-lift .sb-team-m {
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease;
}
.ux-lift .sb-card:active,
.ux-lift .sb-team-m:active {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* 12. Overlapping faces instead of a grid that eats a whole phone screen. */
.ux-avatars .sb-team-row {
  display: flex;
  align-items: center;
}
.ux-avatars .sb-team-m {
  margin-left: -14px;
  border: 2px solid #fff;
  border-radius: 99px;
}
.ux-avatars .sb-team-m:first-child {
  margin-left: 0;
}

/* 13. Comfortable tap targets. Not decoration — the most common phone defect there is, and the
       difference between a site that can be booked from and one that cannot. */
.ux-bigtap .sb-book,
.ux-bigtap .sb-ghost,
.ux-bigtap .sb-nav > *,
.ux-bigtap .sb-fl,
.ux-bigtap .sb-add {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}

/* 14. Sticky price bar, so the decision is always one tap away down a long menu. */
.ux-price .sb-menu-g h4 {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.94);
  padding: 10px 0;
  z-index: 4;
}

/* 15. Full-bleed pull quote — on a narrow screen this is the only way one line becomes a moment. */
/* Full-bleed via viewport units overshoots by the scrollbar width, because 100vw counts the
   scrollbar and the content box does not — measured 15px of horizontal page scroll on a phone, the
   only thing making a generated site slide sideways. .sb-site clips it (see there). */
.ux-quote .sb-reviews {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 26px 22px;
  text-align: center;
  background: color-mix(in oklab, var(--ac) 8%, #fff);
}

/* 16. A four-column grid is four cramped columns on a phone; make it a rail instead. */
@media (max-width: 700px) {
  .ux-gridrail .sb-grid,
  .ux-gridrail .sb-gal {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .ux-gridrail .sb-grid > *,
  .ux-gridrail .sb-gal > * {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}

/* 17. Tap to reveal. Hover cannot do this on a phone; a tap can.
       Same inversion as the entrance above: the description only collapses once the script that can
       expand it again is running. Otherwise a missing script leaves every menu description hidden
       with no way for anyone to see it. */
.ux-tapreveal.ux-armed .sb-mi em {
  display: none;
}
.ux-tapreveal.ux-armed .sb-mi.open em {
  display: block;
}

/* 18. Soft entrance — the plain-JS reveal that works on every phone made this decade, unlike the
       scroll-timeline version which is simply absent on most of them. */
/* INVERTED DELIBERATELY. This used to hide the content and rely on script to reveal it, which meant
   that with the script missing — as it was, for a while, on every generated site — the cards, steps,
   gallery and FAQ were simply INVISIBLE. Decoration must never be able to take content with it.

   So nothing hides until `.ux-armed` is present, which the script adds only once it is actually
   running and able to reveal again. No script, no armed class, no hiding: the page is complete. */
.ux-enter.ux-armed .sb-card,
.ux-enter.ux-armed .sb-step,
.ux-enter.ux-armed .sb-gal-ph,
.ux-enter.ux-armed .sb-qa {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ux-enter .ux-in {
  opacity: 1;
  transform: none;
}

/* 19. A floating pill instead of a full header bar, so the phone keeps its vertical space. */
@media (max-width: 860px) {
  .ux-pill .sb-top {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(8px + env(safe-area-inset-top, 0px));
    z-index: 35;
    border-radius: 99px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
  .ux-pill .sb-hero {
    padding-top: 72px;
  }
}

/* 20. Haptic confirmation is script-only (navigator.vibrate); this class is just the marker the
       script looks for. Android only — iOS does not expose it — and it confirms, never informs. */
.ux-haptic {
  --haptic: 1;
}

/* Motion off, information intact. */
@media (prefers-reduced-motion: reduce) {
  .ux-tap .sb-card,
  .ux-tap .sb-book,
  .ux-lift .sb-card,
  .ux-lift .sb-team-m,
  .ux-enter .sb-card,
  .ux-enter .sb-step,
  .ux-enter .sb-gal-ph,
  .ux-enter .sb-qa {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .ux-skel .sb-thumb:empty,
  .ux-skel .sb-gal-ph:empty {
    animation: none !important;
  }
}