/* ==========================================================================
   BrandBeam — Experiential Marketing Agency Theme
   assets/css/style.css
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   0.  Design tokens (:root)
   1.  Reset & base
   2.  Typography helpers (eyebrow, headings, gradient text)
   3.  Buttons
   4.  Header / Nav / Burger / Offcanvas
   5.  Hero + mesh glow + scroll cue
   6.  Marquee (trusted-by logos)
   7.  Stats / counters
   8.  Cards (service, generic, gradient-border, award, team)
   9.  Bento / case studies
   10. Process timeline
   11. Testimonials (Swiper)
   12. CTA band
   13. FAQ accordion
   14. Footer
   15. Gallery (filter + grid + lightbox)
   16. Services page (alternating, tiers)
   17. Awards page (year timeline, logo wall)
   18. About page (values, milestones, collage)
   19. Contact page (form, cards, map)
   20. Scroll-reveal utility
   21. Responsive tweaks
   22. Reduced motion / print
   ========================================================================== */

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand color */
  --bb-primary: #ff6b1e;
  /* fills, icons, borders, LARGE text (>=18px/bold) */
  --bb-primary-600: #e85c15;
  --bb-primary-glow: rgba(255, 107, 30, .35);
  /* Lighter tint for SMALL orange text so it clears WCAG AA (4.5:1) on cards
     (#ff6b1e is only 4.44:1 on --bb-surface-2). Use --bb-primary-text for any
     orange text under ~18px: eyebrows, category labels, roles, badges. */
  --bb-primary-text: #ff9a4d;

  /* Surfaces (dark-first) */
  --bb-bg: #292929;
  --bb-surface-1: #1f1f1f;
  --bb-surface-2: #333333;
  --bb-surface-3: #3d3d3d;

  /* Text */
  --bb-text: #f5f3f0;
  --bb-text-muted: #a7a29c;

  /* Lines & focus */
  --bb-border: rgba(255, 255, 255, .09);
  --bb-border-strong: rgba(255, 255, 255, .16);
  --bb-focus: #ffb27a;

  /* Gradients */
  --bb-gradient: linear-gradient(135deg, #ff6b1e 0%, #ff9a4d 100%);
  --bb-gradient-soft: linear-gradient(135deg, rgba(255, 107, 30, .16), rgba(255, 154, 77, .06));

  /* Typography */
  --ff-display: "Sora", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --fs-display: clamp(2.35rem, 5vw, 4.5rem);
  --fs-h1: clamp(1.95rem, 3.4vw, 2.9rem);
  --fs-h2: clamp(1.5rem, 2.5vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 1.7vw, 1.35rem);
  --fs-lead: clamp(1rem, 1.2vw, 1.15rem);

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1.1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.25rem;
  --sp-7: 3rem;
  --sp-8: 4.25rem;
  --section-y: clamp(2.75rem, 6vw, 5.25rem);
  --container-max: 1240px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Radius */
  --r-sm: .5rem;
  --r-md: .875rem;
  --r-lg: 1.25rem;
  --r-pill: 999px;

  /* Shadows */
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .25);
  --shadow-2: 0 18px 40px rgba(0, 0, 0, .45);
  --shadow-glow: 0 20px 60px -12px var(--bb-primary-glow);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .5s;

  /* Nav */
  --nav-h: 80px;

  /* Z-index scale — single source of truth to prevent stacking conflicts.
     hero decorations sit BELOW content via negative values set locally. */
  --z-progress: 900;
  /* scroll progress bar */
  --z-nav: 1000;
  /* fixed header */
  --z-backdrop: 1050;
  /* offcanvas backdrop */
  --z-offcanvas: 1100;
  /* mobile menu panel */
  --z-lightbox: 1200;
  /* gallery lightbox (highest) */
  --z-cursor: 1300;
  /* custom cursor glow (never blocks interaction) */

  /* --- Service-detail layer tokens (merged from service-detail.css) --- */
  --service-accent: var(--bb-primary);
  --service-accent-text: var(--bb-primary-text);
  --service-accent-soft: rgba(255, 107, 30, .12);
  --toc-height: 50px;
  /* height reserved for the sticky in-page TOC (no layout shift) */
}

/* Fixed-header offset for in-page anchors + smooth scroll (prevents the
   sticky header from covering anchor targets like #trusted). */
html {
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--bb-text);
  background-color: var(--bb-bg);
  background-image:
    radial-gradient(900px 500px at 85% -5%, rgba(255, 107, 30, .08), transparent 60%),
    radial-gradient(700px 400px at 0% 30%, rgba(255, 154, 77, .05), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* Links use the lighter tint for AA at body size; underline so color isn't the
   only signal. */
a {
  color: var(--bb-primary-text);
  text-decoration: none;
}

a:hover {
  color: var(--bb-primary);
}

/* Long words (emails, URLs, big headings) must never force horizontal scroll. */
h1, h2, h3, h4, p, a, li, blockquote, figcaption, .bb-nav__brand {
  overflow-wrap: anywhere;
}

/* Belt-and-braces: nothing may exceed the viewport width. */
html, body {
  max-width: 100%;
}

/* Global container cap (overrides Bootstrap default at large widths) */
.container, .container-lg, .container-xl {
  max-width: var(--container-max);
}

/* Selection */
::selection {
  background: var(--bb-primary);
  color: #1a1a1a;
}

/* Focus ring — every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.bb-btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Section wrapper */
.bb-section {
  padding: var(--section-y) 0;
  position: relative;
}

.bb-section--tight {
  padding: calc(var(--section-y) / 2) 0;
}

.bb-section--surface {
  background: var(--bb-surface-1);
}

/* ==========================================================================
   2. TYPOGRAPHY HELPERS
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-3);
}

.bb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--ff-body);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--bb-primary-text);
  margin-bottom: var(--sp-3);
}

.bb-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bb-gradient);
  border-radius: 2px;
}

.bb-heading {
  max-width: 60ch;
}

.bb-heading--center {
  margin-inline: auto;
  text-align: center;
}

.bb-heading__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-3);
}

.bb-heading__lead {
  font-size: var(--fs-lead);
  color: var(--bb-text-muted);
  margin: 0;
}

/* Compact: token-scale the fixed Bootstrap mb-5 (3rem) on section headers so the
   header→content gap shrinks with the rest of the compact rhythm. */
.bb-heading.mb-5 {
  margin-bottom: var(--sp-6) !important;
}

.bb-grad-text {
  background: var(--bb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-muted-bb {
  color: var(--bb-text-muted) !important;
}

.bb-lead {
  font-size: var(--fs-lead);
  color: var(--bb-text-muted);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.bb-btn {
  --_bg: transparent;
  --_fg: var(--bb-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  padding: .6rem 1.3rem;
  font-family: var(--ff-body);
  font-size: .93rem;
  font-weight: 600;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  will-change: transform;
}

.bb-btn i {
  font-size: 1.1em;
}

.bb-btn:hover {
  transform: translateY(-3px);
}

.bb-btn:active {
  transform: translateY(-1px);
}

.bb-btn--primary {
  --_bg: var(--bb-primary);
  --_fg: #1a1200;
  background: var(--bb-gradient);
  box-shadow: 0 8px 24px -8px var(--bb-primary-glow);
}

.bb-btn--primary:hover {
  color: #1a1200;
  box-shadow: var(--shadow-glow);
}

.bb-btn--ghost {
  --_fg: var(--bb-text);
  border-color: var(--bb-border-strong);
}

.bb-btn--ghost:hover {
  color: var(--bb-text);
  border-color: var(--bb-primary);
  background: rgba(255, 107, 30, .08);
}

.bb-btn--light {
  --_bg: var(--bb-text);
  --_fg: #1a1a1a;
}

.bb-btn--light:hover {
  color: #1a1a1a;
}

.bb-btn--block {
  width: 100%;
}

/* Magnetic buttons keep transform via JS translate vars but still animate */
.bb-btn--magnetic {
  transition: transform .2s var(--ease), box-shadow var(--dur) var(--ease);
}

/* Animated underline link */
.bb-link {
  position: relative;
  color: var(--bb-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.bb-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 100%;
  background: var(--bb-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.bb-link:hover {
  color: var(--bb-primary-text);
}

.bb-link:hover::after {
  transform: scaleX(1);
}

.bb-link i {
  transition: transform var(--dur) var(--ease);
}

.bb-link:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   4. HEADER / NAV
   ========================================================================== */
.bb-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.bb-nav.is-solid {
  background: rgba(31, 31, 31, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--bb-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.bb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--sp-4);
}

.bb-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--bb-text);
  letter-spacing: -.02em;
}

.bb-nav__brand:hover {
  color: var(--bb-text);
}

.bb-nav__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bb-gradient);
  display: grid;
  place-items: center;
  color: #1a1200;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 0 6px 18px -6px var(--bb-primary-glow);
}

.bb-nav__brand b {
  color: var(--bb-primary);
}

/* Brand logo image (BrandBeam lockup). Shown in its original colours at its
   natural size — no colour filter, no forced height. max-width keeps it from
   overflowing its container. */
.bb-brand-logo {
  display: block;
  width: auto;
  height: 70px;
  max-width: 100%;
  object-fit: contain;
}

.bb-nav__menu {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-nav__link {
  position: relative;
  display: inline-block;
  padding: .55rem .9rem;
  color: var(--bb-text);
  font-weight: 500;
  font-size: .96rem;
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease);
}

.bb-nav__link::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .35rem;
  height: 2px;
  background: var(--bb-gradient);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.bb-nav__link:hover {
  color: var(--bb-primary-text);
}

.bb-nav__link:hover::after,
.bb-nav__link.is-active::after {
  transform: scaleX(1);
}

.bb-nav__link.is-active {
  color: var(--bb-text);
}

.bb-nav__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Burger */
.bb-burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--bb-border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  position: relative;
}

.bb-burger span, .bb-burger::before, .bb-burger::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--bb-text);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}

.bb-burger::before {
  transform: translate(-50%, -7px);
}

.bb-burger::after {
  transform: translate(-50%, 5px);
}

.bb-burger span {
  margin-top: -1px;
}

.bb-burger[aria-expanded="true"] span {
  opacity: 0;
}

.bb-burger[aria-expanded="true"]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bb-burger[aria-expanded="true"]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Offcanvas menu (mobile) */
.bb-offcanvas {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 360px);
  z-index: var(--z-offcanvas);
  background: var(--bb-surface-1);
  border-left: 1px solid var(--bb-border);
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 1rem) var(--sp-4) var(--sp-5);
  overflow-y: auto;
}

.bb-offcanvas.is-open {
  transform: translateX(0);
}

.bb-offcanvas__link {
  display: block;
  padding: .9rem .25rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--bb-text);
  border-bottom: 1px solid var(--bb-border);
}

.bb-offcanvas__link.is-active, .bb-offcanvas__link:hover {
  color: var(--bb-primary-text);
}

.bb-offcanvas .bb-btn {
  margin-top: var(--sp-4);
}

.bb-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  backdrop-filter: blur(2px);
}

.bb-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.bb-hero {
  /* vh fallback first, then svh/dvh for mobile browsers whose URL bar
     changes the viewport (prevents iOS Safari hero cut-off). */
  position: relative;
  min-height: 82vh;
  min-height: 82svh;
  display: flex;
  align-items: center;
  /* Short/landscape viewports (e.g. phones on their side): let the hero shrink
     to content so it doesn't force a tall empty screen and awkward scrolling. */
  padding-top: calc(var(--nav-h) + 1.5rem);
  padding-bottom: var(--sp-6);
  overflow: hidden;
}

.bb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.bb-hero__bg img, .bb-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(25, 25, 25, .55) 0%, rgba(25, 25, 25, .8) 55%, var(--bb-bg) 100%),
    linear-gradient(90deg, rgba(25, 25, 25, .9), rgba(25, 25, 25, .35));
}

/* Mesh glow accent */
.bb-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .9;
  background:
    radial-gradient(500px 380px at 78% 30%, var(--bb-primary-glow), transparent 65%),
    radial-gradient(420px 320px at 12% 75%, rgba(255, 154, 77, .22), transparent 65%);
  mix-blend-mode: screen;
}

/* Subtle grain */
.bb-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bb-hero__content {
  max-width: 780px;
}

.bb-hero__title {
  font-size: var(--fs-display);
  margin-bottom: var(--sp-4);
}

.bb-hero__lead {
  font-size: var(--fs-lead);
  color: var(--bb-text-muted);
  max-width: 56ch;
  margin-bottom: var(--sp-5);
}

.bb-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* animated word reveal in hero */
.bb-hero__title .bb-word {
  display: inline-block;
}

.bb-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: var(--bb-text-muted);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.bb-scroll-cue__mouse {
  width: 24px;
  height: 38px;
  border: 2px solid var(--bb-border-strong);
  border-radius: 14px;
  position: relative;
}

.bb-scroll-cue__mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  background: var(--bb-primary);
  border-radius: 2px;
  animation: bb-wheel 1.6s var(--ease) infinite;
}

@keyframes bb-wheel {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ==========================================================================
   6. MARQUEE (trusted-by logos)
   ========================================================================== */
.bb-marquee {
  position: relative;
  overflow: hidden;
  padding: var(--sp-4) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bb-marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  animation: bb-scroll 32s linear infinite;
}

.bb-marquee:hover .bb-marquee__track {
  animation-play-state: paused;
}

.bb-marquee__logo {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  color: var(--bb-text-muted);
  opacity: .55;
  filter: grayscale(1);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.bb-marquee__logo i {
  color: var(--bb-primary);
}

/* A logo chip carrying a real image must NOT inherit the dim/grayscale text
   treatment above — it renders the logo as a washed-out gray blob (there's no
   per-item hover to reveal it on a scrolling marquee). Force it fully legible. */
.bb-marquee__logo:has(img) {
  opacity: 1;
  filter: none;
}

/* Real client logo images: shown in their ORIGINAL colours, with NO chip or
   background — the transparent logo sits directly on the dark theme.
   NOTE: logos with dark marks on transparency may read faintly on the dark
   background; supply light/transparent logo art for best contrast. */
.bb-marquee__logo img {
  height: 45.3px;
  width: auto;
  max-width: 175px;
  object-fit: contain;
  display: block;
  opacity: .9;
  transition: opacity var(--dur) var(--ease);
}

/* Text-only marquee items (icon + word) keep the subtle reveal-on-hover. */
.bb-marquee__logo:not(:has(img)):hover {
  color: var(--bb-text);
  opacity: 1;
  filter: grayscale(0);
}

/* Full opacity on hover. */
.bb-marquee__logo:has(img):hover img {
  opacity: 1;
}

@keyframes bb-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   7. STATS / COUNTERS
   ========================================================================== */
.bb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.bb-stat {
  padding: var(--sp-4);
  border: 1px solid var(--bb-border);
  border-radius: var(--r-lg);
  background: var(--bb-surface-2);
}

.bb-stat__num {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
}

.bb-stat__num .bb-suffix {
  color: var(--bb-primary);
}

.bb-stat__label {
  color: var(--bb-text-muted);
  margin-top: .4rem;
  font-size: .95rem;
}

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.bb-card {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.bb-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--bb-border-strong);
}

/* Gradient-border card (mask trick) */
.bb-card--gradient-border {
  position: relative;
  background: var(--bb-surface-2);
}

.bb-card--gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--bb-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.bb-card--gradient-border:hover::before {
  opacity: 1;
}

/* Service card */
.bb-service-card {
  position: relative;
  overflow: hidden;
}

.bb-service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: var(--bb-gradient-soft);
  transition: opacity var(--dur) var(--ease);
}

.bb-service-card:hover::after {
  opacity: 1;
}

.bb-service-card>* {
  position: relative;
  z-index: 1;
}

.bb-service-card__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  color: var(--bb-primary);
  background: rgba(255, 107, 30, .1);
  border: 1px solid rgba(255, 107, 30, .25);
  margin-bottom: var(--sp-4);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bb-service-card:hover .bb-service-card__icon {
  transform: translateY(-4px) rotate(-6deg);
  background: var(--bb-gradient);
  color: #1a1200;
}

.bb-service-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: .5rem;
}

.bb-service-card p {
  color: var(--bb-text-muted);
  margin-bottom: var(--sp-4);
}

/* Award card */
.bb-award-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

.bb-award-card__icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(255, 107, 30, .1);
  color: var(--bb-primary);
  font-size: 1.5rem;
}

.bb-award-card h3 {
  font-size: 1.15rem;
  margin-bottom: .2rem;
}

.bb-award-card .bb-award-card__org {
  color: var(--bb-text-muted);
  font-size: .95rem;
}

.bb-badge-year {
  display: inline-block;
  margin-top: .6rem;
  padding: .2rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 107, 30, .14);
  color: var(--bb-primary-text);
  font-size: .8rem;
  font-weight: 600;
}

/* Team card */
.bb-team-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--bb-border);
  background: var(--bb-surface-2);
}

.bb-team-card__img {
  aspect-ratio: 3 / 3.4;
  overflow: hidden;
}

.bb-team-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.bb-team-card:hover .bb-team-card__img img {
  transform: scale(1.06);
}

.bb-team-card__body {
  padding: var(--sp-4);
}

.bb-team-card__body h3 {
  font-size: 1.15rem;
  margin-bottom: .15rem;
}

.bb-team-card__role {
  color: var(--bb-primary-text);
  font-size: .9rem;
  font-weight: 600;
}

.bb-team-card__socials {
  display: flex;
  gap: .5rem;
  margin-top: var(--sp-3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.bb-team-card:hover .bb-team-card__socials, .bb-team-card:focus-within .bb-team-card__socials {
  opacity: 1;
  transform: none;
}

.bb-team-card__socials a {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--bb-surface-3);
  color: var(--bb-text);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bb-team-card__socials a:hover {
  background: var(--bb-primary);
  color: #1a1200;
}

/* Value card (about) */
.bb-value-card__icon {
  font-size: 1.8rem;
  color: var(--bb-primary);
  margin-bottom: var(--sp-3);
}

.bb-value-card h3 {
  font-size: var(--fs-h3);
}

.bb-value-card p {
  color: var(--bb-text-muted);
  margin: 0;
}

/* ==========================================================================
   9. BENTO / CASE STUDIES
   ========================================================================== */
.bb-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: var(--sp-4);
}

.bb-bento__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--bb-border);
  display: block;
  grid-column: span 2;
  grid-row: span 1;
}

.bb-bento__item--wide {
  grid-column: span 2;
}

.bb-bento__item--tall {
  grid-row: span 2;
}

.bb-bento__item--big {
  grid-column: span 2;
  grid-row: span 2;
}

.bb-bento__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

.bb-bento__item:hover img {
  transform: scale(1.08);
}

.bb-bento__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(20, 20, 20, .85));
}

.bb-bento__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--sp-4);
  transform: translateY(8px);
  transition: transform var(--dur) var(--ease);
}

.bb-bento__item:hover .bb-bento__caption {
  transform: none;
}

.bb-bento__cat {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--bb-primary-text);
  font-weight: 600;
}

.bb-bento__caption h3 {
  font-size: 1.2rem;
  margin: .2rem 0 0;
}

/* ==========================================================================
   10. PROCESS TIMELINE
   ========================================================================== */
.bb-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  counter-reset: step;
}

.bb-timeline__step {
  position: relative;
  padding-top: var(--sp-5);
}

.bb-timeline__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  background: var(--bb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  height: 2.4rem;
  margin-bottom: .9rem;
}

.bb-timeline__step::after {
  content: "";
  position: absolute;
  /* Centre the connector on the number: padding-top (var(--sp-5)) + half the
     number height (2.4rem / 2 = 1.2rem), minus 1px for the 2px line thickness. */
  top: calc(var(--sp-5) + 1.2rem - 1px);
  left: 3.4rem;
  right: -.75rem;
  height: 2px;
  background: var(--bb-border);
}

.bb-timeline__step:last-child::after {
  display: none;
}

.bb-timeline__step h3 {
  font-size: var(--fs-h3);
}

.bb-timeline__step p {
  color: var(--bb-text-muted);
  margin: 0;
}

/* Vertical milestone timeline (about/awards) */
.bb-vtimeline {
  position: relative;
  padding-left: 2.5rem;
}

.bb-vtimeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: linear-gradient(var(--bb-primary), transparent);
}

.bb-vtimeline__item {
  position: relative;
  padding-bottom: var(--sp-5);
}

.bb-vtimeline__item::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: .35rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bb-bg);
  border: 3px solid var(--bb-primary);
  box-shadow: 0 0 0 4px rgba(255, 107, 30, .15);
}

.bb-vtimeline__year {
  color: var(--bb-primary-text);
  font-family: var(--ff-display);
  font-weight: 700;
}

.bb-vtimeline__item h3 {
  font-size: 1.2rem;
  margin: .1rem 0 .3rem;
}

.bb-vtimeline__item p {
  color: var(--bb-text-muted);
  margin: 0;
}

/* ==========================================================================
   11. TESTIMONIALS (Swiper)
   ========================================================================== */
.bb-testimonials .swiper {
  padding-bottom: 3.5rem;
}

.bb-quote {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  height: auto;
}

.bb-quote__stars {
  color: var(--bb-primary);
  margin-bottom: var(--sp-3);
  font-size: 1rem;
  letter-spacing: .1em;
}

.bb-quote__text {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}

.bb-quote__person {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.bb-quote__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bb-primary);
}

.bb-quote__name {
  font-weight: 700;
  font-family: var(--ff-display);
}

.bb-quote__role {
  color: var(--bb-text-muted);
  font-size: .9rem;
}

/* custom pagination */
.bb-testimonials .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: var(--bb-text-muted);
  opacity: .5;
  transition: all var(--dur) var(--ease);
}

.bb-testimonials .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 6px;
  opacity: 1;
  background: var(--bb-gradient);
}

/* ==========================================================================
   12. CTA BAND
   ========================================================================== */
.bb-cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bb-gradient);
  color: #1a1200;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  text-align: center;
}

.bb-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 80% -20%, rgba(255, 255, 255, .35), transparent 60%);
}

.bb-cta-band>* {
  position: relative;
  z-index: 1;
}

.bb-cta-band h2 {
  color: #1a1200;
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-3);
}

.bb-cta-band p {
  color: #3a2200;
  font-size: var(--fs-lead);
  margin-bottom: var(--sp-5);
}

/* ==========================================================================
   13. FAQ ACCORDION (restyled Bootstrap)
   ========================================================================== */
.bb-faq .accordion-item {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border);
  border-radius: var(--r-md) !important;
  margin-bottom: var(--sp-3);
  overflow: hidden;
}

.bb-faq .accordion-button {
  background: transparent;
  color: var(--bb-text);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.08rem;
  padding: 1.15rem 1.25rem;
  box-shadow: none;
}

.bb-faq .accordion-button:not(.collapsed) {
  color: var(--bb-primary-text);
  background: rgba(255, 107, 30, .06);
}

.bb-faq .accordion-button::after {
  background-image: none;
  content: "\002B";
  font-size: 1.4rem;
  line-height: 1;
  width: auto;
  height: auto;
  transition: transform var(--dur) var(--ease);
  color: var(--bb-primary);
}

.bb-faq .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
}

.bb-faq .accordion-button:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: -2px;
}

.bb-faq .accordion-body {
  color: var(--bb-text-muted);
  padding-top: 0;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.bb-footer {
  background: var(--bb-surface-1);
  border-top: 1px solid var(--bb-border);
  padding-top: var(--sp-8);
}

.bb-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--sp-5);
}

.bb-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--bb-text);
}

.bb-footer__blurb {
  color: var(--bb-text-muted);
  margin: var(--sp-3) 0 var(--sp-4);
  max-width: 34ch;
}

.bb-footer h4 {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--bb-text-muted);
  margin-bottom: var(--sp-4);
}

.bb-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.bb-footer__links a {
  color: var(--bb-text);
  font-size: .96rem;
}

.bb-footer__links a:hover {
  color: var(--bb-primary-text);
  padding-left: 4px;
  transition: padding var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bb-footer__contact li {
  display: flex;
  gap: .6rem;
  color: var(--bb-text-muted);
  margin-bottom: .7rem;
}

.bb-footer__contact i {
  color: var(--bb-primary);
}

.bb-newsletter {
  display: flex;
  gap: .5rem;
  margin-top: var(--sp-3);
}

.bb-newsletter input {
  flex: 1;
  min-width: 0;
}

.bb-socials {
  display: flex;
  gap: .6rem;
  margin-top: var(--sp-4);
}

.bb-socials a {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--bb-surface-2);
  color: var(--bb-text);
  border: 1px solid var(--bb-border);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bb-socials a:hover {
  background: var(--bb-gradient);
  color: #1a1200;
  transform: translateY(-3px);
}

.bb-footer__bar {
  border-top: 1px solid var(--bb-border);
  margin-top: var(--sp-7);
  padding: var(--sp-4) 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  color: var(--bb-text-muted);
  font-size: .9rem;
}

/* ==========================================================================
   15. FORMS (shared)
   ========================================================================== */
.bb-input, .bb-select, .bb-textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--bb-text);
  background: var(--bb-surface-1);
  border: 1px solid var(--bb-border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.bb-input::placeholder, .bb-textarea::placeholder {
  color: #7d7871;
}

.bb-input:focus, .bb-select:focus, .bb-textarea:focus {
  outline: none;
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 30, .18);
}

.bb-textarea {
  resize: vertical;
  min-height: 140px;
}

.bb-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a7a29c'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.bb-field {
  margin-bottom: var(--sp-4);
}

.bb-label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .5rem;
}

.bb-field__error {
  display: none;
  color: #ff8a6a;
  font-size: .82rem;
  margin-top: .4rem;
}

.bb-field.is-invalid .bb-input, .bb-field.is-invalid .bb-select, .bb-field.is-invalid .bb-textarea {
  border-color: #ff6a4a;
}

.bb-field.is-invalid .bb-field__error {
  display: block;
}

.bb-field.is-valid .bb-input, .bb-field.is-valid .bb-select, .bb-field.is-valid .bb-textarea {
  border-color: #5fbf7a;
}

.bb-form__status {
  display: none;
  margin-top: var(--sp-3);
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  background: rgba(95, 191, 122, .12);
  color: #9fe0b0;
  border: 1px solid rgba(95, 191, 122, .35);
}

.bb-form__status.is-visible {
  display: block;
}

/* ==========================================================================
   16. SERVICES PAGE
   ========================================================================== */
.bb-page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 4rem) 0 var(--sp-7);
  overflow: hidden;
}

.bb-page-hero__inner {
  max-width: 720px;
}

.bb-page-hero h1 {
  font-size: var(--fs-h1);
}

.bb-page-hero p {
  font-size: var(--fs-lead);
  color: var(--bb-text-muted);
}

.bb-breadcrumb {
  display: flex;
  gap: .5rem;
  align-items: center;
  color: var(--bb-text-muted);
  font-size: .9rem;
  margin-bottom: var(--sp-4);
}

.bb-breadcrumb a {
  color: var(--bb-text-muted);
}

.bb-breadcrumb a:hover {
  color: var(--bb-primary-text);
}

.bb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.bb-split--reverse .bb-split__media {
  order: 2;
}

.bb-split__body {
  min-width: 0;
}

/* text side of a .bb-split */
.bb-split__media img {
  border-radius: var(--r-lg);
  border: 1px solid var(--bb-border);
  box-shadow: var(--shadow-2);
}

.bb-checklist {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: grid;
  gap: .8rem;
}

.bb-checklist li {
  display: flex;
  gap: .7rem;
  color: var(--bb-text);
}

.bb-checklist i {
  color: var(--bb-primary);
  margin-top: .2rem;
}

.bb-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.bb-tier {
  display: flex;
  flex-direction: column;
}

.bb-tier--featured {
  border-color: var(--bb-primary);
  box-shadow: var(--shadow-glow);
}

.bb-tier__badge {
  align-self: flex-start;
  padding: .2rem .7rem;
  border-radius: var(--r-pill);
  background: var(--bb-gradient);
  color: #1a1200;
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.bb-tier__price {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 2.4rem;
}

.bb-tier__price span {
  font-size: .95rem;
  font-weight: 400;
  color: var(--bb-text-muted);
}

.bb-tier .bb-checklist {
  margin-bottom: var(--sp-4);
}

.bb-tier .bb-btn {
  margin-top: auto;
}

/* ==========================================================================
   17. AWARDS PAGE
   ========================================================================== */
.bb-logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--bb-border);
  border: 1px solid var(--bb-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.bb-logo-wall__cell {
  background: var(--bb-surface-1);
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-3);
  min-height: 110px;
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--bb-text-muted);
  opacity: .7;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.bb-logo-wall__cell:hover {
  opacity: 1;
  color: var(--bb-text);
  background: var(--bb-surface-2);
}

/* ==========================================================================
   18. ABOUT PAGE
   ========================================================================== */
.bb-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  gap: var(--sp-3);
}

.bb-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-md);
}

.bb-collage__tall {
  grid-row: span 2;
}

.bb-collage__wide {
  grid-column: span 2;
}

/* ==========================================================================
   19. CONTACT PAGE
   ========================================================================== */
.bb-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.bb-info-card {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.bb-info-card__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(255, 107, 30, .1);
  color: var(--bb-primary);
  font-size: 1.3rem;
}

.bb-info-card h3 {
  font-size: 1.05rem;
  margin-bottom: .15rem;
}

.bb-info-card p {
  color: var(--bb-text-muted);
  margin: 0;
}

.bb-map {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bb-border);
}

.bb-map iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  filter: grayscale(.3) invert(.9) hue-rotate(180deg);
}

.bb-hours li {
  display: flex;
  justify-content: space-between;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bb-border);
  color: var(--bb-text-muted);
}

.bb-hours li b {
  color: var(--bb-text);
}

/* ==========================================================================
   15b. GALLERY
   ========================================================================== */
.bb-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-bottom: var(--sp-6);
}

.bb-filter__btn {
  padding: .55rem 1.2rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--bb-border-strong);
  background: transparent;
  color: var(--bb-text-muted);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.bb-filter__btn:hover {
  color: var(--bb-text);
  border-color: var(--bb-primary);
}

.bb-filter__btn.is-active {
  background: var(--bb-gradient);
  color: #1a1200;
  border-color: transparent;
}

.bb-grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.bb-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--bb-border);
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.bb-gallery-item.is-hidden {
  display: none;
}

.bb-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.bb-gallery-item:hover img {
  transform: scale(1.08);
}

.bb-gallery-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-4);
  background: linear-gradient(transparent 40%, rgba(20, 20, 20, .85));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.bb-gallery-item:hover .bb-gallery-item__overlay, .bb-gallery-item:focus-visible .bb-gallery-item__overlay {
  opacity: 1;
}

.bb-gallery-item__cat {
  color: var(--bb-primary-text);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
}

.bb-gallery-item__overlay h3 {
  font-size: 1.1rem;
  margin: .2rem 0 0;
}

.bb-gallery-item__zoom {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.bb-gallery-item:hover .bb-gallery-item__zoom {
  opacity: 1;
}

/* Lightbox */
.bb-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  background: rgba(15, 15, 15, .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.bb-lightbox.is-open {
  display: flex;
}

.bb-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}

.bb-lightbox__close, .bb-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--bb-border-strong);
  color: #fff;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.bb-lightbox__close:hover, .bb-lightbox__nav:hover {
  background: var(--bb-primary);
  color: #1a1200;
}

.bb-lightbox__close {
  top: var(--sp-4);
  right: var(--sp-4);
}

.bb-lightbox__nav--prev {
  left: var(--sp-4);
}

.bb-lightbox__nav--next {
  right: var(--sp-4);
}

/* ==========================================================================
   20. SCROLL-REVEAL UTILITY
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .bb-nav__menu, .bb-nav__actions .bb-btn {
    display: none;
  }

  .bb-burger {
    display: block;
  }

  .bb-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-timeline__step::after {
    display: none;
  }

  .bb-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .bb-split {
    grid-template-columns: 1fr;
  }

  .bb-split--reverse .bb-split__media {
    order: 0;
  }

  .bb-tiers {
    grid-template-columns: 1fr;
  }

  .bb-contact-grid {
    grid-template-columns: 1fr;
  }

  .bb-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }

  .bb-bento__item--big {
    grid-column: span 2;
  }
}

/* Tablet portrait (768–991px): keep multi-item grids 2-up instead of letting
   them collapse, and relax fixed bento row heights so tall cards don't clip. */
@media (max-width: 767.98px) {
  .bb-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-bento {
    grid-auto-rows: minmax(180px, auto);
  }

  .bb-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }

  /* Center-stack any text+media split cleanly and cap media width */
  .bb-split__media img,
  .bb-pin__visual {
    margin-inline: auto;
  }
}

/* Short / landscape viewports: don't demand a near-full-height hero. */
@media (max-height: 620px) and (min-width: 576px) {
  .bb-hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + var(--sp-5));
    padding-bottom: var(--sp-5);
  }
}

@media (max-width: 575.98px) {
  .bb-stats {
    grid-template-columns: 1fr 1fr;
  }

  .bb-grid-gallery {
    grid-template-columns: 1fr;
  }

  .bb-footer__grid {
    grid-template-columns: 1fr;
  }

  .bb-bento {
    grid-template-columns: 1fr;
  }

  .bb-bento__item, .bb-bento__item--wide, .bb-bento__item--big, .bb-bento__item--tall {
    grid-column: 1 / -1;
    grid-row: span 1;
  }

  .bb-collage {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-hero__cta {
    flex-direction: column;
  }

  .bb-hero__cta .bb-btn {
    width: 100%;
  }

  .bb-footer__bar {
    flex-direction: column;
  }
}

@media (min-width: 992px) {
  .bb-grid-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   23. PHASE 2 — ADVANCED COMPONENTS
   (added on top of the existing language; all motion is transform/opacity
    only and disabled under prefers-reduced-motion at the end of the file)
   ========================================================================== */

/* --- 23.1 Scroll progress bar (under the header) --- */
.bb-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--bb-gradient);
  z-index: var(--z-progress);
  will-change: transform;
}

/* --- 23.1b Scroll-to-top button (appears once the page is scrolled down) --- */
.bb-totop {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #1a1200;
  background: var(--bb-gradient);
  box-shadow: var(--shadow-glow);
  z-index: var(--z-nav);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  will-change: transform, opacity;
}

.bb-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.bb-totop:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -10px var(--bb-primary-glow);
}

.bb-totop:active {
  transform: translateY(-1px);
}

/* --- 23.2 Custom cursor glow (desktop pointer only; JS adds .has-cursor) --- */
.bb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  mix-blend-mode: screen;
  background: radial-gradient(circle, var(--bb-primary-glow), transparent 70%);
  transform: translate(-50%, -50%);
  transition: width .2s var(--ease), height .2s var(--ease), opacity .2s var(--ease);
  opacity: 0;
}

.has-cursor .bb-cursor {
  opacity: 1;
}

.has-cursor .bb-cursor.is-active {
  width: 54px;
  height: 54px;
}

/* --- 23.3 Text mask reveal on headings (JS adds .is-in when in view) --- */
.bb-textreveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.bb-textreveal>span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .8s var(--ease);
}

.bb-textreveal.is-in>span {
  transform: translateY(0);
}

/* --- 23.4 Ripple effect on buttons --- */
.bb-btn {
  position: relative;
  overflow: hidden;
}

.bb-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, .35);
  pointer-events: none;
  animation: bb-ripple .6s var(--ease);
}

@keyframes bb-ripple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* --- 23.5 Sticky scroll-pinned "How we activate" --- */
.bb-pin {
  position: relative;
}

.bb-pin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.bb-pin__sticky {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
}

.bb-pin__visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bb-border);
  box-shadow: var(--shadow-2);
}

.bb-pin__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.bb-pin__img.is-active {
  opacity: 1;
  transform: scale(1);
}

.bb-pin__steps {
  display: grid;
  gap: clamp(3rem, 12vh, 8rem);
  padding: 12vh 0;
}

.bb-pin__step {
  opacity: .35;
  transition: opacity .4s var(--ease);
}

.bb-pin__step.is-active {
  opacity: 1;
}

.bb-pin__step .bb-pin__n {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 2.4rem;
  background: var(--bb-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bb-pin__step h3 {
  font-size: var(--fs-h2);
  margin: .3rem 0 .5rem;
}

.bb-pin__step p {
  color: var(--bb-text-muted);
  margin: 0;
}

/* --- 23.6 Before/after comparison slider --- */
.bb-ba {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bb-border);
  box-shadow: var(--shadow-2);
  user-select: none;
  touch-action: pan-y;
}

.bb-ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-ba__after {
  clip-path: inset(0 0 0 50%);
}

.bb-ba__label {
  position: absolute;
  bottom: 1rem;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(20, 20, 20, .7);
  color: var(--bb-text);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bb-ba__label--before {
  left: 1rem;
}

.bb-ba__label--after {
  right: 1rem;
}

.bb-ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--bb-gradient);
  transform: translateX(-50%);
}

.bb-ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--bb-text);
  color: #1a1200;
  display: grid;
  place-items: center;
  cursor: ew-resize;
  box-shadow: var(--shadow-2);
}

.bb-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.bb-ba__range:focus-visible+.bb-ba__divider .bb-ba__handle {
  outline: 2px solid var(--bb-focus);
  outline-offset: 3px;
}

/* --- 23.7 Video testimonial cards --- */
.bb-vidcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--bb-border);
  aspect-ratio: 4/5;
  display: block;
}

.bb-vidcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.bb-vidcard:hover img {
  transform: scale(1.06);
}

.bb-vidcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(20, 20, 20, .85));
}

.bb-vidcard__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--bb-gradient);
  color: #1a1200;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  z-index: 1;
  box-shadow: var(--shadow-glow);
  transition: transform var(--dur) var(--ease);
}

.bb-vidcard:hover .bb-vidcard__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.bb-vidcard__meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: var(--sp-4);
}

.bb-vidcard__meta h3 {
  font-size: 1.1rem;
  margin: 0;
}

.bb-vidcard__meta span {
  color: var(--bb-text-muted);
  font-size: .88rem;
}

/* --- 23.8 Industries tab switcher --- */
.bb-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: var(--sp-5);
}

.bb-tabs__tab {
  padding: .6rem 1.2rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--bb-border-strong);
  background: transparent;
  color: var(--bb-text-muted);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.bb-tabs__tab:hover {
  color: var(--bb-text);
  border-color: var(--bb-primary);
}

.bb-tabs__tab[aria-selected="true"] {
  background: var(--bb-gradient);
  color: #1a1200;
  border-color: transparent;
}

.bb-tabs__pane {
  display: none;
}

.bb-tabs__pane.is-active {
  display: block;
  animation: bb-fade-up .5s var(--ease);
}

@keyframes bb-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --- 23.9 Comparison table (services) --- */
.bb-compare-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--bb-border);
}

.bb-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.bb-compare th, .bb-compare td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--bb-border);
}

.bb-compare thead th {
  background: var(--bb-surface-2);
  font-family: var(--ff-display);
  font-size: 1.05rem;
}

.bb-compare thead th.is-featured {
  color: var(--bb-primary-text);
}

.bb-compare tbody th {
  font-weight: 500;
  color: var(--bb-text-muted);
}

.bb-compare td {
  text-align: center;
}

.bb-compare td:first-of-type {
  text-align: left;
}

.bb-compare .bi-check-lg {
  color: var(--bb-primary);
}

.bb-compare .bi-dash {
  color: var(--bb-text-muted);
  opacity: .5;
}

.bb-compare tbody tr:hover {
  background: rgba(255, 255, 255, .02);
}

/* --- 23.10 Animated horizontal process stepper --- */
.bb-stepper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-4);
  position: relative;
}

.bb-stepper__item {
  text-align: center;
  position: relative;
}

.bb-stepper__dot {
  width: 54px;
  height: 54px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-weight: 800;
  background: var(--bb-surface-2);
  border: 2px solid var(--bb-border-strong);
  color: var(--bb-text);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}

.bb-stepper__item.is-in .bb-stepper__dot {
  background: var(--bb-gradient);
  border-color: transparent;
  color: #1a1200;
}

.bb-stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(50% + 30px);
  right: calc(-50% + 30px);
  height: 2px;
  background: var(--bb-border);
}

.bb-stepper__item.is-in:not(:last-child)::after {
  background: var(--bb-gradient);
}

.bb-stepper__item h3 {
  font-size: 1.05rem;
  margin-bottom: .3rem;
}

.bb-stepper__item p {
  color: var(--bb-text-muted);
  font-size: .92rem;
  margin: 0;
}

/* --- 23.11 Masonry gallery (progressive enhancement over the grid) --- */
.bb-grid-gallery.is-masonry {
  display: block;
  column-gap: var(--sp-4);
  columns: 3;
}

.bb-grid-gallery.is-masonry .bb-gallery-item {
  break-inside: avoid;
  margin-bottom: var(--sp-4);
  aspect-ratio: auto;
  width: 100%;
}

.bb-grid-gallery.is-masonry .bb-gallery-item img {
  height: auto;
}

@media (max-width: 991.98px) {
  .bb-grid-gallery.is-masonry {
    columns: 2;
  }
}

@media (max-width: 575.98px) {
  .bb-grid-gallery.is-masonry {
    columns: 1;
  }
}

/* Filter reposition animation */
.bb-gallery-item {
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.bb-gallery-item.is-filtering {
  opacity: 0;
  transform: scale(.96);
}

/* Gallery helper copy */
.bb-filter-intro {
  text-align: center;
  color: var(--bb-text-muted);
  max-width: 60ch;
  margin: 0 auto var(--sp-5);
}

.bb-filter-intro kbd {
  background: var(--bb-surface-2);
  border: 1px solid var(--bb-border-strong);
  border-radius: 6px;
  padding: .1rem .45rem;
  font-size: .8rem;
  color: var(--bb-text);
}

.bb-loadmore-note {
  text-align: center;
  color: var(--bb-text-muted);
  font-size: .88rem;
  margin-top: var(--sp-3);
}

/* --- 23.12 Milestone timeline with scroll progress line (about) --- */
.bb-vtimeline {
  --_progress: 0;
}

.bb-vtimeline::after {
  content: "";
  position: absolute;
  left: 8px;
  top: .5rem;
  width: 2px;
  height: calc(var(--_progress) * 1%);
  background: var(--bb-gradient);
  transition: height .1s linear;
}

/* --- 23.13 Newsletter CTA with gradient border --- */
.bb-newsletter-band {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--bb-surface-1);
  text-align: center;
}

.bb-newsletter-band::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--bb-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.bb-newsletter-band__form {
  display: flex;
  gap: .6rem;
  max-width: 520px;
  margin: var(--sp-4) auto 0;
}

.bb-newsletter-band__form input {
  flex: 1;
  min-width: 0;
}

@media (max-width: 575.98px) {
  .bb-newsletter-band__form {
    flex-direction: column;
  }
}

/* --- 23.14 Character counter (contact message) --- */
.bb-charcount {
  display: block;
  text-align: right;
  font-size: .8rem;
  color: var(--bb-text-muted);
  margin-top: .4rem;
}

.bb-charcount.is-near {
  color: var(--bb-primary-text);
}

.bb-charcount.is-over {
  color: #ff8a6a;
}

/* --- 23.15 Animated form success confirmation --- */
.bb-form__status {
  animation: none;
}

.bb-form__status.is-visible {
  animation: bb-fade-up .5s var(--ease);
}

.bb-form__status .bi {
  margin-right: .4rem;
}

/* --- 23.16 Parallax collage layer --- */
.bb-collage img {
  will-change: transform;
}

/* --- Responsive stacking for Phase 2 --- */
@media (max-width: 991.98px) {
  .bb-pin__grid {
    grid-template-columns: 1fr;
  }

  .bb-pin__sticky {
    position: relative;
    top: 0;
  }

  .bb-pin__visual {
    aspect-ratio: 16/10;
    max-height: 60vh;
  }

  .bb-pin__steps {
    padding: var(--sp-5) 0;
    gap: var(--sp-6);
  }

  .bb-stepper {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .bb-stepper__item:not(:last-child)::after {
    display: none;
  }
}

/* ==========================================================================
   22. REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .bb-marquee__track {
    animation: none;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .bb-scroll-cue__mouse::after {
    animation: none;
  }

  /* Phase 2: force all reveal/pin/text-mask content to its resting state */
  .bb-textreveal>span {
    transform: none !important;
  }

  .bb-pin__img {
    opacity: 1 !important;
    transform: none !important;
  }

  .bb-pin__step {
    opacity: 1 !important;
  }

  .bb-cursor {
    display: none !important;
  }

  .bb-progress {
    display: none !important;
  }

  .bb-tabs__pane.is-active {
    animation: none !important;
  }

  .bb-collage img {
    transform: none !important;
  }
}

/* Guarantee 44x44px minimum tap targets on touch/small screens */
@media (max-width: 767.98px) {

  .bb-btn, .bb-filter__btn, .bb-tabs__tab, .bb-socials a, .bb-team-card__socials a,
  .bb-nav__link, .bb-offcanvas__link, .bb-lightbox__nav, .bb-lightbox__close {
    min-height: 44px;
  }

  .bb-socials a, .bb-team-card__socials a {
    min-width: 44px;
  }
}

/* Print: hide decorative/fixed chrome */
@media print {
  .bb-nav, .bb-progress, .bb-cursor, .bb-offcanvas, .bb-backdrop, .bb-scroll-cue, .bb-marquee {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   SERVICE-DETAIL LAYER (merged from service-detail.css)
   Its :root tokens (--toc-height, --service-accent*) are folded into the
   main :root above. All rules below are svc-* / .service-detail selectors
   that do not exist elsewhere in this file (no duplication). Inert on pages
   without svc-* markup.
   ========================================================================== */
/* ==========================================================================
   BrandBeam — SERVICE DETAIL PAGE PATTERN
   assets/css/service-detail.css
   --------------------------------------------------------------------------
   Layers on top of style.css (tokens, buttons, cards, reveal all inherited).
   Loaded AFTER style.css on every service-*.html page.

   TABLE OF CONTENTS
   S0.  Extra tokens (--service-accent, --toc-height, scroll-padding override)
   S1.  Breadcrumb bar
   S2.  Service hero (split + gradient frame + floating stat + proof chips)
   S3.  Sticky in-page TOC (scrollspy pills)
   S4.  Overview + sticky Quick-facts card
   S5.  What's included (icon grid)
   S6.  Why BrandBeam (alternating image/text + parallax)
   S7.  Process stepper (fill-on-scroll)
   S8.  Featured work (bento)
   S9.  Results band (counters)
   S10. Testimonial (pull-quote)
   S11. Engagement tiers
   S12. FAQ
   S13. Related services
   S14. Conversion CTA band
   S15. Persistent conversion: desktop sticky rail + mobile bottom bar
   S16. Responsive
   S17. Reduced motion
   ========================================================================== */

/* ==========================================================================
   S0. EXTRA TOKENS
   ========================================================================== */

/* Anchor jumps must clear BOTH the fixed header AND the sticky TOC.
   scroll-padding-top only affects the SCROLL CONTAINER, which is <html> — not
   <body>. So the rule must target the root element. We apply it via:
     • html.service-detail  — the class added to <html> on every service page, and
     • html:has(.svc-toc)   — a no-markup-change fallback for the same effect.
   (Previously this sat on the body's .service-detail class, so it never applied
   and TOC anchor jumps landed hidden behind the sticky TOC bar.) */
html.service-detail,
html:has(.svc-toc) {
  scroll-padding-top: calc(var(--nav-h) + var(--toc-height) + 12px);
}

/* Section rhythm helper: service pages alternate surfaces for block separation.
   (bb-section / bb-section--surface already exist; this is the raised variant.) */
.bb-section--surface-2 { background: var(--bb-surface-2); }

/* ==========================================================================
   S1. BREADCRUMB BAR
   ========================================================================== */
.svc-breadcrumb {
  padding-top: calc(var(--nav-h) + 1rem);
  padding-bottom: .5rem;
}
.svc-breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .88rem; color: var(--bb-text-muted);
}
.svc-breadcrumb__list a { color: var(--bb-text-muted); }
.svc-breadcrumb__list a:hover { color: var(--service-accent-text); }
.svc-breadcrumb__list li { display: inline-flex; align-items: center; gap: .5rem; }
.svc-breadcrumb__sep { opacity: .5; }
.svc-breadcrumb__current { color: var(--service-accent-text); font-weight: 600; }

/* ==========================================================================
   S2. SERVICE HERO
   ========================================================================== */
.svc-hero { position: relative; overflow: hidden; padding: 1rem 0 var(--section-y); }
.svc-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: center; }
.svc-hero__title { font-size: var(--fs-h1); margin: .4rem 0 var(--sp-3); }
.svc-hero__value { font-size: var(--fs-lead); color: var(--bb-text-muted); max-width: 46ch; margin-bottom: var(--sp-4); }
.svc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }

/* Proof chips */
.svc-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.svc-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: var(--bb-surface-2); border: 1px solid var(--bb-border);
  font-size: .9rem; font-weight: 500;
}
.svc-chip b { font-family: var(--ff-display); color: var(--service-accent-text); }
.svc-chip i { color: var(--service-accent); }

/* Gradient-bordered media frame + floating stat */
.svc-hero__frame {
  position: relative; border-radius: var(--r-lg); padding: 3px;
  background: var(--bb-gradient); box-shadow: var(--shadow-glow);
}
.svc-hero__frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: calc(var(--r-lg) - 3px); aspect-ratio: 4/3;
}
.svc-hero__floating {
  position: absolute; left: -1rem; bottom: -1rem; z-index: 2;
  background: var(--bb-surface-1); border: 1px solid var(--bb-border-strong);
  border-radius: var(--r-md); padding: 1rem 1.25rem; box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: .8rem; max-width: 82%;
}
.svc-hero__floating .svc-hero__floating-num { font-family: var(--ff-display); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--service-accent-text); }
.svc-hero__floating .svc-hero__floating-label { font-size: .82rem; color: var(--bb-text-muted); }
.svc-hero__floating i { font-size: 1.6rem; color: var(--service-accent); }

/* ==========================================================================
   S3. STICKY IN-PAGE TOC
   ========================================================================== */
.svc-toc {
  position: sticky; top: var(--nav-h); z-index: calc(var(--z-nav) - 1);
  height: var(--toc-height);                 /* reserved height → no layout shift */
  background: rgba(31, 31, 31, .9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-block: 1px solid var(--bb-border);
  transition: transform var(--dur) var(--ease);
}
/* "Collapses into the header on scroll-up" → JS toggles .is-tucked to slide it
   flush under the header (it is already sticky; this hides it when appropriate). */
.svc-toc.is-hidden { transform: translateY(calc(-100% - var(--nav-h))); }
.svc-toc__inner {
  height: 100%; display: flex; align-items: center; gap: .5rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
}
.svc-toc__inner::-webkit-scrollbar { display: none; }
.svc-toc__link {
  flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  color: var(--bb-text-muted); font-weight: 600; font-size: .9rem;
  border: 1px solid transparent;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc-toc__link:hover { color: var(--bb-text); border-color: var(--bb-border-strong); }
.svc-toc__link.is-active { color: #1a1200; background: var(--bb-gradient); }

/* ==========================================================================
   S4. OVERVIEW + QUICK FACTS
   ========================================================================== */
.svc-overview__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
.svc-overview__body p { color: var(--bb-text-muted); margin-bottom: var(--sp-4); }
.svc-overview__body p:first-of-type { color: var(--bb-text); font-size: var(--fs-lead); }
.svc-facts {
  position: sticky; top: calc(var(--nav-h) + var(--toc-height) + 1rem);
  background: var(--bb-surface-2); border: 1px solid var(--bb-border);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-1);
}
.svc-facts h3 { font-size: 1.05rem; margin-bottom: var(--sp-4); }
.svc-facts__list { list-style: none; margin: 0; padding: 0; }
.svc-facts__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--bb-border); }
.svc-facts__list li:last-child { border-bottom: 0; }
.svc-facts__list dt, .svc-facts__list .svc-facts__k { color: var(--bb-text-muted); font-size: .92rem; }
.svc-facts__list dd, .svc-facts__list .svc-facts__v { margin: 0; font-weight: 600; text-align: right; }
.svc-facts .bb-btn { margin-top: var(--sp-4); }

/* ==========================================================================
   S5. WHAT'S INCLUDED (icon grid)
   ========================================================================== */
.svc-included { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.svc-deliverable {
  position: relative; overflow: hidden;
  background: var(--bb-surface-2); border: 1px solid var(--bb-border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc-deliverable::after { content: ""; position: absolute; inset: 0; opacity: 0; background: var(--bb-gradient-soft); transition: opacity var(--dur) var(--ease); }
.svc-deliverable:hover { transform: translateY(-5px); border-color: var(--bb-border-strong); }
.svc-deliverable:hover::after { opacity: 1; }
.svc-deliverable > * { position: relative; z-index: 1; }
.svc-deliverable__icon { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 1.4rem; color: var(--service-accent); background: var(--service-accent-soft); border: 1px solid rgba(255,107,30,.25); margin-bottom: var(--sp-3); }
.svc-deliverable h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.svc-deliverable p { color: var(--bb-text-muted); font-size: .92rem; margin: 0; }

/* ==========================================================================
   S6. WHY BRANDBEAM (alternating rows + parallax)
   ========================================================================== */
.svc-why__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: center; }
.svc-why__row + .svc-why__row { margin-top: var(--section-y); }
.svc-why__row--reverse .svc-why__media { order: 2; }
.svc-why__media { overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--bb-border); box-shadow: var(--shadow-2); }
.svc-why__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; will-change: transform; }
.svc-why__row h3 { font-size: var(--fs-h3); }
.svc-why__row > div > p { color: var(--bb-text-muted); }

/* ==========================================================================
   S7. PROCESS STEPPER (fill on scroll)
   ========================================================================== */
.svc-process { position: relative; }
.svc-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-4); position: relative; }
/* connecting line behind the nodes */
.svc-steps::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 3px; background: var(--bb-border); border-radius: 3px; }
.svc-steps__fill { position: absolute; top: 27px; left: 8%; height: 3px; width: 0; max-width: 84%; background: var(--bb-gradient); border-radius: 3px; transition: width .15s linear; }
.svc-step { text-align: center; position: relative; z-index: 1; }
.svc-step__node {
  width: 56px; height: 56px; margin: 0 auto var(--sp-3); border-radius: 50%;
  display: grid; place-items: center; font-family: var(--ff-display); font-weight: 800; font-size: 1.2rem;
  background: var(--bb-surface-2); border: 2px solid var(--bb-border-strong); color: var(--bb-text);
  transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.svc-step.is-in .svc-step__node { background: var(--bb-gradient); border-color: transparent; color: #1a1200; }
.svc-step__dur { display: inline-block; margin-bottom: .3rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--service-accent-text); }
.svc-step h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.svc-step p { color: var(--bb-text-muted); font-size: .9rem; margin: 0; }

/* ==========================================================================
   S8. FEATURED WORK (bento)
   ========================================================================== */
.svc-work { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: var(--sp-4); }
.svc-work__card { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--bb-border); background: var(--bb-surface-2); display: flex; flex-direction: column; }
.svc-work__card--wide { grid-column: span 2; }
.svc-work__thumb { overflow: hidden; aspect-ratio: 16/10; }
.svc-work__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.svc-work__card:hover .svc-work__thumb img { transform: scale(1.07); }
.svc-work__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.svc-work__logo { font-family: var(--ff-display); font-weight: 700; color: var(--bb-text-muted); font-size: .85rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .4rem; }
.svc-work__logo i { color: var(--service-accent); }
.svc-work__card h3 { font-size: 1.1rem; margin: .1rem 0; }
.svc-work__metric { color: var(--service-accent-text); font-weight: 600; font-size: .92rem; }
.svc-work__link { margin-top: auto; }

/* ==========================================================================
   S9. RESULTS BAND (counters)
   ========================================================================== */
.svc-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.svc-result { text-align: center; padding: var(--sp-4); border: 1px solid var(--bb-border); border-radius: var(--r-lg); background: var(--bb-surface-2); }
.svc-result__num { font-family: var(--ff-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.svc-result__num .bb-suffix { color: var(--service-accent-text); }
.svc-result__label { font-weight: 600; margin-top: .4rem; }
.svc-result__cap { color: var(--bb-text-muted); font-size: .84rem; }

/* ==========================================================================
   S10. TESTIMONIAL (pull-quote)
   ========================================================================== */
.svc-quote { max-width: 900px; margin-inline: auto; text-align: center; position: relative; }
.svc-quote__mark { font-family: var(--ff-display); font-size: 5rem; line-height: .6; background: var(--bb-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.svc-quote__stars { color: var(--service-accent); letter-spacing: .12em; margin-bottom: var(--sp-3); }
.svc-quote__text { font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.4; margin-bottom: var(--sp-4); }
.svc-quote__person { display: inline-flex; align-items: center; gap: .9rem; }
.svc-quote__avatar { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 2px solid var(--service-accent); }
.svc-quote__meta { text-align: left; }
.svc-quote__name { font-weight: 700; font-family: var(--ff-display); }
.svc-quote__role { color: var(--bb-text-muted); font-size: .9rem; }

/* ==========================================================================
   S11. ENGAGEMENT TIERS
   ========================================================================== */
.svc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: stretch; }
.svc-tier { position: relative; display: flex; flex-direction: column; background: var(--bb-surface-2); border: 1px solid var(--bb-border); border-radius: var(--r-lg); padding: var(--sp-5); }
.svc-tier--featured { border-color: transparent; box-shadow: var(--shadow-glow); }
.svc-tier--featured::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: var(--bb-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.svc-tier__badge { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); padding: .25rem .9rem; border-radius: var(--r-pill); background: var(--bb-gradient); color: #1a1200; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.svc-tier h3 { font-size: var(--fs-h3); margin-bottom: .3rem; }
.svc-tier__summary { color: var(--bb-text-muted); font-size: .92rem; min-height: 3em; }
.svc-tier__price { font-family: var(--ff-display); font-weight: 800; font-size: 2.2rem; margin: var(--sp-3) 0; }
.svc-tier__price span { font-size: .9rem; font-weight: 400; color: var(--bb-text-muted); }
.svc-tier .bb-checklist { margin-bottom: var(--sp-4); }
.svc-tier .bb-btn { margin-top: auto; }

/* ==========================================================================
   S12. FAQ (reuses .bb-faq accordion styling from style.css)
   ========================================================================== */
.svc-faq-wrap { max-width: 820px; margin-inline: auto; }

/* ==========================================================================
   S13. RELATED SERVICES
   ========================================================================== */
.svc-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.svc-related__card { display: flex; flex-direction: column; gap: .5rem; padding: var(--sp-5); background: var(--bb-surface-2); border: 1px solid var(--bb-border); border-radius: var(--r-lg); color: var(--bb-text); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.svc-related__card:hover { transform: translateY(-5px); border-color: var(--service-accent); color: var(--bb-text); }
.svc-related__icon { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 1.3rem; color: var(--service-accent); background: var(--service-accent-soft); margin-bottom: .3rem; }
.svc-related__card h3 { font-size: 1.1rem; margin: 0; }
.svc-related__card p { color: var(--bb-text-muted); font-size: .9rem; margin: 0; }
.svc-related__card .bb-link { margin-top: auto; }

/* ==========================================================================
   S15. PERSISTENT CONVERSION — desktop sticky rail + mobile bottom bar
   ========================================================================== */
/* Layout wrapper: overview area gets the rail alongside on desktop. We implement
   the rail as its own sticky element inside a right column on wide screens. */
.svc-rail {
  position: sticky; top: calc(var(--nav-h) + var(--toc-height) + 1rem);
  background: var(--bb-surface-1); border: 1px solid var(--bb-border-strong);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-2);
}
.svc-rail h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.svc-rail p { color: var(--bb-text-muted); font-size: .9rem; margin-bottom: var(--sp-4); }
.svc-rail .bb-field { margin-bottom: var(--sp-3); }
.svc-rail__section { padding-block: var(--section-y); }
.svc-rail__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
/* Enquiry rail removed → overview/what's-included span the full width. */
.svc-rail__grid--full { grid-template-columns: 1fr; }

/* Mobile fixed bottom bar */
.svc-mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-nav) - 2);
  display: none; gap: .6rem; padding: .7rem clamp(1rem, 4vw, 1.5rem);
  background: rgba(31, 31, 31, .96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--bb-border);
  transition: transform var(--dur) var(--ease);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
}
.svc-mobilebar.is-hidden { transform: translateY(110%); }   /* hides on scroll-down */
.svc-mobilebar .bb-btn { flex: 1; }
.svc-mobilebar .svc-mobilebar__call { flex: 0 0 auto; width: 52px; padding: 0; }

/* ==========================================================================
   S16. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .svc-included { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  .svc-hero__grid { grid-template-columns: 1fr; }
  .svc-hero__frame { max-width: 560px; }
  .svc-overview__grid { grid-template-columns: 1fr; }
  .svc-facts { position: static; }
  .svc-included { grid-template-columns: repeat(2, 1fr); }
  .svc-why__row { grid-template-columns: 1fr; }
  .svc-why__row--reverse .svc-why__media { order: 0; }
  /* Process becomes a vertical timeline on mobile */
  .svc-steps { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--sp-4); padding-left: 2.2rem; }
  .svc-steps::before { top: 0; bottom: 0; left: 27px; right: auto; width: 3px; height: auto; }
  .svc-steps__fill { top: 0; left: 27px; width: 3px !important; height: 0; max-width: none; transition: height .15s linear; }
  .svc-step { text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; }
  .svc-step__node { margin: 0; }
  .svc-step__dur, .svc-step h3, .svc-step p { grid-column: 2; }
  .svc-work { grid-template-columns: repeat(2, 1fr); }
  .svc-work__card--wide { grid-column: span 2; }
  .svc-results { grid-template-columns: repeat(2, 1fr); }
  .svc-tiers { grid-template-columns: 1fr; }
  .svc-related { grid-template-columns: 1fr; }
  .svc-rail__grid { grid-template-columns: 1fr; }
  .svc-rail { position: static; }               /* rail flows inline on tablet */
  .svc-rail__section .svc-rail { max-width: 560px; margin-inline: auto; }
  .svc-mobilebar { display: flex; }             /* show mobile bar below lg */
  body.service-detail { padding-bottom: 80px; } /* clear the fixed bar */
}
@media (max-width: 575.98px) {
  .svc-included { grid-template-columns: 1fr; }
  .svc-work { grid-template-columns: 1fr; }
  .svc-work__card--wide { grid-column: span 1; }
  .svc-results { grid-template-columns: 1fr 1fr; }
  .svc-hero__floating { position: static; margin-top: var(--sp-3); max-width: 100%; }
  .svc-hero__cta { flex-direction: column; }
  .svc-hero__cta .bb-btn { width: 100%; }
}

/* ==========================================================================
   S17. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .svc-toc { transition: none; }
  .svc-toc.is-hidden { transform: none; }         /* keep TOC visible, no slide */
  .svc-mobilebar { transition: none; }
  .svc-mobilebar.is-hidden { transform: none; }
  .svc-steps__fill { transition: none; }
  .svc-why__media img { transform: none !important; }
  .svc-step.is-in .svc-step__node { transition: none; }
}


/* ==========================================================================
   CONTACT FORM 7 BRIDGE
   Makes CF7 output inherit the BrandBeam field styling. CF7 wraps each control
   in .wpcf7-form-control-wrap and appends its own validation/response markup;
   these rules align that with the theme's .bb-field / .bb-form__status look.
   ========================================================================== */
.wpcf7 .bb-field { position: relative; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .wpcf7-not-valid { border-color: #ff6b6b !important; }
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: .4rem;
  color: #ff8a6a;
  font-size: .82rem;
}
.wpcf7 .wpcf7-spinner { margin: .5rem 0 0 .5rem; }
.wpcf7 .wpcf7-response-output {
  margin: var(--sp-4) 0 0;
  padding: .8rem 1rem;
  border: 1px solid var(--bb-border-strong);
  border-radius: var(--r-md);
  background: var(--bb-surface-2);
  color: var(--bb-text);
  font-size: .92rem;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(120, 200, 120, .5);
  background: rgba(70, 140, 70, .14);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: rgba(255, 120, 120, .5);
  background: rgba(160, 60, 60, .14);
}