.elementor-10829 .elementor-element.elementor-element-1525c4a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10829 .elementor-element.elementor-element-1525c4a .wcf-image-hover{background-image:url( https://basebrandsagency.com/wp-content/plugins/elementor/assets/images/placeholder.png );}/* Start custom CSS *//*
@font-face {
  font-family: 'Stolzl';
  src: url('/wp-content/uploads/fonts/stolzl_bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IvyPresto Display';
  src: url('/wp-content/uploads/fonts/ivy-presto-display-semibold.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
*/

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bb-navy:    #000B24;
  --bb-cream:   #EFEAE7;
  --bb-teal:    #578A8B;
  --bb-green:   #22C55E;
  --bb-gold:    #DCAD67;
  --bb-slate:   #9CAAAD;
  --bb-blush:   #E5C3B9;

  --font-head:    'Stolzl', 'Montserrat', sans-serif;
  --font-cadence: 'IvyPresto Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Kanit', sans-serif;

  --track-tight:  -0.06em;
  --track-wide:   0.12em;
  --r-card:       12px;
  --r-pill:       100px;
  --section-v:    120px;
  --gutter:       60px;
}

/* ── RESET ──────────────────────────────────────────────────── */
.bb-cs *, .bb-cs *::before, .bb-cs *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.bb-cs { background: var(--bb-cream); color: var(--bb-navy);
  font-family: var(--font-body); font-size: 18px; font-weight: 400;
  line-height: 1.22em; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; }
.bb-cs a { text-decoration: none; }
.bb-cs ul { list-style: none; }
.bb-cs img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.bb-cs .bb-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.bb-cs .bb-section { padding: var(--section-v) 0; position: relative; overflow: hidden; }

/* ── TYPE UTILITIES ─────────────────────────────────────────── */
.bb-cs .bb-head {
  font-family: var(--font-head); font-weight: 700;
  text-transform: none; letter-spacing: var(--track-tight);
  line-height: 0.95em; color: inherit; }
.bb-cs .bb-cadence {
  font-family: var(--font-cadence); font-style: italic;
  font-weight: 600; text-transform: none;
  letter-spacing: -0.02em; line-height: 1.1em; }
.bb-cs .bb-label {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; }
.bb-cs .bb-body {
  font-family: var(--font-body); font-size: 18px;
  font-weight: 400; line-height: 1.7em; color: rgba(0,11,36,.72); }

/* ── SECTION LABEL ──────────────────────────────────────────── */
.bb-cs .bb-section-label {
  display: flex; align-items: center; gap: 14px; margin-bottom: 48px; }
.bb-cs .bb-section-label::before {
  content: ''; display: block; width: 28px; height: 2px;
  background: var(--bb-gold); flex-shrink: 0; }

/* ── PILLS ──────────────────────────────────────────────────── */
.bb-cs .bb-pill {
  display: inline-flex; align-items: center; padding: 6px 16px;
  border-radius: var(--r-pill); font-family: var(--font-body);
  font-size: 12px; font-weight: 400;
  letter-spacing: .06em; text-transform: lowercase; }
.bb-cs .bb-pill--cream-outline { border: 1px solid rgba(239,234,231,.28); color: var(--bb-cream); }
.bb-cs .bb-pill--teal { background: var(--bb-gold); color: var(--bb-navy); }

/* ── CHANNEL CHIPS ──────────────────────────────────────────── */
.bb-cs .bb-ch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 7px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  text-transform: lowercase; white-space: nowrap;
  border: 1px solid rgba(0,11,36,.14); background: #fff;
  color: var(--bb-navy); transition: all .22s ease; cursor: default; }
.bb-cs .bb-ch:hover { background: var(--bb-navy); color: var(--bb-cream);
  border-color: var(--bb-navy); }
.bb-cs .bb-ch svg { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; }

/* Dark-bg variant (used inside navy sections) */
.bb-cs .bb-ch--dark {
  background: rgba(239,234,231,.07); border-color: rgba(239,234,231,.15);
  color: rgba(239,234,231,.85); }
.bb-cs .bb-ch--dark:hover { background: rgba(239,234,231,.15); color: var(--bb-cream); }

/* ── IMAGE PLACEHOLDER ──────────────────────────────────────── */
.bb-cs .bb-img-placeholder {
  background: rgba(0,11,36,.07); border: 2px dashed rgba(0,11,36,.18);
  border-radius: var(--r-card); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: rgba(0,11,36,.4); font-family: var(--font-body);
  font-size: 13px; text-transform: lowercase; letter-spacing: .06em; }
.bb-cs .bb-img-placeholder--dark {
  background: rgba(239,234,231,.04); border-color: rgba(239,234,231,.15);
  color: rgba(239,234,231,.3); }
.bb-cs .bb-img-placeholder svg { opacity: .4; }

/* ── FADE ANIMATION ─────────────────────────────────────────── */
.bb-cs .bb-fade {
  opacity: 0; transform: translateY(24px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              transform .65s cubic-bezier(.22,1,.36,1); }
.bb-cs .bb-fade.bb-visible { opacity: 1; transform: translateY(0); }
.bb-cs .bb-fade-d1 { transition-delay: .08s; }
.bb-cs .bb-fade-d2 { transition-delay: .16s; }
.bb-cs .bb-fade-d3 { transition-delay: .24s; }
.bb-cs .bb-fade-d4 { transition-delay: .32s; }
.bb-cs .bb-fade-d5 { transition-delay: .40s; }

/* ══════════════════════════════════════════════════════════════
   § HERO
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-hero {
  background: var(--bb-navy); padding: 160px 0 80px;
  position: relative; overflow: hidden; }

.bb-cs .bb-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

.bb-cs .bb-hero-headline {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(44px,5vw,72px); text-transform: none;
  letter-spacing: var(--track-tight); line-height: .93em;
  color: var(--bb-cream); max-width: 900px; margin-bottom: 20px; }
.bb-cs .bb-hero-headline .bb-arrow { color: var(--bb-gold); font-style: normal; }

.bb-cs .bb-hero-sub {
  font-family: var(--font-cadence); font-style: italic;
  font-size: clamp(26px,3.5vw,44px); color: var(--bb-blush);
  letter-spacing: -.02em; margin-bottom: 56px; }

.bb-cs .bb-hero-meta {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.bb-cs .bb-hero-detail {
  display: flex; flex-direction: column; gap: 5px;
  padding: 0 36px 0 0; margin-right: 36px;
  border-right: 1px solid rgba(239,234,231,.15); }
.bb-cs .bb-hero-detail:last-child { border-right: none; margin-right: 0; }
.bb-cs .bb-hero-detail .d-label {
  font-family: var(--font-body); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--bb-slate); }
.bb-cs .bb-hero-detail .d-value {
  font-family: var(--font-body); font-size: 15px; color: rgba(239,234,231,.9); }

/* ══════════════════════════════════════════════════════════════
   § STATS
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-stats {
  background: var(--bb-navy); padding: 64px 0 56px;
  border-bottom: 1px solid rgba(239,234,231,.1); }
.bb-cs .bb-stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.bb-cs .bb-stat-col {
  padding: 0 40px; border-right: 1px solid rgba(239,234,231,.15);
  display: flex; flex-direction: column; gap: 8px; }
.bb-cs .bb-stat-col:first-child { padding-left: 0; }
.bb-cs .bb-stat-col:last-child  { border-right: none; padding-right: 0; }
.bb-cs .bb-stat-num {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(28px,3.2vw,42px); letter-spacing: var(--track-tight);
  line-height: 1em; color: var(--bb-cream); display: block; }
.bb-cs .bb-stat-num .accent { color: var(--bb-cream); }
.bb-cs .bb-stat-label {
  font-family: var(--font-body); font-size: 11px;
  color: rgba(239,234,231,.55); text-transform: lowercase; }
.bb-cs .bb-stat-sub {
  font-family: var(--font-body); font-size: 10px;
  color: rgba(239,234,231,.35); text-transform: uppercase; letter-spacing: .1em; }

/* ══════════════════════════════════════════════════════════════
   § BRIEF
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-brief { background: var(--bb-cream); padding: var(--section-v) 0; }

.bb-cs .bb-brief-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }

.bb-cs .bb-brief-left .bb-head { font-size: clamp(36px,4.5vw,60px); margin-bottom: 28px; }
.bb-cs .bb-brief-left .bb-body { margin-bottom: 20px; }

.bb-cs .bb-pullquote {
  font-family: var(--font-cadence); font-style: italic; font-weight: 600;
  font-size: clamp(20px,2.4vw,28px); color: var(--bb-navy); line-height: 1.4em;
  padding-left: 24px; border-left: 3px solid var(--bb-gold); margin: 36px 0;
  background: transparent; padding-right: 0; }

/* "Sound familiar?" callout inside brief */
.bb-cs .bb-familiar {
  background: var(--bb-navy); border-radius: var(--r-card);
  padding: 36px; margin-top: 40px; }
.bb-cs .bb-familiar .f-label {
  font-family: var(--font-body); font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--bb-gold); margin-bottom: 20px; display: block; }
.bb-cs .bb-familiar .f-head {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(18px,2vw,24px); letter-spacing: var(--track-tight);
  color: var(--bb-cream); margin-bottom: 20px; }
.bb-cs .bb-familiar-list {
  display: flex; flex-direction: column; gap: 12px; }
.bb-cs .bb-familiar-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-body); font-size: 14px;
  color: rgba(239,234,231,.75); line-height: 1.5em; }
.bb-cs .bb-familiar-list li::before {
  content: '\2197'; color: var(--bb-gold); flex-shrink: 0; font-weight: 700; }

.bb-cs .bb-brief-right { background: var(--bb-navy); border-radius: var(--r-card); padding: 48px; }
.bb-cs .bb-brief-right .bb-label { color: var(--bb-teal); margin-bottom: 28px; display: block; }
.bb-cs .bb-brief-right-title {
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  letter-spacing: var(--track-tight); color: var(--bb-cream);
  margin-bottom: 20px; }
.bb-cs .bb-dash-list { display: flex; flex-direction: column; gap: 14px; }
.bb-cs .bb-dash-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--font-body); font-size: 15px;
  color: rgba(239,234,231,.8); line-height: 1.5em; }
.bb-cs .bb-dash-list li::before {
  content: '+'; color: var(--bb-gold); flex-shrink: 0;
  font-family: var(--font-head); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   § STRATEGIC INSIGHT
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-insight {
  background: var(--bb-navy); padding: var(--section-v) 0;
  position: relative; overflow: hidden; }
.bb-cs .bb-insight::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(220,173,103,.06) 0%, transparent 70%);
  pointer-events: none; }

.bb-cs .bb-insight-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  position: relative; z-index: 1; }

.bb-cs .bb-insight-left .bb-label { color: var(--bb-teal); margin-bottom: 24px; display: block; }
.bb-cs .bb-insight-quote {
  font-family: var(--font-cadence); font-style: italic; font-weight: 600;
  font-size: clamp(28px,3.5vw,50px); color: var(--bb-cream);
  line-height: 1.1em; letter-spacing: -.02em; }
.bb-cs .bb-insight-quote em { color: var(--bb-gold); font-style: normal; }

.bb-cs .bb-insight-right { display: flex; flex-direction: column; gap: 28px; }
.bb-cs .bb-insight-point {
  padding-left: 20px; border-left: 2px solid rgba(220,173,103,.4); }
.bb-cs .bb-insight-point h4 {
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  letter-spacing: -0.04em; color: var(--bb-cream); margin-bottom: 6px; }
.bb-cs .bb-insight-point p {
  font-family: var(--font-body); font-size: 14px;
  color: rgba(239,234,231,.55); line-height: 1.6em; }

/* ══════════════════════════════════════════════════════════════
   § JOURNEY (PHASES)
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-journey {
  background: var(--bb-navy); padding: var(--section-v) 0 0;
  position: relative; overflow: hidden; }
.bb-cs .bb-journey .bb-section-label .bb-label { color: rgba(239,234,231,.45); }

.bb-cs .bb-journey-hdr {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 60px; }
.bb-cs .bb-journey-hdr .bb-head { font-size: clamp(44px,5.5vw,80px); color: var(--bb-cream); }
.bb-cs .bb-journey-hdr p {
  font-family: var(--font-body); font-size: 15px; color: rgba(239,234,231,.4);
  max-width: 260px; text-align: right; line-height: 1.7em; }

/* Carousel: flex, 2.5 cards visible */
.bb-cs .bb-phases-scroll { overflow: hidden; position: relative; }
.bb-cs .bb-phases-scroll::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 160px;
  background: linear-gradient(to right, transparent, var(--bb-navy));
  pointer-events: none; z-index: 2; }
.bb-cs .bb-phases {
  display: flex; flex-wrap: nowrap; gap: 20px;
  transition: transform .38s cubic-bezier(.4,0,.2,1); will-change: transform;
  position: relative; z-index: 1; }
.bb-cs .bb-phase {
  flex: 0 0 calc(40% - 10px);
  background: rgba(239,234,231,.04); border: 1px solid rgba(239,234,231,.18);
  border-radius: var(--r-card); padding: 36px 32px 32px;
  position: relative; overflow: hidden;
  transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.bb-cs .bb-phase:hover {
  background: rgba(239,234,231,.07);
  border-color: rgba(220,173,103,.35); transform: translateY(-3px); }


.bb-cs .bb-phase-bg { /* watermark number */
  font-family: var(--font-head); font-weight: 700; font-size: 80px;
  letter-spacing: var(--track-tight); color: rgba(220,173,103,.15);
  position: absolute; top: 16px; right: 20px; line-height: 1;
  pointer-events: none; }
.bb-cs .bb-phase-period {
  font-family: var(--font-body); font-size: 11px;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--bb-gold); display: block; margin-bottom: 14px; }
.bb-cs .bb-phase-title {
  font-family: var(--font-head); font-weight: 700; font-size: 22px;
  letter-spacing: -.04em;
  color: var(--bb-cream); line-height: 1.1em; margin-bottom: 20px; }
.bb-cs .bb-phase-channels { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bb-cs .bb-phase-items { display: flex; flex-direction: column; gap: 9px; }
.bb-cs .bb-phase-items li {
  font-family: var(--font-body); font-size: 14px;
  color: rgba(239,234,231,.62); line-height: 1.45em;
  padding-left: 16px; position: relative; }
.bb-cs .bb-phase-items li::before {
  content: '+'; position: absolute; left: 0;
  color: var(--bb-gold); font-weight: 700; font-size: 13px; }
.bb-cs .bb-phase-outcome {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(239,234,231,.08);
  font-family: var(--font-body); font-size: 13px;
  color: rgba(220,173,103,.85); line-height: 1.5em; }

/* ══════════════════════════════════════════════════════════════
   § WORK SHOWCASE — TABBED FRAMES
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-showcase {
  background: var(--bb-navy); padding: var(--section-v) 0 0;
  border-bottom: 1px solid rgba(239,234,231,.18); }
.bb-cs .bb-showcase .bb-section-label .bb-label { color: rgba(239,234,231,.45); }

/* ── Tab navigation ── */
.bb-cs .bb-work-tabs-nav {
  display: flex; gap: 4px; margin-bottom: 48px;
  padding: 5px; background: rgba(239,234,231,.06);
  border-radius: 10px; border: 1px solid rgba(239,234,231,.22); width: fit-content; }
.bb-cs .bb-work-tab-btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .07em;
  color: rgba(239,234,231,.5); background: none; border: none;
  cursor: pointer; padding: 10px 22px; position: relative; border-radius: 7px;
  transition: color .2s ease, background .2s ease; }
.bb-cs .bb-work-tab-btn:hover { color: rgba(239,234,231,.85); background: rgba(239,234,231,.07); }
.bb-cs .bb-work-tab-btn.active {
  color: var(--bb-navy); background: var(--bb-cream); font-weight: 500; }
.bb-cs .bb-work-tab-panel { display: none; padding-bottom: 60px; }
.bb-cs .bb-work-tab-panel.active { display: block; }

/* ── Outlined wireframe base ── */
.bb-cs .bb-wf {
  border: 1.5px solid rgba(239,234,231,.12);
  border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.15); }
.bb-cs .bb-wf-bar {
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-bottom: 1px solid rgba(239,234,231,.08); flex-shrink: 0; }
.bb-cs .bb-wf-bar--browser {
  height: 34px; background: rgba(239,234,231,.04); }
.bb-cs .bb-wf-dots { display: flex; gap: 5px; }
.bb-cs .bb-wf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(239,234,231,.2); }
.bb-cs .bb-wf-urlbar {
  flex: 1; height: 18px; border-radius: 4px; max-width: 300px;
  border: 1px solid rgba(239,234,231,.1);
  display: flex; align-items: center; padding: 0 8px;
  font-family: var(--font-body); font-size: 9px;
  color: rgba(239,234,231,.22); letter-spacing: .04em; }
.bb-cs .bb-wf-viewport { overflow: hidden; }
.bb-cs .bb-wf-viewport img { width: 100%; display: block; }
/* Meta chrome */
.bb-cs .bb-wf-bar--meta {
  height: 32px; background: rgba(24,119,242,.1);
  border-bottom: 1px solid rgba(24,119,242,.18); }
.bb-cs .bb-wf-meta-icon { width: 14px; height: 14px; flex-shrink: 0; }
.bb-cs .bb-wf-meta-label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px; font-weight: 700; color: #1877F2;
  letter-spacing: .02em; }
.bb-cs .bb-wf-meta-tag {
  margin-left: auto; font-family: var(--font-body); font-size: 9px;
  color: rgba(24,119,242,.55); letter-spacing: .06em; text-transform: lowercase; }
/* Instagram chrome */
.bb-cs .bb-wf-bar--ig {
  height: 32px; background: rgba(239,234,231,.03);
  border-bottom: 1px solid rgba(239,234,231,.08); }
.bb-cs .bb-wf-ig-icon { width: 14px; height: 14px; flex-shrink: 0; }
.bb-cs .bb-wf-ig-handle {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 10px; font-weight: 600; color: rgba(239,234,231,.5); }
.bb-cs .bb-wf-ig-tag {
  margin-left: auto; font-family: var(--font-body); font-size: 9px;
  color: rgba(239,234,231,.25); letter-spacing: .06em; }

/* ── Scrollable viewport (web tab) ── */
.bb-cs .bb-wf-viewport-wrap { position: relative; }
.bb-cs .bb-wf-viewport--scroll {
  overflow-y: auto; max-height: 600px; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: rgba(239,234,231,.15) transparent;
  -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.bb-cs .bb-wf-viewport--scroll::-webkit-scrollbar { width: 3px; }
.bb-cs .bb-wf-viewport--scroll::-webkit-scrollbar-thumb {
  background: rgba(239,234,231,.2); border-radius: 2px; }

/* Scroll overlay — centred pill inside the viewport */
.bb-cs .bb-wf-scroll-overlay {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; pointer-events: none; z-index: 2;
  transition: opacity .5s ease; }
.bb-cs .bb-wf-scroll-overlay.bb-hint-gone { opacity: 0; }
.bb-cs .bb-wf-scroll-overlay-pill {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: rgba(220,173,103,.88); backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid rgba(220,173,103,.3); border-radius: 48px;
  padding: 22px 32px; }
.bb-cs .bb-wf-scroll-overlay-pill svg { animation: bb-nudge .9s ease-in-out infinite alternate; }
.bb-cs .bb-wf-scroll-overlay-pill span {
  font-family: var(--font-body); font-size: 10px;
  color: rgba(0,11,36,.7); letter-spacing: .15em; text-transform: lowercase; }

/* Small text hint below the browser frame */
.bb-cs .bb-wf-scroll-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-family: var(--font-body); font-size: 10px;
  color: rgba(239,234,231,.22); letter-spacing: .1em; text-transform: lowercase;
  transition: opacity .4s ease; }
.bb-cs .bb-wf-scroll-hint.bb-hint-gone { opacity: 0; pointer-events: none; }
@keyframes bb-nudge { from { transform: translateY(0); } to { transform: translateY(5px); } }

/* ── Stock-market up arrow ── */
.bb-cs .bb-up { color: var(--bb-green); font-size: .65em; vertical-align: middle; margin-right: 1px; font-weight: 900; }

/* ── Results tooltip ── */
.bb-cs .bb-tip { position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.bb-cs .bb-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 0;
  min-width: 200px; max-width: 280px;
  background: var(--bb-navy); color: var(--bb-cream);
  font-family: var(--font-body); font-size: 12px; line-height: 1.5em;
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid rgba(239,234,231,.22);
  opacity: 0; pointer-events: none;
  transform: translateY(4px); transition: opacity .2s ease, transform .2s ease;
  z-index: 10; white-space: normal; }
.bb-cs .bb-tip:hover::after { opacity: 1; transform: translateY(0); }
.bb-cs .bb-tip-icon {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(239,234,231,.15); color: rgba(239,234,231,.5);
  font-family: var(--font-body); font-size: 9px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 1px solid rgba(239,234,231,.22); }

/* ── Results key legend ── */
.bb-cs .bb-results-key {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid rgba(239,234,231,.18); }
.bb-cs .bb-results-key-item { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1; }
.bb-cs .bb-results-key-label {
  font-family: var(--font-body); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(239,234,231,.35); }
.bb-cs .bb-results-key-val {
  font-family: var(--font-body); font-size: 13px; color: rgba(239,234,231,.6); line-height: 1.5em; }

/* ── Phase connectors ── */
.bb-cs .bb-phases-wrap { position: relative; }
.bb-cs .bb-phases-connector {
  display: flex; position: absolute; top: 44px; left: 0; right: 0;
  pointer-events: none; z-index: 0; }
.bb-cs .bb-phases-connector-line {
  flex: 1; height: 1px; background: rgba(220,173,103,.2); margin-top: 4px; }
.bb-cs .bb-phases-connector-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bb-gold); opacity: .45; flex-shrink: 0; margin-top: 0; }
.bb-cs .bb-phase { position: relative; z-index: 1; }

/* ── Channel chip icon wrapper ── */
.bb-cs .bb-ch-ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; display: flex; align-items: center;
  justify-content: center; overflow: hidden; flex-shrink: 0; }
.bb-cs .bb-ch-ico svg { width: 28px; height: 28px; }
.bb-cs .bb-ch { padding: 5px 14px 5px 5px; }

/* ── "Is this you?" strip ── */
.bb-cs .bb-familiar-strip {
  background: #fff; padding: var(--section-v) 0 calc(var(--section-v) + 48px); }
.bb-cs .bb-familiar-strip-inner {
  display: grid; grid-template-columns: 1fr; gap: 48px; }
.bb-cs .bb-familiar-strip-left { text-align: center; }
.bb-cs .bb-familiar-strip-left .bb-cadence {
  font-size: clamp(32px,4vw,56px); color: var(--bb-navy); margin-bottom: 16px; display: block; }
.bb-cs .bb-familiar-strip-left > p {
  font-family: var(--font-body); font-size: 16px;
  color: rgba(0,11,36,.6); line-height: 1.7em; max-width: 600px; margin: 0 auto; }
.bb-cs .bb-familiar-cards {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.bb-cs .bb-familiar-card {
  background: rgba(0,11,36,.04);
  border: 1px solid rgba(0,11,36,.12);
  border-radius: var(--r-card); padding: 20px; }
.bb-cs .bb-familiar-card-icon { font-size: 20px; margin-bottom: 8px; display: block; }
.bb-cs .bb-familiar-card p {
  font-family: var(--font-body); font-size: 14px;
  color: rgba(0,11,36,.65); line-height: 1.5em; }
.bb-cs .bb-familiar-card p strong { color: var(--bb-gold); font-weight: 500; }

/* ── Day 1 vs Month 12 redesign ── */
.bb-cs .bb-shift { background: var(--bb-navy); padding: var(--section-v) 0; border-top: 1px solid rgba(239,234,231,.18); }
.bb-cs .bb-shift-cols {
  display: grid; grid-template-columns: 1fr 64px 1fr; gap: 0; align-items: stretch; }
.bb-cs .bb-shift-col {
  padding: 40px; border: 1px solid rgba(239,234,231,.12);
  border-radius: var(--r-card); display: flex; flex-direction: column; gap: 20px;
  background: rgba(239,234,231,.03); opacity: .7; }
.bb-cs .bb-shift-col.after-col { border-color: rgba(220,173,103,.5); background: rgba(220,173,103,.08); opacity: 1; }
.bb-cs .bb-shift-col-badge {
  font-family: var(--font-body); font-size: 10px; text-transform: uppercase;
  letter-spacing: .14em; color: rgba(239,234,231,.4); display: block; margin-bottom: 4px; }
.bb-cs .bb-shift-col.after-col .bb-shift-col-badge { color: var(--bb-gold); }
.bb-cs .bb-shift-col-title {
  font-family: var(--font-head); font-weight: 700; font-size: 22px;
  letter-spacing: -.04em; color: var(--bb-cream); line-height: 1.15em; }
.bb-cs .bb-shift-col.after-col .bb-shift-col-title { color: var(--bb-cream); }
.bb-cs .bb-shift-pain-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.bb-cs .bb-shift-pain-list li {
  font-family: var(--font-body); font-size: 14px;
  color: rgba(239,234,231,.6); line-height: 1.5em;
  padding-left: 18px; position: relative; }
.bb-cs .bb-shift-pain-list li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 13px; height: 13px; display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Crect width='13' height='13' rx='3' fill='%23ef4444' opacity='.2'/%3E%3Cpath d='M3.5 3.5l6 6M9.5 3.5l-6 6' stroke='%23ef4444' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.bb-cs .bb-shift-success-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.bb-cs .bb-shift-success-list li {
  font-family: var(--font-body); font-size: 14px;
  color: rgba(239,234,231,.9); line-height: 1.5em;
  padding-left: 18px; position: relative; }
.bb-cs .bb-shift-success-list li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 13px; height: 13px; display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Crect width='13' height='13' rx='3' fill='%2322C55E' opacity='.2'/%3E%3Cpath d='M2.5 6.8l3 3 5-5.5' stroke='%2322C55E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.bb-cs .bb-shift-col .sc-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-cs .bb-shift-divider {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 0 12px; }
.bb-cs .bb-shift-divider-line { flex: 1; width: 1px; background: rgba(239,234,231,.18); }
.bb-cs .bb-shift-divider-arrow {
  font-family: var(--font-head); font-size: 22px; font-weight: 700;
  color: var(--bb-gold); flex-shrink: 0; }

/* ── Team with photos ── */
.bb-cs .bb-team-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bb-cs .bb-member {
  background: transparent;
  transition: transform .25s ease; }
.bb-cs .bb-member:hover { transform: translateY(-3px); }
.bb-cs .bb-member-photo {
  aspect-ratio: 4/5; overflow: hidden; background: rgba(0,11,36,.06);
  border-radius: 12px; position: relative; margin-bottom: 14px; }
.bb-cs .bb-member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-cs .bb-member-photo .bb-img-placeholder { position: absolute; inset: 0; border-radius: 0; border: none; }
.bb-cs .bb-member-body { padding: 0 4px; }
.bb-cs .bb-member .m-name {
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  letter-spacing: -.04em; color: var(--bb-navy); display: block; margin-bottom: 3px; }
.bb-cs .bb-member .m-role {
  font-family: var(--font-body); font-size: 12px;
  color: rgba(0,11,36,.52); line-height: 1.4em; }

/* ── Brief section image ── */
.bb-cs .bb-brief-img {
  border-radius: var(--r-card); overflow: hidden; margin-bottom: 24px; }
.bb-cs .bb-brief-img img { width: 100%; display: block; object-fit: cover; }

/* ── Testimonial 2-column ── */
.bb-cs .bb-testi-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* ── Contact form in CTA ── */
.bb-cs .bb-cta-form { margin-top: 40px; text-align: left; max-width: 620px; margin-left: auto; margin-right: auto; }
.bb-cs .bb-cta-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.bb-cs .bb-form-field { display: flex; flex-direction: column; gap: 6px; }
.bb-cs .bb-form-field label {
  font-family: var(--font-body); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(239,234,231,.45); }
.bb-cs .bb-form-field input,
.bb-cs .bb-form-field textarea,
.bb-cs .bb-form-field select {
  background: rgba(239,234,231,.07); border: 1px solid rgba(239,234,231,.22);
  border-radius: 8px; padding: 13px 16px; color: var(--bb-cream);
  font-family: var(--font-body); font-size: 15px;
  outline: none; transition: border-color .2s ease; width: 100%; }
.bb-cs .bb-form-field input:focus,
.bb-cs .bb-form-field textarea:focus,
.bb-cs .bb-form-field select:focus { border-color: var(--bb-gold); }
.bb-cs .bb-form-field input::placeholder,
.bb-cs .bb-form-field textarea::placeholder { color: rgba(239,234,231,.25); }
.bb-cs .bb-form-field textarea { resize: vertical; min-height: 100px; }
.bb-cs .bb-form-field select option { background: var(--bb-navy); color: var(--bb-cream); }
.bb-cs .bb-form-full { grid-column: 1 / -1; }
.bb-cs .bb-form-submit {
  width: 100%; margin-top: 4px; background: var(--bb-gold); color: var(--bb-navy);
  border: none; border-radius: var(--r-pill); padding: 16px 32px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: .04em; cursor: pointer;
  transition: background .25s ease, transform .25s ease; }
.bb-cs .bb-form-submit:hover { background: var(--bb-cream); transform: translateY(-2px); }

/* ── IG Carousel horizontal-scroll viewport ── */
.bb-cs .bb-wf-viewport--carousel {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; cursor: grab; }
.bb-cs .bb-wf-viewport--carousel:active { cursor: grabbing; }
.bb-cs .bb-wf-viewport--carousel::-webkit-scrollbar { display: none; }
.bb-cs .bb-wf-viewport--carousel img {
  min-width: 155%; height: auto; max-width: none; display: block;
  scroll-snap-align: start; }

/* ── Photo frame ── */
.bb-cs .bb-wf-photo { border: 1.5px solid rgba(239,234,231,.12); border-radius: 10px; overflow: hidden; }
.bb-cs .bb-wf-photo img { width: 100%; height: auto; display: block; aspect-ratio: 3/4; object-fit: cover; }
.bb-cs .bb-wf-bar--photo { height: 32px; background: rgba(239,234,231,.03); border-bottom: 1px solid rgba(239,234,231,.08); }
.bb-cs .bb-wf-photo-label {
  font-family: var(--font-body); font-size: 10px; color: rgba(239,234,231,.35); letter-spacing: .06em; }

/* ── Video frame ── */
.bb-cs .bb-wf-video { border: 1.5px solid rgba(239,234,231,.12); border-radius: 10px; overflow: hidden; }
.bb-cs .bb-wf-bar--video { height: 32px; background: rgba(239,234,231,.03); border-bottom: 1px solid rgba(239,234,231,.08); }
.bb-cs .bb-wf-video-label {
  font-family: var(--font-body); font-size: 10px; color: rgba(239,234,231,.35); letter-spacing: .06em; }
.bb-cs .bb-wf-video-live {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 9px;
  color: rgba(239,234,231,.25); letter-spacing: .08em; text-transform: lowercase; }
.bb-cs .bb-wf-video-live::before {
  content: ''; display: block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--bb-teal); }
.bb-cs .bb-wf-video video {
  width: 100%; display: block; object-fit: cover; aspect-ratio: 3/4; }

/* ── Grid layouts ── */
.bb-cs .bb-wf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bb-cs .bb-wf-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

/* ── Photo & Video drag carousel ── */
.bb-cs .bb-pv-carousel {
  display: flex; flex-direction: column; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 6px;
  cursor: grab; user-select: none; -webkit-user-select: none; }
.bb-cs .bb-pv-carousel::-webkit-scrollbar { display: none; }
.bb-cs .bb-pv-carousel:active { cursor: grabbing; }
.bb-cs .bb-pv-col {
  display: flex; gap: 16px; }
.bb-cs .bb-pv-carousel-item {
  flex: 0 0 calc(22% - 8px); min-width: 0; scroll-snap-align: start; }

/* ── Photo strip ── */
.bb-cs .bb-photo-strip {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
  background: var(--bb-cream); }
.bb-cs .bb-photo-strip-item { overflow: hidden; aspect-ratio: 3/4; }
.bb-cs .bb-photo-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ── Testimonial: 3-section layout ── */
.bb-cs .bb-testi-media {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.bb-cs .bb-testi-photo {
  border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3/4; }
.bb-cs .bb-testi-photo img { width: 100%; height: 100%; object-fit: cover; }
.bb-cs .bb-testi-video-wrap {
  border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 4/5; position: relative;
  background: #000; cursor: pointer; }
.bb-cs .bb-testi-video-wrap video {
  width: 100%; height: 100%; object-fit: cover; }
.bb-cs .bb-testi-video-overlay {
  position: absolute; inset: 0;
  background: rgba(0,11,36,.35); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  transition: background .3s ease; pointer-events: none; }
.bb-cs .bb-testi-video-wrap.playing .bb-testi-video-overlay { opacity: 0; }
.bb-cs .bb-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bb-gold); display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease, background .3s ease; }
.bb-cs .bb-testi-video-wrap:hover .bb-play-btn { transform: scale(1.1); background: var(--bb-cream); }
.bb-cs .bb-play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.bb-cs .bb-video-caption { font-family: var(--font-body); font-size: 13px;
  color: rgba(239,234,231,.8); text-transform: lowercase; letter-spacing: .06em; }

/* ══════════════════════════════════════════════════════════════
   § SERVICES
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-services {
  background: var(--bb-cream); padding: 64px 0;
  border-bottom: 1px solid rgba(0,11,36,.07); }
.bb-cs .bb-services-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.bb-cs .bb-services-key { flex-shrink: 0; min-width: 120px; }
.bb-cs .bb-services-key .bb-label { color: rgba(0,11,36,.45); }
.bb-cs .bb-ch-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ══════════════════════════════════════════════════════════════
   § RESULTS
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-results {
  background: var(--bb-navy); padding: var(--section-v) 0;
  position: relative; overflow: hidden; }
.bb-cs .bb-results::before {
  content: ''; position: absolute; top: 0; right: 0; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(220,173,103,.06) 0%, transparent 70%);
  pointer-events: none; }
.bb-cs .bb-results .bb-section-label .bb-label { color: rgba(239,234,231,.4); }
.bb-cs .bb-results-hdr {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; margin-bottom: 72px; }
.bb-cs .bb-results-hdr .bb-head { font-size: clamp(44px,5.5vw,80px); color: var(--bb-cream); }
.bb-cs .bb-results-hdr p {
  font-family: var(--font-body); font-size: 14px;
  color: rgba(239,234,231,.4); max-width: 240px;
  text-align: right; line-height: 1.7em; }

.bb-cs .bb-result-block { margin-bottom: 52px; }
.bb-cs .bb-result-block:last-child { margin-bottom: 0; }

.bb-cs .bb-rblock-title {
  font-family: var(--font-body); font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em; color: var(--bb-gold);
  display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.bb-cs .bb-rblock-title .bb-ch { font-size: 12px; }
.bb-cs .bb-rblock-title::after {
  content: ''; flex: 1; height: 1px; background: rgba(239,234,231,.08); }

.bb-cs .bb-rtable {
  border: 1px solid rgba(239,234,231,.18);
  border-radius: var(--r-card); overflow: hidden; }
.bb-cs .bb-rtable-head,
.bb-cs .bb-rtable-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; }
.bb-cs .bb-rtable-head { background: rgba(239,234,231,.04); border-bottom: 1px solid rgba(239,234,231,.18); }
.bb-cs .bb-rtable-head > span {
  padding: 14px 24px; font-family: var(--font-body); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em; color: rgba(239,234,231,.3); }
.bb-cs .bb-rtable-row { border-bottom: 1px solid rgba(239,234,231,.06);
  transition: background .2s ease; }
.bb-cs .bb-rtable-row:last-child { border-bottom: none; }
.bb-cs .bb-rtable-row:hover { background: rgba(239,234,231,.03); }
.bb-cs .bb-rtable-row > span { padding: 18px 24px; font-size: 15px; display: flex; align-items: center; }
.bb-cs .r-metric { color: rgba(239,234,231,.7); font-family: var(--font-body); }
.bb-cs .r-before { font-family: var(--font-head); font-size: 17px !important;
  font-weight: 700; letter-spacing: -.04em; color: rgba(239,234,231,.28); }
.bb-cs .r-after  { font-family: var(--font-head); font-size: 17px !important;
  font-weight: 700; letter-spacing: -.04em; color: var(--bb-cream); }
.bb-cs .r-change { color: var(--bb-green); font-size: 14px !important; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   § TESTIMONIAL + VIDEO
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-testi {
  background: var(--bb-cream); padding: 60px 0; }
.bb-cs .bb-testi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }

/* Quote side */
.bb-cs .bb-testi-quote-wrap { display: flex; flex-direction: column; gap: 32px; }
.bb-cs .bb-testi-quote {
  font-family: var(--font-cadence); font-style: italic; font-weight: 600;
  font-size: clamp(22px,2.8vw,36px); color: var(--bb-navy); line-height: 1.35em;
  letter-spacing: -.02em; }
.bb-cs .bb-testi-quote::before {
  content: '\201C'; font-size: 1.3em; color: var(--bb-gold);
  line-height: .5em; display: block; margin-bottom: 8px; }
.bb-cs .bb-testi-attr {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 20px; border-left: 2px solid var(--bb-gold); }
.bb-cs .bb-testi-attr .attr-name {
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
  letter-spacing: -.04em; color: var(--bb-navy); }
.bb-cs .bb-testi-attr .attr-role {
  font-family: var(--font-body); font-size: 13px; color: rgba(0,11,36,.5); }

/* Video side */
.bb-cs .bb-video-wrap {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 16/9; cursor: pointer; }
.bb-cs .bb-video-wrap img { position: absolute; inset: 0; }
.bb-cs .bb-video-wrap .bb-img-placeholder { position: absolute; inset: 0; border-radius: 0; border: none;
  background: rgba(0,11,36,.12); }
.bb-cs .bb-video-overlay {
  position: absolute; inset: 0; background: rgba(0,11,36,.4);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px;
  transition: background .3s ease; }
.bb-cs .bb-video-wrap:hover .bb-video-overlay { background: rgba(0,11,36,.55); }
.bb-cs .bb-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--bb-gold); display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease, background .3s ease; }
.bb-cs .bb-video-wrap:hover .bb-play-btn { transform: scale(1.1); background: var(--bb-cream); }
.bb-cs .bb-play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.bb-cs .bb-video-caption {
  font-family: var(--font-body); font-size: 13px;
  color: rgba(239,234,231,.8); text-transform: lowercase; letter-spacing: .06em; }

/* ══════════════════════════════════════════════════════════════
   § 12-MONTH SHIFT
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-shift {
  background: var(--bb-navy); padding: 64px 0;
  border-top: 1px solid rgba(239,234,231,.18); }
.bb-cs .bb-shift-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 48px; }
.bb-cs .bb-shift-col {
  background: rgba(239,234,231,.04); border: 1px solid rgba(239,234,231,.18);
  border-radius: var(--r-card); padding: 32px; }
.bb-cs .bb-shift-col .sc-date {
  font-size: 11px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--bb-slate); margin-bottom: 12px; display: block;
  font-family: var(--font-body); }
.bb-cs .bb-shift-col .sc-status {
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  letter-spacing: -.04em; color: var(--bb-cream); margin-bottom: 20px; }
.bb-cs .bb-shift-col .sc-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-cs .bb-shift-col.after-col .sc-status { color: var(--bb-gold); }
.bb-cs .bb-shift-arrow {
  font-family: var(--font-head); font-size: 36px; font-weight: 700;
  color: var(--bb-gold); text-align: center; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   § TEAM
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-team { background: var(--bb-cream); padding: var(--section-v) 0; }
.bb-cs .bb-team-hdr {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: end; margin-bottom: 56px; }
.bb-cs .bb-team-hdr .bb-head { font-size: clamp(36px,4.5vw,60px); }
.bb-cs .bb-team-hdr .bb-body { color: rgba(0,11,36,.62); }
/* team-grid flat layout removed — using photo grid version above */

/* ══════════════════════════════════════════════════════════════
   § RELATED WORK
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-related { background: #fff; padding: var(--section-v) 0;
  border-top: 1px solid rgba(0,11,36,.16); }
.bb-cs .bb-related-hdr {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px; gap: 24px; }
.bb-cs .bb-related-hdr .bb-head { font-size: clamp(32px,4vw,52px); }
.bb-cs .bb-related-hdr a {
  font-family: var(--font-body); font-size: 14px;
  color: var(--bb-navy); text-transform: lowercase; letter-spacing: .04em;
  border-bottom: 1px solid rgba(0,11,36,.35);
  padding-bottom: 2px; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease; }
.bb-cs .bb-related-hdr a:hover { color: var(--bb-navy); border-color: var(--bb-navy); }

.bb-cs .bb-related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.bb-cs .bb-related-card {
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid rgba(0,11,36,.18);
  transition: transform .3s ease, box-shadow .3s ease; cursor: pointer; }
.bb-cs .bb-related-card:hover { transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,11,36,.1); }
.bb-cs .bb-related-card-img { aspect-ratio: 4/5; overflow: hidden; background: rgba(0,11,36,.06); }
.bb-cs .bb-related-card-img img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease; }
.bb-cs .bb-related-card:hover .bb-related-card-img img { transform: scale(1.04); }
.bb-cs .bb-related-card-body { padding: 24px; background: #fff; }
.bb-cs .bb-related-card-industry {
  font-family: var(--font-body); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--bb-gold); margin-bottom: 8px; display: block; }
.bb-cs .bb-related-card-title {
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  letter-spacing: -.04em; color: var(--bb-navy);
  line-height: 1.1em; margin-bottom: 12px; }
.bb-cs .bb-related-card-stat {
  font-family: var(--font-body); font-size: 13px; color: rgba(0,11,36,.5); }
.bb-cs .bb-related-card-stat strong {
  font-family: var(--font-head); font-size: 18px; font-weight: 700;
  letter-spacing: -.04em; color: var(--bb-navy); margin-right: 4px; }

/* ══════════════════════════════════════════════════════════════
   § CTA
══════════════════════════════════════════════════════════════ */
.bb-cs .bb-cta {
  background: var(--bb-navy); padding: 120px 0;
  text-align: center; position: relative; overflow: hidden; }
.bb-cs .bb-cta::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(220,173,103,.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 50%, rgba(220,173,103,.05) 0%, transparent 70%);
  pointer-events: none; }
.bb-cs .bb-cta-inner { position: relative; z-index: 1; }
.bb-cs .bb-cta-eyebrow {
  font-family: var(--font-body); font-size: 11px;
  text-transform: uppercase; letter-spacing: .18em; color: var(--bb-gold); margin-bottom: 20px; }
.bb-cs .bb-cta-headline {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(44px,6vw,88px); text-transform: none;
  letter-spacing: var(--track-tight); line-height: .93em;
  color: var(--bb-cream); margin-bottom: 16px; }
.bb-cs .bb-cta-sub {
  font-family: var(--font-cadence); font-style: italic;
  font-size: clamp(22px,2.8vw,36px); color: var(--bb-blush);
  margin-bottom: 52px; display: block; }
.bb-cs .bb-cta-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.bb-cs .bb-btn {
  display: inline-block; padding: 16px 44px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  letter-spacing: .02em; transition: all .28s cubic-bezier(.22,1,.36,1); cursor: pointer; }
.bb-cs .bb-btn--gold { background: var(--bb-gold); color: var(--bb-navy); }
.bb-cs .bb-btn--gold:hover { background: var(--bb-cream); transform: translateY(-2px); }
.bb-cs .bb-btn--outline { background: transparent; color: rgba(239,234,231,.75); border: 1px solid rgba(239,234,231,.22); }
.bb-cs .bb-btn--outline:hover { background: rgba(239,234,231,.08); color: var(--bb-cream); transform: translateY(-2px); }

/* ══════════════════════════════════════════════════════════════
   § RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  :root { --gutter: 40px; }
  .bb-cs .bb-stats-grid { grid-template-columns: repeat(2,1fr); gap: 40px 0; }
  .bb-cs .bb-stat-col { border-right: none; padding: 0; }
  .bb-cs .bb-stat-col:nth-child(odd) { padding-right: 24px; border-right: 1px solid rgba(0,11,36,.18); }
  .bb-cs .bb-stat-col:nth-child(3), .bb-cs .bb-stat-col:nth-child(4)
    { border-top: 1px solid rgba(0,11,36,.16); padding-top: 40px; }
  .bb-cs .bb-team-grid { grid-template-columns: repeat(6,1fr); gap: 16px; }
  .bb-cs .bb-member:nth-child(3) { border-right: none; }
  .bb-cs .bb-member:nth-child(4), .bb-cs .bb-member:nth-child(5), .bb-cs .bb-member:nth-child(6)
    { border-top: 1px solid rgba(0,11,36,.16); }
  .bb-cs .bb-member:nth-child(6) { border-right: none; }
}


/* ── Organic content carousel ── */
.bb-cs .bb-org-carousel-wrap {
  display: flex; align-items: center; gap: 24px; justify-content: center; }
.bb-cs .bb-org-carousel {
  flex: 1; display: flex; overflow: hidden; }
.bb-cs .bb-org-slide {
  flex: 0 0 100%; transition: transform .35s cubic-bezier(.4,0,.2,1); }
.bb-cs .bb-org-arrow {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(239,234,231,.1); border: 1px solid rgba(239,234,231,.22);
  color: var(--bb-cream); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease; }
.bb-cs .bb-org-arrow:hover { background: rgba(239,234,231,.2); }
.bb-cs .bb-org-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.bb-cs .bb-org-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(239,234,231,.25); border: none; cursor: pointer;
  padding: 0; transition: background .2s, transform .2s; }
.bb-cs .bb-org-dot.active { background: var(--bb-cream); transform: scale(1.25); }

/* ── Photo & Video carousel arrows ── */
.bb-cs .bb-pv-carousel-wrap { position: relative; }
.bb-cs .bb-pv-arrows {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  display: flex; gap: 8px; }
.bb-cs .bb-pv-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(239,234,231,.1); border: 1px solid rgba(239,234,231,.22);
  color: var(--bb-cream); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease; flex-shrink: 0; }
.bb-cs .bb-pv-arrow:hover { background: rgba(239,234,231,.22); }

/* ── Video lightbox ── */
.bb-cs .bb-video-lightbox {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center; }
.bb-cs .bb-video-lightbox.active { display: flex; }
.bb-cs .bb-video-lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,10,.88); }
.bb-cs .bb-video-lightbox-inner {
  position: relative; z-index: 1; width: 90%; max-width: 440px; }
.bb-cs .bb-video-lightbox-close {
  position: absolute; top: -44px; right: 0; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(239,234,231,.15);
  border: 1px solid rgba(239,234,231,.3); color: var(--bb-cream);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease; }
.bb-cs .bb-video-lightbox-close:hover { background: rgba(239,234,231,.3); }


/* ── Marathon carousel (inside organic tab frame 3) ── */
.bb-cs .bb-marathon-viewport {
  overflow: hidden; aspect-ratio: 4/5; position: relative; background: #000; }
.bb-cs .bb-marathon-track {
  height: 100%; position: absolute; top: 0; left: 0;
  display: flex; flex-wrap: nowrap; align-items: stretch;
  transition: transform .38s cubic-bezier(.4,0,.2,1); will-change: transform; }
.bb-cs .bb-marathon-track img { height: 100%; width: auto; flex-shrink: 0; display: block; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
.bb-cs .bb-marathon-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.88); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease; z-index: 2;
  color: rgba(0,0,0,.72); }
.bb-cs .bb-marathon-arrow:hover { background: #fff; }
.bb-cs .bb-marathon-arrow--prev { left: 8px; }
.bb-cs .bb-marathon-arrow--next { right: 8px; }
.bb-cs .bb-marathon-arrow.hidden { display: none; }
.bb-cs .bb-marathon-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 2; }
.bb-cs .bb-marathon-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.45); transition: background .2s, transform .2s; }
.bb-cs .bb-marathon-dot.active { background: #fff; transform: scale(1.3); }

/* ── Service chips tooltip ── */
.bb-cs .bb-svc-tip { position: relative; cursor: help; display: inline-block; }
.bb-cs .bb-svc-tip .d-value { border-bottom: 1px dashed rgba(0,11,36,.3); }
.bb-cs .bb-svc-tip-popup {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  background: #fff; border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 8px 28px rgba(0,11,36,.18);
  display: flex; flex-wrap: wrap; gap: 8px; width: 320px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 20; }
.bb-cs .bb-svc-tip:hover .bb-svc-tip-popup {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0); }
.bb-cs .bb-svc-tip-popup::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff; }
.bb-cs .bb-svc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bb-cream); border-radius: 100px;
  padding: 4px 10px 4px 4px;
  font-family: var(--font-body); font-size: 11px; color: var(--bb-navy);
  font-weight: 500; }
.bb-cs .bb-svc-chip-ico {
  width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bb-cs .bb-svc-chip-ico svg { width: 20px; height: 20px; }

/* ── Services hotspot pulse ── */
@keyframes bb-hotspot-ring {
  0%   { box-shadow: 0 0 0 0 rgba(220,173,103,.75); }
  70%  { box-shadow: 0 0 0 9px rgba(220,173,103,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,173,103,0); }
}
.bb-cs .bb-svc-tip { position: relative; }
.bb-cs .bb-svc-tip::before {
  content: '';
  position: absolute;
  right: -12px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bb-gold);
  animation: bb-hotspot-ring 1.8s ease-out infinite;
  pointer-events: none; }
.bb-cs .bb-svc-tip:hover::before { opacity: 0; }

/* ── Testimonial attribution with photo ── */
.bb-cs .bb-testi-attr { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.bb-cs .bb-testi-attr-photo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.bb-cs .bb-testi-attr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.bb-cs .bb-testi-attr .attr-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -.03em; color: var(--bb-navy); display: block; }
.bb-cs .bb-testi-attr .attr-role { font-family: var(--font-body); font-size: 12px; color: rgba(0,11,36,.45); display: block; margin-top: 2px; }

/* ── Team member hover tooltip ── */
.bb-cs .bb-member { position: relative; }
.bb-cs .bb-member-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bb-navy); color: var(--bb-cream);
  font-family: var(--font-body); font-size: 13px; line-height: 1.5em;
  padding: 12px 16px; border-radius: 10px; width: 220px; text-align: center;
  border: 1px solid rgba(220,173,103,.3);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 10; }
.bb-cs .bb-member:hover .bb-member-tooltip {
  opacity: 1; transform: translateX(-50%) translateY(0); }
.bb-cs .bb-member-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--bb-navy); }

/* ── Phase carousel navigation ── */
.bb-cs .bb-phases-nav {
  display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 24px; }
.bb-cs .bb-phase-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(239,234,231,.1); border: 1px solid rgba(239,234,231,.22);
  color: var(--bb-cream); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .2s ease, opacity .2s ease; flex-shrink: 0; }
.bb-cs .bb-phase-arrow:hover { background: rgba(239,234,231,.22); }
.bb-cs .bb-phase-arrow:disabled { opacity: .28; cursor: default; }

/* ── Testimonial attr left align ── */
.bb-cs .bb-testi-attr { justify-content: flex-start; }

/* ── Paid acquisition / clinic growth summary table ── */
.bb-cs .bb-result-block.bb-result-summary {
  background: linear-gradient(135deg, rgba(220,173,103,.12) 0%, rgba(0,11,36,0) 100%);
  border: 1px solid rgba(220,173,103,.35);
  border-radius: 16px; padding: 36px 40px; margin-top: 48px; }
.bb-cs .bb-result-summary .bb-rblock-title {
  font-size: 18px; color: var(--bb-gold); border-bottom: none; padding-bottom: 0; margin-bottom: 8px; }
.bb-cs .bb-result-summary .bb-rblock-subtitle {
  font-family: var(--font-body); font-size: 13px; color: rgba(239,234,231,.4);
  margin-bottom: 28px; display: block; }
.bb-cs .bb-result-summary .bb-rtable-head > span { color: rgba(220,173,103,.55); }
.bb-cs .bb-result-summary .bb-rtable-row { border-color: rgba(220,173,103,.15); }
.bb-cs .bb-result-summary .r-after {
  color: var(--bb-gold) !important; font-size: 20px !important; font-weight: 700; }
.bb-cs .bb-result-summary .r-metric { color: rgba(239,234,231,.8); font-size: 15px; }
.bb-cs .bb-result-summary .r-change { color: var(--bb-green); }
.bb-cs .bb-result-summary-icons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }

/* ── Portfolio-style CTA ── */
.bb-cs .bb-cta { background: var(--bb-navy); padding: 100px 0 120px; text-align: left; position: relative; overflow: hidden; }
.bb-cs .bb-cta::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(220,173,103,.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 50%, rgba(220,173,103,.05) 0%, transparent 70%);
  pointer-events: none; }
.bb-cs .bb-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: start; position: relative; z-index: 1; }
.bb-cs .bb-cta-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--bb-gold);
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.bb-cs .bb-cta-eyebrow::before { content: ''; display: block; width: 24px; height: 2px;
  background: var(--bb-gold); flex-shrink: 0; }
.bb-cs .bb-cta-headline { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(36px,4.5vw,64px); letter-spacing: var(--track-tight);
  line-height: .93em; color: var(--bb-cream); margin-bottom: 24px; }
.bb-cs .bb-cta-headline em { font-style: italic; font-family: var(--font-cadence);
  font-weight: 600; color: var(--bb-gold); font-size: 1.06em; }
.bb-cs .bb-cta-body { font-family: var(--font-body); font-size: 15px;
  color: rgba(239,234,231,.45); line-height: 1.75em; margin-bottom: 32px; }
.bb-cs .bb-cta-btns { display: flex; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.bb-cs .bb-cta-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 28px;
  border-radius: var(--r-card); font-family: var(--font-body); font-size: 15px;
  font-weight: 500; letter-spacing: .02em; text-decoration: none;
  transition: transform .22s, box-shadow .22s, background .22s; border: none; cursor: pointer; }
.bb-cs .bb-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.bb-cs .bb-cta-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.bb-cs .bb-cta-btn--wa { background: #25D366; color: #fff; }
.bb-cs .bb-cta-btn--wa:hover { background: #1ebe5d; color: #fff; }
.bb-cs .bb-cta-btn--primary { background: var(--bb-gold); color: var(--bb-navy); }
.bb-cs .bb-cta-right { display: flex; flex-direction: column; }
.bb-cs .bb-cta-sub { display: none; }

/* ── Section overlap — colour-change boundaries only ─────────────
     Logic:
     • padding-top: section-v + 48px  → visual top = section-v  (overlap eats 48px)
     • padding-bottom: section-v + 48px when next section also overlaps (eats 48px → visual = section-v)
     • padding-bottom: 0 when same-colour section follows (that section provides the gap via its own padding-top)
     • padding-bottom: section-v when last or no overlap below
   ──────────────────────────────────────────────────────────────── */

/* cream over navy */
.bb-cs .bb-brief   { border-radius: 48px 48px 0 0; position: relative; z-index: 2; margin-top: -48px;
  padding-top: calc(var(--section-v) + 48px); padding-bottom: calc(var(--section-v) + 48px); }

/* teal over navy — journey (navy) overlaps from below, so all corners rounded */
.bb-cs .bb-insight { border-radius: 48px; position: relative; z-index: 3; margin-top: -48px;
  padding-top: calc(var(--section-v) + 48px); padding-bottom: calc(var(--section-v) + 48px); }

/* navy over teal */
.bb-cs .bb-journey { border-radius: 48px 48px 0 0; position: relative; z-index: 4; margin-top: -48px;
  padding-top: calc(var(--section-v) + 48px); }

/* cream over navy — shift (navy) will overlap testi */
.bb-cs .bb-testi   { border-radius: 48px 48px 0 0; position: relative; z-index: 5; background: var(--bb-cream); margin-top: -48px;
  padding-top: calc(var(--section-v) + 48px); padding-bottom: calc(var(--section-v) + 48px); }

/* navy over cream — team (cream) will overlap shift */
.bb-cs .bb-shift   { border-radius: 48px 48px 0 0; position: relative; z-index: 6; margin-top: -48px;
  padding-top: calc(var(--section-v) + 48px); padding-bottom: calc(var(--section-v) + 48px); }

/* cream over navy — familiar-strip (same cream) follows, so bottom = 0 */
.bb-cs .bb-team    { border-radius: 48px 48px 0 0; position: relative; z-index: 7; background: var(--bb-cream); margin-top: -48px;
  padding-top: calc(var(--section-v) + 48px); padding-bottom: 0; }

/* navy over cream — related (no overlap) follows, so bottom = section-v */
.bb-cs .bb-cta     { border-radius: 48px 48px 0 0; position: relative; z-index: 9; margin-top: -48px;
  padding-top: calc(var(--section-v) + 48px); padding-bottom: var(--section-v); }

/* ── Channel chip hotspot tooltips ── */
.bb-cs .bb-ch-hotspot { position: relative; display: inline-block; cursor: pointer; }
.bb-cs .bb-ch-hotspot .bb-ch-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bb-navy); color: var(--bb-cream);
  font-family: var(--font-body); font-size: 13px; line-height: 1.6em;
  padding: 14px 18px; border-radius: 10px;
  border: 1px solid rgba(220,173,103,.3);
  width: 260px; text-align: left;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 20; white-space: normal; }
.bb-cs .bb-ch-hotspot:hover .bb-ch-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.bb-cs .bb-ch-hotspot .bb-ch-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--bb-navy); }
.bb-cs .bb-ch-hotspot .bb-ch {
  position: relative; }
.bb-cs .bb-ch-hotspot .bb-ch::after {
  content: ''; position: absolute; top: 0px; left: 26px; right: auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bb-gold);
  animation: bb-hotspot-ring 1.8s ease-out infinite; }

/* ── WhatsApp avatar button ── */
.bb-cs .bb-wa-avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; position: relative; border: 2px solid rgba(255,255,255,.4); }
.bb-cs .bb-wa-online {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 1.5px solid #25D366; }
.bb-cs .bb-wa-online::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  animation: bb-wa-pulse 1.6s ease-out infinite; }
@keyframes bb-wa-pulse {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Tooltip overflow fixes ── */
.bb-cs .bb-services { overflow: visible; }
.bb-cs .bb-ch-row { overflow: visible; }
.bb-cs .bb-team { overflow: visible; position: relative; z-index: 8; }
/* First chip tooltip: left-align to prevent left-edge clip */
.bb-cs .bb-ch-hotspot:first-child .bb-ch-tip {
  left: 0; right: auto; transform: translateX(0) translateY(4px); }
.bb-cs .bb-ch-hotspot:first-child:hover .bb-ch-tip {
  transform: translateX(0) translateY(0); }
.bb-cs .bb-ch-hotspot:first-child .bb-ch-tip::after {
  left: 20px; right: auto; transform: none; }
/* Last two chips: right-align tooltip to prevent right-edge clip */
.bb-cs .bb-ch-hotspot:last-child .bb-ch-tip,
.bb-cs .bb-ch-hotspot:nth-last-child(2) .bb-ch-tip {
  left: auto; right: 0; transform: translateX(0) translateY(4px); }
.bb-cs .bb-ch-hotspot:last-child:hover .bb-ch-tip,
.bb-cs .bb-ch-hotspot:nth-last-child(2):hover .bb-ch-tip {
  transform: translateX(0) translateY(0); }
.bb-cs .bb-ch-hotspot:last-child .bb-ch-tip::after,
.bb-cs .bb-ch-hotspot:nth-last-child(2) .bb-ch-tip::after {
  left: auto; right: 20px; transform: none; }
/* Ensure tooltips always have a sensible max-width */
.bb-cs .bb-ch-tip { max-width: min(260px, calc(100vw - 40px)); }
.bb-cs .bb-svc-tip-popup { max-width: min(320px, calc(100vw - 40px)); }
/* Increase tooltip z-index above section overlaps */
.bb-cs .bb-ch-hotspot .bb-ch-tip { z-index: 100; }
.bb-cs .bb-svc-tip-popup { z-index: 100; }
.bb-cs .bb-member-tooltip { z-index: 100; }
.bb-cs .bb-tip::after { z-index: 100; }

/* ── User padding overrides ── */
.bb-cs .bb-stats {
  padding: 65px 0 106px !important;
  border-bottom: none !important;
}
.bb-cs .bb-brief {
  padding-top: 100px !important;
}
.bb-cs .bb-insight {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  background: #578A8B !important;
}
.bb-cs .bb-showcase {
  padding-bottom: 100px !important;
}
.bb-cs .bb-services {
  padding: 86px 0 !important;
}
.bb-cs .bb-results {
  padding-bottom: 160px !important;
}
.bb-cs .bb-testi-attr {
  align-items: start !important;
  gap: 0px !important;
}
.bb-cs .bb-testi {
  padding-top: 106px !important;
}
.bb-cs .bb-shift {
  padding-top: 106px !important;
}
.bb-cs .bb-head {
  font-size: clamp(48px, 6vw, 72px) !important;
}
.bb-cs .bb-team {
  padding-top: 106px !important;
  padding-bottom: 106px !important;
}
.bb-cs .bb-cta {
  padding: 130px 0 150px !important;
}

/* ── Organic content image rendering ── */
.bb-cs .bb-wf-viewport img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }

@media (max-width:900px) {
  :root { --section-v: 88px; --gutter: 32px; }
  .bb-cs .bb-brief-grid, .bb-cs .bb-team-hdr, .bb-cs .bb-insight-inner, .bb-cs .bb-testi-2col
    { grid-template-columns: 1fr; gap: 40px; }
  .bb-cs .bb-phase { flex: 0 0 calc(55% - 10px); }
  .bb-cs .bb-phase { grid-column: span 1 !important; }
  .bb-cs .bb-journey-hdr, .bb-cs .bb-results-hdr { flex-direction: column; align-items: flex-start; }
  .bb-cs .bb-journey-hdr p, .bb-cs .bb-results-hdr p { text-align: left; }
  .bb-cs .bb-rtable-head { display: none; }
  .bb-cs .bb-rtable-row { grid-template-columns: 1fr auto auto; gap: 4px 12px; padding: 14px 16px; }
  .bb-cs .bb-rtable-row > span { padding: 0; }
  .bb-cs .bb-rtable-row .r-metric { grid-column: 1 / -1; }
  .bb-cs .bb-rtable-row .r-before { display: none; }
  .bb-cs .bb-rtable-row .r-after { font-size: 15px !important; }
  .bb-cs .bb-rtable-row .r-change { font-size: 13px !important; }
  /* Transformation — stack vertically */
  .bb-cs .bb-shift-cols { grid-template-columns: 1fr; gap: 20px; }
  .bb-cs .bb-shift-divider { flex-direction: row; padding: 8px 0; }
  .bb-cs .bb-shift-divider-arrow { transform: rotate(90deg); }
  .bb-cs .bb-shift-divider-line { width: 40px; height: 1px; flex: 0 0 40px; }
  .bb-cs .bb-related-grid { grid-template-columns: repeat(2,1fr); }
  .bb-cs .bb-device-row { grid-template-columns: 1fr 1fr; }
  .bb-cs .bb-phone-wrap { display: none; }
  .bb-cs .bb-browser-viewport { height: 360px; }
  .bb-cs .bb-testi-media { grid-template-columns: 1fr; }
  .bb-cs .bb-hero-meta { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; }
  .bb-cs .bb-hero-detail { border-right: none; padding: 0; margin: 0; min-width: 140px; }
  /* Work tabs: make frames bigger */
  .bb-cs .bb-wf-grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .bb-cs .bb-wf-grid-2 { grid-template-columns: 1fr; gap: 16px; }
  .bb-cs .bb-pv-carousel-item { flex: 0 0 calc(45% - 8px); }
  /* CTA responsive */
  .bb-cs .bb-cta-inner { grid-template-columns: 1fr; gap: 40px; }
  /* Familiar strip */
  .bb-cs .bb-familiar-strip-inner { grid-template-columns: 1fr; gap: 32px; }
  .bb-cs .bb-familiar-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (max-width:600px) {
  :root { --section-v: 64px; --gutter: 20px; }
  .bb-cs .bb-phase { flex: 0 0 calc(85% - 10px); }
  /* Stats: 2-column grid, centred */
  .bb-cs .bb-stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .bb-cs .bb-stat-col { padding: 0 16px; border-right: 1px solid rgba(239,234,231,.15); text-align: center; align-items: center; }
  .bb-cs .bb-stat-col:nth-child(even) { border-right: none; }
  .bb-cs .bb-stat-col:nth-child(n+3) { border-top: 1px solid rgba(239,234,231,.1); padding-top: 28px; }
  /* Team: 3-col */
  .bb-cs .bb-team-grid { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .bb-cs .bb-related-grid { grid-template-columns: 1fr; }
  .bb-cs .bb-device-row { grid-template-columns: 1fr; }
  .bb-cs .bb-photo-strip { grid-template-columns: 1fr 1fr; }
  .bb-cs .bb-services-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* Familiar cards: 2-col on mobile */
  .bb-cs .bb-familiar-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* CTA buttons stack */
  .bb-cs .bb-cta-btns { flex-direction: column; }
  .bb-cs .bb-btn { width: 100%; text-align: center; }
  /* Hero meta: 2-col grid */
  .bb-cs .bb-hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .bb-cs .bb-hero-detail { border: none; padding: 0; margin: 0; text-align: center; }
  /* Hero: centre everything on mobile */
  .bb-cs .bb-hero { text-align: center; }
  .bb-cs .bb-hero-headline { text-align: center; }
  .bb-cs .bb-hero-tags { justify-content: center; }
  .bb-cs .bb-hero .bb-fade:first-child > div { margin-left: auto; margin-right: auto; }
  /* Reduce gap between hero client info and stats */
  .bb-cs .bb-hero { padding-bottom: 40px; }
  .bb-cs .bb-stats { padding-top: 44px !important; }
  /* Work tabs: full width */
  .bb-cs .bb-wf-grid-3 { grid-template-columns: 1fr; }
  .bb-cs .bb-pv-col { gap: 12px; }
  .bb-cs .bb-pv-carousel-item { flex: 0 0 calc(75% - 8px); }
  /* Transformation */
  .bb-cs .bb-shift-cols { grid-template-columns: 1fr; }
}/* End custom CSS */