/*
Theme Name: Back Road Building
Theme URI: https://backroadbuilding.com
Description: Custom child theme for Back Road Building, built on GeneratePress. Editorial design with Fraunces + Inter, dark anchor + warm cream surface + amber accent.
Author: Michael Venia
Author URI: https://backroadbuilding.com
Template: generatepress
Version: 1.39.9
License: Proprietary
*/

/* ============================================================
   Self-hosted critical fonts — regular weights only.
   Latin subset, woff2. Loaded same-origin so they don't FOUT or
   suffer Google Fonts URL hash-rotation. Other weights (bold,
   italic non-400, etc.) still resolve via the Google Fonts <link>
   loaded by brb_load_fonts() in functions.php.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Inter-Regular-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Fraunces-Regular-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Fraunces-Italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Design System Tokens
   ============================================================ */
:root {
  --brb-anchor:           #1A1A1A;
  --brb-ink:              #2A2A28;
  --brb-surface:          #FAF7F2;
  --brb-surface-raised:   #FFFFFF;
  --brb-accent:           #D97706;
  --brb-accent-hover:     #A85A00;
  --brb-accent-tint:      #F5A93B;
  --brb-mint:             #8AD3C0;

  --brb-neutral-100:      #EAE8E2;
  --brb-neutral-300:      #B8B5AD;
  --brb-neutral-500:      #6B6B66;
  --brb-neutral-700:      #3A3A37;

  --brb-text:             #1A1A1A;
  --brb-text-muted:       #5F5F5A;
  --brb-text-subtle:      #8C8A83;

  --brb-text-on-dark:          #FAF7F2;
  --brb-text-on-dark-muted:    #A9A7A1;
  --brb-text-on-dark-subtle:   #6B6B66;

  --brb-border:                 rgba(26, 26, 26, 0.08);
  --brb-border-strong:          rgba(26, 26, 26, 0.15);
  --brb-border-on-dark:         rgba(250, 247, 242, 0.08);
  --brb-border-on-dark-strong:  rgba(250, 247, 242, 0.15);

  --brb-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --brb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --brb-ease:              cubic-bezier(0.22, 1, 0.36, 1);
  --brb-ease-entrance:     cubic-bezier(0.16, 1, 0.3, 1);

  --brb-pad-page:          clamp(24px, 5.5vw, 88px);
  /* Section vertical rhythm — applied to the cream content
     sections on the four service pages. Hero, final CTA, and
     showcase sections opt out: they earn extra editorial weight
     and define their own padding values. */
  --brb-section-pad:       clamp(72px, 9vw, 120px);
}

/* ============================================================
   Reset + Base
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--brb-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text);
  background: var(--brb-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--brb-font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: inherit;
  margin: 0;
}

a { color: inherit; text-decoration: none; }

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

/* ============================================================
   Utility
   ============================================================ */
.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--brb-pad-page);
}

.wrap-narrow {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--brb-pad-page);
}

.eyebrow {
  display: inline-block;
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brb-accent);
}

.eyebrow--muted { color: var(--brb-text-muted); }
.eyebrow--on-dark { color: var(--brb-accent); }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--brb-ease-entrance),
    transform 900ms var(--brb-ease-entrance);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brb-font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 8px;
  transition: all 200ms var(--brb-ease);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--brb-accent);
  color: var(--brb-anchor);
}
.btn--primary:hover { background: var(--brb-accent-hover); }

.btn--ghost-dark {
  background: transparent;
  color: var(--brb-text-on-dark);
  border-color: var(--brb-border-on-dark-strong);
}
.btn--ghost-dark:hover { border-color: var(--brb-text-on-dark); }

.btn--ghost-light {
  background: transparent;
  color: var(--brb-text);
  border-color: var(--brb-border-strong);
}
.btn--ghost-light:hover { border-color: var(--brb-text); }

/* Prevent pseudo-element gradients from causing horizontal scroll */
.hero,
.who,
.final,
.work-hero,
.contact-hero,
.wall,
.nudge,
.alt-paths {
  overflow-x: hidden;
}
/* ============================================================
   Site Header & Navigation
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border-bottom: 1px solid var(--brb-border-on-dark);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  gap: 28px;
}

.nav-logo {
  font-family: var(--brb-font-display);
  font-size: 22px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  /* Element-level inset: unpins logo from .wrap left edge so the
     two-layer space (wrap padding + element margin) reads as
     intentional breathing room, not a hard container boundary. */
  margin-left: 8px;
}
.nav-logo__img {
  height: 26px;
  width: auto;
  display: block;
}
.nav-logo__img--footer {
  height: 28px;
}
.nav-logo .thin { font-weight: 300; }
.nav-logo .bold { font-weight: 700; }
.nav-logo .dot { color: var(--brb-accent); font-weight: 400; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
}

.nav-links a {
  color: var(--brb-text-on-dark);
  transition: color 200ms var(--brb-ease);
}
.nav-links a:hover { color: var(--brb-accent); }

.nav-divider {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brb-neutral-500);
}

.nav-cta {
  background: var(--brb-accent);
  color: var(--brb-anchor) !important;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 500;
  transition: background 200ms var(--brb-ease);
  /* Element-level inset: pulls the high-contrast amber CTA off the
     .wrap right edge so it doesn't visually pin to the container
     boundary at viewport widths where padding alone can't compensate. */
  margin-right: 16px;
}
.nav-cta:hover { background: var(--brb-accent-hover); color: var(--brb-anchor) !important; }

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--brb-border-on-dark-strong);
  color: var(--brb-text-on-dark);
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms var(--brb-ease), background 200ms var(--brb-ease);
}

.nav-toggle:hover {
  border-color: var(--brb-text-on-dark-muted);
}

/* Three-line hamburger icon, animates to X when menu is open */
.nav-toggle__icon {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--brb-text-on-dark);
  transition: background 200ms var(--brb-ease);
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--brb-text-on-dark);
  transition: transform 300ms var(--brb-ease), top 300ms var(--brb-ease);
}

.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after  { top: 6px; }

/* Open state: lines morph into an X */
.nav-toggle.is-open .nav-toggle__icon {
  background: transparent;
}

.nav-toggle.is-open .nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobile menu panel — hidden on desktop, slides down on mobile when open */
.nav-mobile {
  display: none;
}

/* ============================================================
   Site utility nav — above the main header
   Editorial dark bar: tracked uppercase + dot separators + amber rule.
   Hidden on mobile; secondary destinations appear in nav-mobile instead.
   ============================================================ */
.site-utility-nav {
  background: #0A0A0A;
  border-bottom: 1px solid var(--brb-accent);
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
  line-height: 1;
}

.site-utility-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.site-utility-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  /* Element-level inset: mirrors .nav-logo's 8px on the main header
     so the utility nav's leftmost link (Journal) doesn't pin to the
     .wrap left edge while the phone is inset on the right. Smaller
     than .site-utility-nav__phone's 16px because typographic links
     are less of a visual magnet than the amber CTA. */
  margin-left: 8px;
}

.site-utility-nav__links li {
  display: inline-flex;
  align-items: center;
}

.site-utility-nav__links li + li::before {
  content: '·';
  color: rgba(250, 247, 242, 0.25);
  margin: 0 14px;
  letter-spacing: 0;     /* don't track the separator dot */
}

.site-utility-nav a {
  color: rgba(250, 247, 242, 0.55);
  text-decoration: none;
  transition: color 200ms var(--brb-ease);
}

.site-utility-nav a:hover,
.site-utility-nav a.is-current {
  color: var(--brb-accent);
}

.site-utility-nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  /* Element-level inset: matches .nav-cta so the phone (utility nav
     right edge) and audit button (main header right edge) both sit
     16px inside the .wrap container — keeps the two right edges in
     vertical alignment with each other. */
  margin-right: 16px;
}

.site-utility-nav__phone-icon {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 200ms var(--brb-ease);
}

.site-utility-nav__phone:hover .site-utility-nav__phone-icon {
  opacity: 1;
}

@media (max-width: 768px) {
  .site-utility-nav { display: none; }
}

/* Mobile-menu utility group (shown when site-utility-nav is hidden) */
.nav-mobile__divider {
  display: block;
  height: 1px;
  background: var(--brb-border-on-dark);
  margin: 8px 0 4px;
}

.nav-mobile__util {
  font-size: 14px;
  color: rgba(250, 247, 242, 0.65);
}

.nav-mobile__util:hover {
  color: var(--brb-accent);
}

.nav-mobile__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.nav-mobile__phone svg {
  flex-shrink: 0;
  opacity: 0.75;
}

/* ============================================================
   Mobile nav (breakpoint)
   ============================================================ */
@media (max-width: 960px) {
  /* Extra breathing room inside header on mobile so logo/toggle
     don't feel pinched against the wrap padding */
  .nav {
    padding-left: 8px;
    padding-right: 8px;
  }

  .nav-links { display: none; }

  .nav-toggle { display: inline-flex; }

  .nav-mobile {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brb-anchor);
    border-bottom: 1px solid var(--brb-border-on-dark);
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms var(--brb-ease);
  }

  .nav-mobile.is-open {
    max-height: 600px;
  }

  .nav-mobile__inner {
    padding: 8px var(--brb-pad-page) 24px;
    display: flex;
    flex-direction: column;
  }

  .nav-mobile a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    color: var(--brb-text-on-dark);
    border-bottom: 1px solid var(--brb-border-on-dark);
    transition: color 200ms var(--brb-ease);
  }

  .nav-mobile a:last-child {
    border-bottom: none;
  }

  .nav-mobile a:hover,
  .nav-mobile a:focus {
    color: var(--brb-accent);
  }

  .nav-mobile__divider {
    border-bottom: 1px solid var(--brb-border-on-dark-strong);
    margin: 4px 0;
  }

  .nav-mobile .nav-cta {
    margin-top: 16px;
    text-align: center;
    padding: 14px 16px;
    border-bottom: none;
    color: var(--brb-anchor) !important;
  }
}

/* ============================================================
   01 · Hero
   ============================================================ */
.hero {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 10vw, 140px);
  /* Reserve hero height so font swap / animation entry doesn't shift layout.
     Lower bound matches measured mobile height; clamp keeps it sane on iOS
     where vh fluctuates with the address bar. */
  min-height: clamp(540px, 70vh, 900px);
  position: relative;
  overflow: hidden;
}

.hero__inner { position: relative; }

.hero__eyebrow {
  margin-bottom: clamp(24px, 4vw, 40px);
  opacity: 0;
  animation: fadeUp 400ms var(--brb-ease-entrance) 0ms forwards;
}

.hero__headline {
  font-size: clamp(40px, 6.5vw, 88px);
  line-height: 1.02;
  margin-bottom: clamp(24px, 4vw, 40px);
  max-width: 14ch;
  opacity: 0;
  animation: fadeUp 400ms var(--brb-ease-entrance) 80ms forwards;
}

.hero__headline .accent {
  color: var(--brb-accent);
  font-style: italic;
  font-weight: 400;
}

.hero__subhead {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
  margin-bottom: clamp(32px, 5vw, 48px);
  opacity: 0;
  animation: fadeUp 400ms var(--brb-ease-entrance) 160ms forwards;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 400ms var(--brb-ease-entrance) 240ms forwards;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(24px); }
}

/* ============================================================
   02 · Services
   ============================================================ */
.services {
  padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 140px);
  background: var(--brb-surface);
}

.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(48px, 7vw, 80px);
  gap: 32px;
  flex-wrap: wrap;
}

.services__title {
  font-size: clamp(32px, 4.5vw, 56px);
  max-width: 16ch;
}

.services__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brb-border-strong);
  border-top: 1px solid var(--brb-border-strong);
  border-bottom: 1px solid var(--brb-border-strong);
}

@media (max-width: 840px) {
  .services__grid { grid-template-columns: 1fr; }
}

.service-card {
  background: var(--brb-surface);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 300ms var(--brb-ease);
  position: relative;
}

.service-card:hover { background: #F5F1E8; }

.service-card__num {
  font-family: var(--brb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--brb-text-muted);
}

.service-card__title {
  font-size: clamp(26px, 2.8vw, 32px);
  line-height: 1.15;
  margin-bottom: 4px;
  /* Reserve space for 2 lines so body copy aligns across all cards */
  min-height: calc(2 * 1.15em);
}

@media (max-width: 840px) {
  /* On single-column mobile layout, no alignment needed */
  .service-card__title { min-height: 0; }
}

.service-card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brb-text-muted);
  margin-bottom: 12px;
  flex: 1;
}

.service-card__link {
  font-family: var(--brb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: gap 200ms var(--brb-ease);
}
.service-card__link:hover { gap: 14px; }

/* ============================================================
   03 · Flagship Case Study
   ============================================================ */
.flagship {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(64px, 8vw, 120px) 0;
  position: relative;
}

.flagship__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

@media (max-width: 840px) {
  .flagship__grid { grid-template-columns: 1fr; }
}

.flagship__metric {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metric__value {
  font-family: var(--brb-font-display);
  font-size: clamp(80px, 14vw, 200px);
  line-height: 0.9;
  color: var(--brb-accent);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.metric__label {
  font-family: var(--brb-font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-muted);
}

.metric__sublabel {
  font-family: var(--brb-font-body);
  font-size: 13px;
  color: var(--brb-text-on-dark-subtle);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.flagship__content h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  margin-bottom: 24px;
}

.flagship__content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  margin-bottom: 32px;
  max-width: 60ch;
}

/* ============================================================
   04 · Who's behind the work
   ============================================================ */
.who {
  padding: clamp(80px, 11vw, 160px) 0;
  background: var(--brb-surface);
}

.who__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

@media (max-width: 840px) {
  .who__grid { grid-template-columns: 1fr; }
}

.who__photo {
  aspect-ratio: 4 / 5;
  background: var(--brb-neutral-100);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.who__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.who__content h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.1;
  margin-bottom: 24px;
  max-width: 14ch;
}

.who__content h2 em {
  font-style: italic;
  color: var(--brb-accent);
}

.who__content p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin-bottom: 32px;
  max-width: 52ch;
}

/* ============================================================
   05 · Work Grid
   ============================================================ */
.work {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
}

.work__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(36px, 4.5vw, 56px);
  gap: 24px;
  flex-wrap: wrap;
}

.work__title {
  font-size: clamp(32px, 4.5vw, 56px);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* Two-card variant used when showcasing fewer, stronger case studies */
.work__grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .work__grid,
  .work__grid--two { grid-template-columns: 1fr; }
}

.work-card {
  background: #232321;
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 300ms var(--brb-ease);
  cursor: pointer;
}

.work-card:hover { background: #2C2C29; }

.work-card__tag {
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-accent);
}

.work-card__metric {
  font-family: var(--brb-font-display);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}

.work-card__unit {
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-muted);
  margin-bottom: 8px;
}

.work-card__hook {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
}

.work-card__arrow {
  margin-top: 12px;
  font-size: 20px;
  color: var(--brb-accent);
  transition: transform 200ms var(--brb-ease);
}

.work-card:hover .work-card__arrow { transform: translateX(6px); }

/* ============================================================
   06 · Reviews
   ============================================================ */
.reviews {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--brb-surface);
}

.reviews__head {
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.reviews__title {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-top: 12px;
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 840px) {
  .reviews__grid { grid-template-columns: 1fr; }
}

.review {
  padding: 32px;
  background: #FFFFFF;
  border: 1px solid var(--brb-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.review__stars {
  color: var(--brb-accent);
  font-size: 14px;
  letter-spacing: 2px;
}

.review__quote {
  font-family: var(--brb-font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--brb-text);
  flex: 1;
}

.review__author {
  font-family: var(--brb-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--brb-text-muted);
  letter-spacing: 0.02em;
}

/* ============================================================
   07 · Industries
   ============================================================ */
.industries {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--brb-surface);
  border-top: 1px solid var(--brb-border);
}

.industries__head {
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.industries__title {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-top: 12px;
}

.industries__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--brb-border-strong);
  border-top: 1px solid var(--brb-border-strong);
  border-bottom: 1px solid var(--brb-border-strong);
}

@media (max-width: 840px) {
  .industries__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .industries__grid { grid-template-columns: 1fr; }
}

.industry {
  background: var(--brb-surface);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 300ms var(--brb-ease);
}

.industry:hover { background: #F5F1E8; }

.industry__name {
  font-family: var(--brb-font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.industry__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--brb-text-muted);
}

/* ============================================================
   08 · Final CTA
   ============================================================ */
.final {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(80px, 12vw, 160px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(217,119,6,0.08),
    transparent 60%
  );
  pointer-events: none;
}

.final__inner { position: relative; }

.final__title {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
  max-width: 12ch;
  margin: 20px auto 28px;
}

.final__title em { font-style: italic; color: var(--brb-accent); }

.final__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  max-width: 52ch;
  margin: 0 auto 40px;
}

.final__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.final__contact {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--brb-border-on-dark);
  font-size: 13px;
  color: var(--brb-text-on-dark-muted);
}

.final__contact a {
  color: var(--brb-text-on-dark);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 2px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: #0F0F0F;
  color: var(--brb-text-on-dark-muted);
  padding: 64px 0 32px;
  font-size: 13px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--brb-border-on-dark);
}

@media (max-width: 840px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.footer-brand .nav-logo { font-size: 22px; }
.footer-brand p { margin-top: 12px; line-height: 1.6; max-width: 32ch; }

.footer-col h4 {
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark);
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--brb-text-on-dark-muted); transition: color 200ms var(--brb-ease); }
.footer-col a:hover { color: var(--brb-accent); }

.footer-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
}


/* ============================================================
   ==============================================================
   ABOUT PAGE STYLES (.brb-about body class)
   These styles support page-about.php. Class names are unique
   to the About page except where they intentionally share the
   homepage's design tokens (e.g., .final, .site-header).
   ==============================================================
   ============================================================ */

/* ============================================================
   About · 01 · Intro
   ============================================================ */
.intro {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 10vw, 120px);
  position: relative;
  overflow: hidden;
}

.intro__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
}

.intro__content {
  max-width: 640px;
}

@media (max-width: 900px) {
  .intro__inner {
    grid-template-columns: 1fr;
  }
  .intro__content {
    max-width: 100%;
  }
}

.intro__eyebrow { margin-bottom: clamp(24px, 4vw, 40px); }

.intro__headline {
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.04;
  margin-bottom: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
}

.intro__headline em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

.intro__body {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  max-width: 54ch;
}

.intro__body p + p { margin-top: 1.2em; }

/* Portrait on the right */
.intro__portrait {
  position: relative;
  width: clamp(240px, 26vw, 380px);
  aspect-ratio: 4 / 5;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  transition: opacity 1200ms var(--brb-ease-entrance) 400ms, transform 1200ms var(--brb-ease-entrance) 400ms;
}

.intro__inner .intro__portrait {
  animation: intro-portrait-in 1400ms var(--brb-ease-entrance) 600ms forwards;
}

@keyframes intro-portrait-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .intro__portrait {
    width: clamp(220px, 50vw, 300px);
    margin: 0 auto;
  }
}

.intro__portrait-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.5),
    0 15px 30px -10px rgba(0, 0, 0, 0.3);
  transition: transform 600ms var(--brb-ease);
}

.intro__portrait-frame:hover {
  transform: translateY(-4px);
}

.intro__portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intro__portrait-accent {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--brb-accent);
  border-radius: 8px;
  z-index: 1;
  opacity: 0.4;
  transition: all 600ms var(--brb-ease);
}

.intro__portrait:hover .intro__portrait-accent {
  top: 20px;
  left: 20px;
  opacity: 0.6;
}

/* ============================================================
   About · 02 · Path Here
   ============================================================ */
.path {
  padding: clamp(80px, 11vw, 160px) 0 clamp(24px, 3vw, 48px);
  background: var(--brb-surface);
}

.path__head { margin-bottom: clamp(40px, 5vw, 64px); }

.path__title {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  margin-top: 16px;
  max-width: 18ch;
}

.path__title em { font-style: italic; color: var(--brb-accent); }

.path__body {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--brb-text);
}

.path__body p + p { margin-top: 1.4em; }

.path__body strong {
  font-weight: 500;
  color: var(--brb-text);
}

/* ============================================================
   About · 02.5 · Credentials (masthead style)
   ============================================================ */
.creds {
  background: var(--brb-surface);
  padding: 0 0 clamp(16px, 2vw, 28px);
}

.creds__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.8vw, 20px);
  text-align: center;
}

.creds__rule {
  width: 100%;
  max-width: 360px;
  height: 1px;
  background: var(--brb-border-strong);
}

.creds__label {
  color: var(--brb-accent);
}

.creds__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 18px);
  font-family: var(--brb-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  color: var(--brb-text);
  max-width: 100%;
}

.creds__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.creds__note {
  font-family: var(--brb-font-body);
  font-style: normal;
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  white-space: nowrap;
}

.creds__sep {
  color: var(--brb-accent);
  font-style: normal;
  font-size: 0.8em;
  opacity: 0.5;
}

@media (max-width: 640px) {
  .creds__sep { display: none; }
  .creds__list { flex-direction: column; gap: 10px; }
}

/* ============================================================
   About · 03 · How I Work
   ============================================================ */
.how {
  padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 10vw, 140px);
  background: var(--brb-surface);
}

.how__head {
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.how__title {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-top: 12px;
  max-width: 14ch;
}

.how__title em { font-style: italic; color: var(--brb-accent); }

.how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brb-border-strong);
  border-top: 1px solid var(--brb-border-strong);
  border-bottom: 1px solid var(--brb-border-strong);
}

@media (max-width: 840px) {
  .how__grid { grid-template-columns: 1fr; }
}

.how-item {
  background: var(--brb-surface);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.how-item__num {
  font-family: var(--brb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--brb-text-muted);
}

.how-item__title {
  font-size: 24px;
  line-height: 1.2;
}

.how-item__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brb-text-muted);
}

/* ============================================================
   About · 04 · What I Believe
   ============================================================ */
.believe {
  padding: clamp(80px, 11vw, 160px) 0;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
}

.believe__head {
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 900px;
}

.believe__title {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  margin-top: 16px;
  max-width: 16ch;
}

.believe__title em { font-style: italic; color: var(--brb-accent); }

.believe__list {
  display: grid;
  gap: 1px;
  background: var(--brb-border-on-dark);
  border-top: 1px solid var(--brb-border-on-dark);
  border-bottom: 1px solid var(--brb-border-on-dark);
}

.belief {
  background: var(--brb-anchor);
  padding: clamp(32px, 4vw, 48px) 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
}

@media (max-width: 840px) {
  .belief { grid-template-columns: 1fr; gap: 8px; }
}

.belief__headline {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.15;
  font-style: italic;
  color: var(--brb-text-on-dark);
}

.belief__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
}

/* ============================================================
   About · 05 · Who I Work With (clients block)
   Using .clients prefix to avoid collision with homepage .who
   ============================================================ */
.clients {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--brb-surface);
}

.clients__head {
  margin-bottom: clamp(36px, 4.5vw, 56px);
  max-width: 680px;
}

.clients__title {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-top: 12px;
  max-width: 16ch;
}

.clients__title em { font-style: italic; color: var(--brb-accent); }

.clients__body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--brb-text-muted);
  max-width: 60ch;
  margin-top: 24px;
}

.clients__list {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--brb-border-strong);
  border-top: 1px solid var(--brb-border-strong);
  border-bottom: 1px solid var(--brb-border-strong);
}

@media (max-width: 720px) {
  .clients__list { grid-template-columns: 1fr; }
}

.clients-item {
  background: var(--brb-surface);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.clients-item__name {
  font-family: var(--brb-font-display);
  font-size: 22px;
  line-height: 1.2;
}

.clients-item__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--brb-text-muted);
}

/* ============================================================
   About · 06 · Beyond the Work
   ============================================================ */
.beyond {
  padding: clamp(80px, 11vw, 160px) 0;
  background: var(--brb-surface);
  border-top: 1px solid var(--brb-border);
}

.beyond__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

@media (max-width: 840px) {
  .beyond__grid { grid-template-columns: 1fr; }
}

.beyond__photo {
  aspect-ratio: 4 / 5;
  background: var(--brb-neutral-100);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brb-text-muted);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.beyond__content h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.1;
  margin-top: 16px;
  margin-bottom: 24px;
  max-width: 14ch;
}

.beyond__content h2 em {
  font-style: italic;
  color: var(--brb-accent);
}

.beyond__content p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--brb-text-muted);
  max-width: 52ch;
}

.beyond__content p + p { margin-top: 1.2em; }


/* ============================================================
   ==============================================================
   AUDIT PAGE STYLES (.brb-audit body class)
   These styles support page-audit.php. Reuses existing .hero,
   .site-header, .site-footer, .btn styles from the base theme.
   Adds new sections: .included, .process, .proof, .form-section,
   .faq, .nudge.
   ==============================================================
   ============================================================ */

/* ============================================================
   Audit · Button size modifier
   ============================================================ */
.btn--large {
  font-size: 16px;
  padding: 16px 28px;
}

/* ============================================================
   Audit · Hero additions
   Reuses .hero, .hero__inner, .hero__eyebrow, .hero__headline,
   .hero__subhead, .hero__ctas from the homepage styles.
   Adds italic em accent and secondary note.
   ============================================================ */
.brb-audit .hero__headline em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

.hero__secondary-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--brb-text-on-dark-subtle);
}

.hero__secondary-note a {
  color: var(--brb-text-on-dark);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}

.hero__secondary-note a:hover {
  color: var(--brb-accent);
}

/* ============================================================
   Audit · 02 · What's Included
   ============================================================ */
.included {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--brb-surface);
}

.included__head {
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 700px;
}

.included__title {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-top: 12px;
  max-width: 18ch;
}

.included__title em { font-style: italic; color: var(--brb-accent); }

.included__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--brb-border-strong);
  border-top: 1px solid var(--brb-border-strong);
  border-bottom: 1px solid var(--brb-border-strong);
}

@media (max-width: 720px) {
  .included__grid { grid-template-columns: 1fr; }
}

.included-item {
  background: var(--brb-surface);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.included-item__num {
  font-family: var(--brb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--brb-text-muted);
}

.included-item__title {
  font-size: 26px;
  line-height: 1.15;
}

.included-item__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brb-text-muted);
}

/* ============================================================
   Audit · 03 · Process
   ============================================================ */
.process {
  padding: clamp(80px, 11vw, 160px) 0;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  scroll-margin-top: 80px;
}

.process__head {
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 700px;
}

.process__title {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-top: 12px;
  max-width: 16ch;
}

.process__title em { font-style: italic; color: var(--brb-accent); }

.process__list {
  display: grid;
  gap: 1px;
  background: var(--brb-border-on-dark);
  border-top: 1px solid var(--brb-border-on-dark);
  border-bottom: 1px solid var(--brb-border-on-dark);
}

.process-step {
  background: var(--brb-anchor);
  padding: clamp(28px, 3.5vw, 40px) 0;
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: baseline;
}

@media (max-width: 840px) {
  .process-step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.process-step__num {
  font-family: var(--brb-font-display);
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  color: var(--brb-accent);
  font-weight: 400;
}

.process-step__headline {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
}

.process-step__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
}

/* ============================================================
   Audit · 04 · Proof
   ============================================================ */
.proof {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--brb-surface);
}

.proof__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

@media (max-width: 840px) {
  .proof__grid { grid-template-columns: 1fr; }
}

.proof__metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proof__metric-value {
  font-family: var(--brb-font-display);
  font-size: clamp(72px, 10vw, 140px);
  line-height: 0.95;
  color: var(--brb-accent);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.proof__metric-label {
  font-family: var(--brb-font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
}

.proof__metric-sublabel {
  font-family: var(--brb-font-body);
  font-size: 13px;
  color: var(--brb-text-muted);
  margin-top: 2px;
}

.proof__content h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  margin-bottom: 20px;
  max-width: 18ch;
}

.proof__content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-muted);
  max-width: 52ch;
}

/* ============================================================
   Audit · 05 · Form Section
   ============================================================ */
.form-section {
  padding: clamp(80px, 11vw, 160px) 0;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  scroll-margin-top: 80px;
}

.form-section__head {
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align: center;
}

.form-section__title {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  margin-top: 16px;
  max-width: 16ch;
  margin-inline: auto;
}

.form-section__title em { font-style: italic; color: var(--brb-accent); }

.form-section__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--brb-text-on-dark-muted);
  max-width: 52ch;
  margin: 20px auto 0;
}

.form-container {
  max-width: 680px;
  margin: 0 auto;
  background: #232321;
  border: 1px solid var(--brb-border-on-dark);
  border-radius: 8px;
  padding: clamp(32px, 4vw, 48px);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.form-field label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brb-text-on-dark);
}

.form-field label .required {
  color: var(--brb-accent);
  margin-left: 2px;
}

.form-field input,
.form-field textarea,
.form-field select {
  background: rgba(250,247,242,0.04);
  border: 1px solid var(--brb-border-on-dark-strong);
  color: var(--brb-text-on-dark);
  font-family: var(--brb-font-body);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 6px;
  transition: border-color 200ms var(--brb-ease), background 200ms var(--brb-ease);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brb-accent);
  background: rgba(250,247,242,0.06);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--brb-text-on-dark-subtle);
}

.form-field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--brb-font-body);
}

.form-field__help {
  font-size: 13px;
  color: var(--brb-text-on-dark-subtle);
  line-height: 1.5;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 4px;
  transition: background 150ms var(--brb-ease);
}

.checkbox-option:hover {
  background: rgba(250,247,242,0.04);
}

.checkbox-option input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--brb-accent);
}

.checkbox-option span {
  font-size: 14px;
  color: var(--brb-text-on-dark);
  line-height: 1.5;
}

.form-submit {
  margin-top: 8px;
  width: 100%;
  background: var(--brb-accent);
  color: var(--brb-anchor);
  border: none;
  font-family: var(--brb-font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 16px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 200ms var(--brb-ease);
}

.form-submit:hover {
  background: var(--brb-accent-hover);
}

.form-footnote {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--brb-text-on-dark-subtle);
}

.form-alt {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--brb-border-on-dark);
  text-align: center;
  font-size: 14px;
  color: var(--brb-text-on-dark-muted);
}

.form-alt a {
  color: var(--brb-text-on-dark);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  font-weight: 500;
  transition: color 200ms var(--brb-ease);
}

.form-alt a:hover {
  color: var(--brb-accent);
}

/* ============================================================
   Audit · 06 · FAQ
   ============================================================ */
.faq {
  padding: clamp(80px, 10vw, 140px) 0;
  background: var(--brb-surface);
}

.faq__head {
  margin-bottom: clamp(36px, 4.5vw, 56px);
  max-width: 600px;
}

.faq__title {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-top: 12px;
  max-width: 14ch;
}

.faq__title em { font-style: italic; color: var(--brb-accent); }

.faq__list {
  border-top: 1px solid var(--brb-border-strong);
}

.faq-item {
  border-bottom: 1px solid var(--brb-border-strong);
}

.faq-item__question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 24px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  cursor: pointer;
  font-family: var(--brb-font-display);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  color: var(--brb-text);
  transition: color 200ms var(--brb-ease);
}

.faq-item__question:hover {
  color: var(--brb-accent);
}

.faq-item__icon {
  font-size: 20px;
  color: var(--brb-accent);
  line-height: 1;
  transition: transform 300ms var(--brb-ease);
  flex-shrink: 0;
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms var(--brb-ease);
}

.faq-item.is-open .faq-item__answer {
  max-height: 500px;
}

.faq-item__answer-inner {
  padding: 0 0 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-muted);
  max-width: 60ch;
}

.faq-item__answer a {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}

.faq-item__answer a:hover {
  color: var(--brb-accent);
}

/* ============================================================
   Audit · 07 · Final Nudge
   ============================================================ */
.nudge {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(64px, 8vw, 100px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.nudge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(217,119,6,0.08), transparent 60%);
  pointer-events: none;
}

.nudge__inner { position: relative; }

.nudge__title {
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.15;
  margin-bottom: 16px;
  max-width: 22ch;
  margin-inline: auto;
}

.nudge__title em { font-style: italic; color: var(--brb-accent); }

.nudge__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 48ch;
  margin: 0 auto 28px;
}

.nudge__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--brb-text-on-dark);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 2px;
  font-weight: 500;
  transition: color 200ms var(--brb-ease);
}

.nudge__cta:hover {
  color: var(--brb-accent);
}


/* ============================================================
   ==============================================================
   WORK PAGE STYLES (.brb-work body class)
   Record-collection gallery with interactive sleeves + modal.
   ==============================================================
   ============================================================ */

/* Deep anchor color for wall background */
.brb-work {
  --brb-anchor-deep: #141414;
}

/* ============================================================
   Work · 01 · Hero
   ============================================================ */
.work-hero {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 6vw, 80px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Amber glow upper-right — matches standard hero backgrounds site-wide */
.work-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brb-accent), transparent 100%);
  filter: blur(100px);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

/* Violet counter-orb lower-left — matches standard */
.work-hero::after {
  content: '';
  position: absolute;
  bottom: -45%;
  left: -20%;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, #8B5CF6, transparent 100%);
  filter: blur(100px);
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
}

.work-hero__inner { position: relative; max-width: 900px; }

.work-hero__eyebrow { margin-bottom: clamp(20px, 3vw, 32px); }

.work-hero__headline {
  font-size: clamp(44px, 7.5vw, 112px);
  line-height: 1;
  margin-bottom: clamp(24px, 4vw, 40px);
  letter-spacing: -0.03em;
}

.work-hero__headline em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

.work-hero__subhead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
}

/* ============================================================
   Work · 02 · The Wall
   ============================================================ */
.wall {
  background: var(--brb-anchor-deep);
  padding: clamp(40px, 5vw, 72px) 0 clamp(100px, 12vw, 160px);
  position: relative;
  overflow: hidden;
}

.wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(250, 247, 242, 0.012) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.wall__head {
  position: relative;
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 520px;
}

.wall__label {
  color: var(--brb-text-on-dark-subtle);
  margin-bottom: 10px;
}

.wall__subtitle {
  font-family: var(--brb-font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--brb-text-on-dark-muted);
  line-height: 1.4;
}

.wall__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 3vw, 44px);
}

/* ============================================================
   Sleeve (record)
   ============================================================ */
.sleeve {
  display: block;
  cursor: pointer;
  position: relative;
  transition: transform 500ms var(--brb-ease);
}

.sleeve:nth-child(3n+1) { transform: rotate(-0.7deg); }
.sleeve:nth-child(3n+2) { transform: rotate(0.5deg); }
.sleeve:nth-child(3n+3) { transform: rotate(-0.3deg); }
.sleeve:nth-child(4n+1) { transform: rotate(0.6deg); }
.sleeve:nth-child(5n+3) { transform: rotate(-0.4deg); }
.sleeve:nth-child(7n+2) { transform: rotate(0.3deg); }

.sleeve:hover {
  transform: translateY(-8px) rotate(0deg);
  z-index: 2;
}

.sleeve__frame {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.15),
    0 8px 16px rgba(0,0,0,0.25),
    0 16px 32px rgba(0,0,0,0.15);
  transition: box-shadow 500ms var(--brb-ease);
}

.sleeve:hover .sleeve__frame {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.2),
    0 20px 40px rgba(0,0,0,0.4),
    0 40px 80px rgba(0,0,0,0.3);
}

.sleeve__meta {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.8;
}

.sleeve__title {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: auto;
  font-weight: 400;
}

.sleeve__title em { font-style: italic; }

.sleeve__mark {
  position: absolute;
  transition: transform 700ms var(--brb-ease);
}

.sleeve:hover .sleeve__mark { transform: scale(1.05); }

/* Client logo overlay — injected via JS when sleeveData.logo is set.
   Sits centered on the sleeve frame, replacing the decorative SVG mark
   when present. The :has() selector hides the SVG mark in browsers
   that support it; older browsers show both, with the logo on top.
   max-width + max-height + width:auto / height:auto lets the logo
   scale to fit BOTH dimensions, so tall/narrow logos don't dominate
   the frame the way a fixed width would. */
.sleeve__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 60%;
  max-height: 50%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
  transition: transform 700ms var(--brb-ease);
  z-index: 1;
}

.sleeve:hover .sleeve__logo { transform: translate(-50%, -50%) scale(1.05); }

.sleeve__frame:has(.sleeve__logo) .sleeve__mark { display: none; }

/* Per-logo overrides: AR's logo and Big Blue Bach's logo are
   visually heavier than the others at the universal cap. Trim them
   so the wall reads as a balanced set. */
.sleeve--arac .sleeve__logo { max-width: 45%; max-height: 45%; }
.sleeve--bbb  .sleeve__logo { max-width: 50%; max-height: 45%; }

.sleeve__corner {
  position: absolute;
  bottom: clamp(20px, 2.2vw, 28px);
  right: clamp(20px, 2.2vw, 28px);
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.5;
}

.sleeve__caption {
  margin-top: 16px;
  font-family: var(--brb-font-body);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  line-height: 1.5;
  transition: color 300ms var(--brb-ease);
}

.sleeve__caption strong {
  color: var(--brb-text-on-dark);
  font-weight: 500;
}

.sleeve:hover .sleeve__caption { color: var(--brb-text-on-dark-muted); }
.sleeve:hover .sleeve__caption strong { color: var(--brb-accent); }

/* ============================================================
   Sleeve color variants
   ============================================================ */
.sleeve--venia .sleeve__frame {
  background: linear-gradient(165deg, #0E1A2E 0%, #1B2D47 100%);
  color: #D4A76A;
}
.sleeve--venia .sleeve__title { color: #F5E8D3; }

.sleeve--ccl .sleeve__frame {
  background: #7A1426;
  color: #F5E8D3;
}

.sleeve--dk .sleeve__frame {
  background: linear-gradient(150deg, #C4603E 0%, #A84F32 100%);
  color: #FAF2E3;
}

.sleeve--illuminate .sleeve__frame {
  background: #2F4E6B;
  color: #E8B844;
}
.sleeve--illuminate .sleeve__title { color: #F5E8D3; }

.sleeve--jaspers .sleeve__frame {
  background: #2D4A2B;
  color: #E8D090;
}
.sleeve--jaspers .sleeve__title { color: #F5E8D3; }

.sleeve--ncjr .sleeve__frame {
  background: #D4A12E;
  color: #1A1A1A;
}
.sleeve--ncjr .sleeve__title { color: #1A1A1A; }

.sleeve--boardwalk .sleeve__frame {
  background: linear-gradient(180deg, #1F3840 0%, #2A4A54 100%);
  color: #D4C8A8;
}
.sleeve--boardwalk .sleeve__title { color: #F5E8D3; }

.sleeve--ccfc .sleeve__frame {
  background: #A3BDA8;
  color: #1A3A30;
}
.sleeve--ccfc .sleeve__title { color: #0F2520; }

.sleeve--bbb .sleeve__frame {
  background: #1B3A6B;
  color: #E8C766;
}
.sleeve--bbb .sleeve__title { color: #F5E8D3; }

.sleeve--msp .sleeve__frame {
  background: #0A0A0A;
  color: #D97706;
  border: 1px solid rgba(250, 247, 242, 0.1);
}
.sleeve--msp .sleeve__title { color: #FAF7F2; }

.sleeve--arac .sleeve__frame {
  background: linear-gradient(160deg, #2F4858 0%, #3B5A6F 100%);
  color: #B8C7D2;
}
.sleeve--arac .sleeve__title { color: #F5F1EA; }

.sleeve--mindful .sleeve__frame {
  background: linear-gradient(160deg, #4F6D5C 0%, #6A8775 100%);
  color: #D4DDC8;
}
.sleeve--mindful .sleeve__title { color: #F4EFE3; }

.sleeve--dgi .sleeve__frame {
  background: linear-gradient(160deg, #B8472D 0%, #D86A48 100%);
  color: #F0CFB0;
}
.sleeve--dgi .sleeve__title { color: #F5E8D3; }

/* ============================================================
   Work · Modal
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--brb-ease), visibility 300ms var(--brb-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--brb-surface);
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 4px;
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform 400ms var(--brb-ease-entrance);
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.05);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--brb-text);
  z-index: 2;
  transition: background 200ms var(--brb-ease);
}

.modal__close:hover {
  background: rgba(26, 26, 26, 0.1);
}

.modal__header {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.modal__header-sleeve {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 40px;
}

.modal__header-title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  font-weight: 400;
  text-align: center;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.modal__body {
  padding: clamp(32px, 4vw, 56px);
}

.modal__eyebrow {
  color: var(--brb-accent);
  margin-bottom: 16px;
}

.modal__client {
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15;
  margin-bottom: 24px;
}

.modal__screenshot {
  aspect-ratio: 16 / 10;
  width: 100%;
  margin-bottom: 28px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--brb-neutral-100);
  position: relative;
  border: 1px solid var(--brb-border);
}

.modal__screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal__screenshot-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--brb-font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
}

.modal__screenshot-placeholder-icon {
  font-family: var(--brb-font-display);
  font-style: italic;
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brb-accent);
  margin-bottom: 4px;
}

.modal__meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 28px;
  border-top: 1px solid var(--brb-border);
  border-bottom: 1px solid var(--brb-border);
}

.modal__meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Service badges: each item in the comma-separated services string
   renders as a chip. Splitting happens in JS on ', ' so multi-word
   labels like "DNS / hosting" stay intact. */
.modal__services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.modal__service-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: var(--brb-neutral-100);
  color: var(--brb-text);
  font-family: var(--brb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 4px;
  white-space: nowrap;
}

.modal__meta-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
}

.modal__meta-value {
  font-size: 14px;
  color: var(--brb-text);
  font-weight: 500;
}

.modal__narrative {
  font-size: 17px;
  line-height: 1.75;
  color: var(--brb-text);
  margin-bottom: 28px;
}

.modal__narrative p + p { margin-top: 1.2em; }

.modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 2px;
  transition: color 200ms var(--brb-ease);
}

.modal__cta:hover { color: var(--brb-accent); }

body.has-modal-open { overflow: hidden; }


/* ============================================================
   ==============================================================
   CONTACT PAGE STYLES (.brb-contact body class)
   Reuses .form-field, .form-submit, .form-footnote from audit page.
   Adds: .contact-hero, .methods, .method, .contact-form (wrapper),
   .location, .alt-paths.
   ==============================================================
   ============================================================ */

/* ============================================================
   Contact · 01 · Hero
   ============================================================ */
.contact-hero {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Amber glow upper-right — matches standard hero backgrounds site-wide */
.contact-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brb-accent), transparent 100%);
  filter: blur(100px);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

/* Violet counter-orb lower-left — matches standard */
.contact-hero::after {
  content: '';
  position: absolute;
  bottom: -45%;
  left: -20%;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, #8B5CF6, transparent 100%);
  filter: blur(100px);
  opacity: 0.15;
  pointer-events: none;
  z-index: -1;
}

.contact-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .contact-hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.contact-hero__content {
  max-width: 640px;
}

.contact-hero__portrait {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
}

@media (max-width: 900px) {
  .contact-hero__portrait {
    max-width: 320px;
    margin: 0 auto;
  }
}

.contact-hero__portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}

.contact-hero__portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}

.contact-hero__portrait-accent {
  position: absolute;
  top: 16px;
  left: -16px;
  right: 16px;
  bottom: -16px;
  border: 1px solid var(--brb-accent);
  border-radius: 2px;
  z-index: 1;
  opacity: 0.6;
  transition: top 400ms var(--brb-ease), left 400ms var(--brb-ease),
              right 400ms var(--brb-ease), bottom 400ms var(--brb-ease);
}

.contact-hero__portrait:hover .contact-hero__portrait-accent {
  top: 20px;
  left: -20px;
  right: 20px;
  bottom: -20px;
}

.contact-hero__eyebrow { margin-bottom: clamp(20px, 3vw, 32px); }

.contact-hero__headline {
  font-size: clamp(48px, 8vw, 112px);
  line-height: 1;
  margin-bottom: clamp(24px, 4vw, 40px);
  letter-spacing: -0.03em;
}

.contact-hero__headline em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

.contact-hero__subhead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
}

/* ============================================================
   Contact · 02 · Methods (Phone / Email / Schedule cards)
   ============================================================ */
.methods {
  background: var(--brb-surface);
  padding: clamp(64px, 8vw, 120px) 0;
  position: relative;
  margin-top: -1px;
}

.methods__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brb-border-strong);
  border-top: 1px solid var(--brb-border-strong);
  border-bottom: 1px solid var(--brb-border-strong);
}

@media (max-width: 840px) {
  .methods__grid { grid-template-columns: 1fr; }
}

.method {
  background: var(--brb-surface);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}

.method__label {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brb-text-muted);
}

.method__title {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.15;
}

.method__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.method__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--brb-text-muted);
  flex-grow: 1;
}

.method__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.method__actions--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.method__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--brb-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--brb-border-strong);
  color: var(--brb-text);
  background: transparent;
  transition: all 200ms var(--brb-ease);
  white-space: nowrap;
}

.method__action:hover {
  background: var(--brb-accent);
  color: var(--brb-anchor);
  border-color: var(--brb-accent);
}

.method__action--primary {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border-color: var(--brb-anchor);
}

.method__action--primary:hover {
  background: var(--brb-accent);
  color: var(--brb-anchor);
  border-color: var(--brb-accent);
}

.method__phone-number {
  margin-top: 10px;
  font-family: var(--brb-font-body);
  font-size: 12px;
  color: var(--brb-text-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Contact · 03 · Form (wrapper styles only —
   .form-field / .form-submit / .form-footnote inherited from audit)
   ============================================================ */
.contact-form {
  padding: clamp(80px, 11vw, 160px) 0;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
}

.contact-form__head {
  margin-bottom: clamp(36px, 4.5vw, 56px);
  text-align: center;
}

.contact-form__title {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin-top: 16px;
  max-width: 16ch;
  margin-inline: auto;
}

.contact-form__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.contact-form__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--brb-text-on-dark-muted);
  max-width: 50ch;
  margin: 20px auto 0;
}

.contact-form__container {
  max-width: 680px;
  margin: 0 auto;
  background: #232321;
  border: 1px solid var(--brb-border-on-dark);
  border-radius: 8px;
  padding: clamp(32px, 4vw, 48px);
}

/* Select styling (dropdown) — audit page only had input/textarea, add select */
.brb-contact .form-field select {
  appearance: none;
  background: rgba(250, 247, 242, 0.04);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D97706' stroke-width='1.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  border: 1px solid var(--brb-border-on-dark-strong);
  color: var(--brb-text-on-dark);
  font-family: var(--brb-font-body);
  font-size: 15px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 14px;
  border-radius: 6px;
  transition: border-color 200ms var(--brb-ease), background-color 200ms var(--brb-ease);
  cursor: pointer;
}

.brb-contact .form-field select:focus {
  outline: none;
  border-color: var(--brb-accent);
}

.brb-contact .form-field select option {
  background: #232321;
  color: var(--brb-text-on-dark);
}

/* ============================================================
   Contact · 04 · Location
   ============================================================ */
.location {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--brb-surface);
  text-align: center;
  border-top: 1px solid var(--brb-border);
}

.location__eyebrow { margin-bottom: 16px; }

.location__title {
  font-family: var(--brb-font-display);
  font-style: italic;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.3;
  color: var(--brb-text);
  max-width: 30ch;
  margin: 0 auto 24px;
  font-weight: 400;
}

.location__detail {
  font-family: var(--brb-font-body);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  font-weight: 500;
}

.location__sep {
  display: inline-block;
  margin: 0 10px;
  color: var(--brb-accent);
  opacity: 0.7;
}

/* ============================================================
   Contact · 05 · Alternative Paths
   ============================================================ */
.alt-paths {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative;
  overflow: hidden;
}

.alt-paths::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(217,119,6,0.06), transparent 60%);
  pointer-events: none;
}

.alt-paths__inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.alt-paths__eyebrow { margin-bottom: 16px; }

.alt-paths__title {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.25;
  margin-bottom: clamp(36px, 4vw, 56px);
  max-width: 24ch;
  margin-inline: auto;
}

.alt-paths__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.alt-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brb-border-on-dark-strong);
  border-top: 1px solid var(--brb-border-on-dark-strong);
  border-bottom: 1px solid var(--brb-border-on-dark-strong);
}

@media (max-width: 720px) {
  .alt-paths__grid { grid-template-columns: 1fr; }
}

.alt-path {
  background: var(--brb-anchor);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: background 200ms var(--brb-ease);
}

.alt-path:hover {
  background: #222221;
}

.alt-path__label {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brb-text-on-dark-subtle);
}

.alt-path__title {
  font-family: var(--brb-font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--brb-text-on-dark);
  transition: color 200ms var(--brb-ease);
}

.alt-path__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.alt-path:hover .alt-path__title {
  color: var(--brb-accent);
}


/* ============================================================
   ==============================================================
   FLUENT FORMS OVERRIDES
   Targets Fluent Forms rendered HTML inside .form-container
   (audit page) and .contact-form__container (contact page).
   Overrides FF defaults to match BRB dark form design.
   Uses :is() to apply to both container classes cleanly.
   ==============================================================
   ============================================================ */

/* Strip Fluent Forms wrapper padding/margin */
:is(.form-container, .contact-form__container) .fluentform,
:is(.form-container, .contact-form__container) .ff-el-group {
  margin-bottom: 24px !important;
}

:is(.form-container, .contact-form__container) .ff-el-group:last-of-type {
  margin-bottom: 0 !important;
}

/* Labels */
:is(.form-container, .contact-form__container) .ff-el-input--label label,
:is(.form-container, .contact-form__container) .ff-el-input--label .ff-el-is-required {
  font-family: var(--brb-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--brb-text-on-dark) !important;
  margin-bottom: 8px !important;
}

/* Required asterisk */
:is(.form-container, .contact-form__container) .ff-el-is-required .asterisk-sign,
:is(.form-container, .contact-form__container) .ff-el-is-required.asterisk-sign {
  color: var(--brb-accent) !important;
  margin-left: 2px !important;
}

/* Inputs, textareas, selects */
:is(.form-container, .contact-form__container) .ff-el-form-control,
:is(.form-container, .contact-form__container) input.ff-el-form-control,
:is(.form-container, .contact-form__container) textarea.ff-el-form-control,
:is(.form-container, .contact-form__container) select.ff-el-form-control {
  background: rgba(250, 247, 242, 0.04) !important;
  border: 1px solid var(--brb-border-on-dark-strong) !important;
  color: var(--brb-text-on-dark) !important;
  font-family: var(--brb-font-body) !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  transition: border-color 200ms var(--brb-ease), background 200ms var(--brb-ease) !important;
  width: 100% !important;
}

:is(.form-container, .contact-form__container) .ff-el-form-control:focus,
:is(.form-container, .contact-form__container) input.ff-el-form-control:focus,
:is(.form-container, .contact-form__container) textarea.ff-el-form-control:focus,
:is(.form-container, .contact-form__container) select.ff-el-form-control:focus {
  outline: none !important;
  border-color: var(--brb-accent) !important;
  background: rgba(250, 247, 242, 0.06) !important;
  box-shadow: none !important;
}

:is(.form-container, .contact-form__container) .ff-el-form-control::placeholder {
  color: var(--brb-text-on-dark-subtle) !important;
  opacity: 1 !important;
}

/* Textarea specific */
:is(.form-container, .contact-form__container) textarea.ff-el-form-control {
  min-height: 100px !important;
  resize: vertical !important;
}

/* Select dropdown — custom amber chevron */
:is(.form-container, .contact-form__container) select.ff-el-form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D97706' stroke-width='1.5'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
  cursor: pointer !important;
}

:is(.form-container, .contact-form__container) select.ff-el-form-control option {
  background: #232321 !important;
  color: var(--brb-text-on-dark) !important;
}

/* Checkboxes */
:is(.form-container, .contact-form__container) .ff-el-form-check-label {
  font-family: var(--brb-font-body) !important;
  font-size: 14px !important;
  color: var(--brb-text-on-dark) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
  padding: 8px 10px !important;
  border-radius: 4px !important;
  transition: background 150ms var(--brb-ease) !important;
  margin-bottom: 0 !important;
}

:is(.form-container, .contact-form__container) .ff-el-form-check-label:hover {
  background: rgba(250, 247, 242, 0.04) !important;
}

:is(.form-container, .contact-form__container) .ff-el-form-check-input {
  margin-top: 3px !important;
  accent-color: var(--brb-accent) !important;
  flex-shrink: 0 !important;
}

/* Submit button */
:is(.form-container, .contact-form__container) .ff-btn-submit,
:is(.form-container, .contact-form__container) button[type="submit"].ff-btn {
  width: 100% !important;
  background: var(--brb-accent) !important;
  color: var(--brb-anchor) !important;
  border: none !important;
  font-family: var(--brb-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 16px 24px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 200ms var(--brb-ease) !important;
  box-shadow: none !important;
  margin-top: 8px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:is(.form-container, .contact-form__container) .ff-btn-submit:hover,
:is(.form-container, .contact-form__container) button[type="submit"].ff-btn:hover {
  background: var(--brb-accent-hover) !important;
  color: var(--brb-anchor) !important;
}

/* Error messages */
:is(.form-container, .contact-form__container) .error,
:is(.form-container, .contact-form__container) .ff-el-is-error .ff-el-form-control {
  border-color: #e05252 !important;
}

:is(.form-container, .contact-form__container) .error.text-danger {
  font-size: 12px !important;
  color: #e05252 !important;
  margin-top: 4px !important;
  font-family: var(--brb-font-body) !important;
}

/* Success message */
:is(.form-container, .contact-form__container) .ff-message-success {
  background: rgba(217, 119, 6, 0.1) !important;
  border: 1px solid var(--brb-accent) !important;
  color: var(--brb-text-on-dark) !important;
  padding: 16px 20px !important;
  border-radius: 6px !important;
  font-family: var(--brb-font-body) !important;
  font-size: 15px !important;
}

/* Remove FF loading spinner styles that might conflict */
:is(.form-container, .contact-form__container) .ff-el-progress-bar { display: none !important; }

/* Strip any white backgrounds FF might inject on its own wrappers */
:is(.form-container, .contact-form__container) .ff-default,
:is(.form-container, .contact-form__container) .ff-form-wrap {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}


/* ============================================================
   ==============================================================
   WEB DESIGN PAGE (.brb-web-design)
   Craft-forward editorial layout with scroll reveals,
   CSS-only laptop + phone mockups, and subtle animations.
   ==============================================================
   ============================================================ */

/* ============================================================
   WD · 01 · Hero
   ============================================================ */
.wd-hero {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 10vw, 140px) 0 clamp(72px, 10vw, 140px);
  /* Reserve hero height so font swap / animation entry doesn't shift layout. */
  min-height: clamp(520px, 65vh, 760px);
  isolation: isolate;
}

.wd-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(217, 119, 6, 0.38) 0%, transparent 100%),
    radial-gradient(ellipse at 0% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
}

/* Orb divs kept in DOM for stability but hidden —
   amber glow is now a corner-anchored gradient on .wd-hero__bg */
.wd-hero__orb { display: none; }

.wd-hero__grid {
  /* Grid lines removed — kept the class for DOM stability, but it now renders nothing.
     If you ever want the grid back, restore the previous background-image rules. */
  display: none;
}

.wd-hero__inner {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
}

.wd-hero__eyebrow {
  margin-bottom: clamp(28px, 3vw, 40px);
  opacity: 0;
  animation: wd-fade-in 600ms var(--brb-ease) 200ms forwards;
}

.wd-hero__headline {
  font-size: clamp(44px, 7.5vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-weight: 400;
  text-wrap: pretty;
}

.wd-hero__headline .line {
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}

.wd-hero__headline .line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-hero__headline em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

.wd-hero__headline .dot {
  color: var(--brb-accent);
  font-weight: 700;
}

.wd-hero__sub {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 62ch;
  margin-bottom: clamp(24px, 3vw, 36px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.wd-hero__sub.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.wd-hero__actions.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes wd-fade-in {
  to { opacity: 1; }
}

/* Shared button system for the page */
.wd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--brb-font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 22px;
  border-radius: 8px;
  transition: all 200ms var(--brb-ease);
  cursor: pointer;
  letter-spacing: 0;
}

.wd-btn svg {
  transition: transform 200ms var(--brb-ease);
}

.wd-btn:hover svg {
  transform: translateX(3px);
}

.wd-btn--primary {
  background: var(--brb-accent);
  color: var(--brb-anchor);
  border: 1px solid var(--brb-accent);
}

.wd-btn--primary:hover {
  background: var(--brb-accent-hover);
  border-color: var(--brb-accent-hover);
}

.wd-btn--ghost {
  background: transparent;
  color: var(--brb-text-on-dark);
  border: 1px solid var(--brb-border-on-dark-strong);
}

.wd-btn--ghost:hover {
  border-color: var(--brb-text-on-dark);
  background: rgba(250, 247, 242, 0.04);
}

/* ============================================================
   WD · Free site audit (Trailhead) — Section 02
   The form IS the section. No competing visuals. The hero above
   does the brand work; this is the conversion surface.
   ============================================================ */

.wd-audit {
  background: var(--brb-surface);
  padding: 64px 0 var(--brb-section-pad);
  position: relative;
  border-top: 1px solid var(--brb-border);
}

.wd-audit__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.wd-audit__head {
  margin-bottom: 36px;
}

.wd-audit__head .eyebrow {
  display: inline-block;
  margin-bottom: 20px;
}

.wd-audit__headline {
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--brb-text);
  margin: 0 0 20px;
}

.wd-audit__headline em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-audit__sub {
  font-family: var(--brb-font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--brb-text-muted);
  max-width: 620px;
  margin: 0 auto;
}

.wd-audit__sub strong {
  font-weight: 600;
  color: var(--brb-text);
}

/* Form */
.wd-audit__form {
  margin: 0 auto 32px;
  max-width: 560px;
}

.wd-audit__field {
  display: flex;
  align-items: stretch;
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border-strong);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 200ms var(--brb-ease), box-shadow 200ms var(--brb-ease);
}

.wd-audit__field:focus-within {
  border-color: var(--brb-accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.wd-audit__prefix {
  display: flex;
  align-items: center;
  padding: 0 12px 0 16px;
  font-family: var(--brb-font-body);
  font-size: 16px;
  color: var(--brb-text-subtle);
  user-select: none;
}

.wd-audit__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--brb-font-body);
  font-size: 16px;
  color: var(--brb-text);
  padding: 16px 8px 16px 0;
  outline: 0;
  min-width: 0;
}

.wd-audit__input::placeholder {
  color: var(--brb-text-subtle);
}

.wd-audit__submit {
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0 22px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wd-audit__submit svg {
  flex-shrink: 0;
}

.wd-audit__turnstile {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  min-height: 65px;
}

.wd-audit__turnstile:empty {
  display: none;
}

.wd-audit__inline-error {
  margin: 12px 0 0;
  font-family: var(--brb-font-body);
  font-size: 14px;
  color: #B23A48;
  text-align: center;
}

/* Loading panel — replaces the form during a real audit */
.wd-audit__loading {
  margin: 0 auto 32px;
  max-width: 560px;
  padding: 28px 20px;
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border);
  border-radius: 10px;
  text-align: center;
}

.wd-audit__spinner {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 14px;
}

.wd-audit__spinner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brb-accent);
  animation: wd-audit-pulse 1.2s var(--brb-ease) infinite;
}

.wd-audit__spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.wd-audit__spinner-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes wd-audit-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1);    }
}

.wd-audit__loading-text {
  font-family: var(--brb-font-body);
  font-size: 15px;
  color: var(--brb-text-muted);
  margin: 0;
  transition: opacity 250ms var(--brb-ease);
}

/* Bot-protection blocked panel */
.wd-audit__blocked {
  margin: 0 auto 32px;
  max-width: 560px;
  padding: 24px;
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border);
  border-radius: 10px;
  text-align: center;
}

.wd-audit__blocked-title {
  font-family: var(--brb-font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0 0 8px;
}

.wd-audit__blocked-text {
  font-family: var(--brb-font-body);
  font-size: 15px;
  color: var(--brb-text-muted);
  margin: 0;
}

.wd-audit__blocked-text a {
  color: var(--brb-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* What I check preview */
.wd-audit__preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: left;
}

.wd-audit__preview-col {
  padding: 20px;
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border);
  border-radius: 8px;
}

.wd-audit__preview-icon {
  color: var(--brb-accent);
  margin-bottom: 12px;
}

.wd-audit__preview-label {
  font-family: var(--brb-font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0 0 8px;
}

.wd-audit__preview-desc {
  font-family: var(--brb-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--brb-text-muted);
  margin: 0;
}

.wd-audit__trust {
  font-family: var(--brb-font-body);
  font-size: 13px;
  color: var(--brb-text-subtle);
  margin: 0;
  letter-spacing: 0.02em;
}

.wd-audit__trust-sep {
  color: var(--brb-neutral-300);
  margin: 0 6px;
}

/* Mobile */
@media (max-width: 700px) {
  .wd-audit__field {
    flex-direction: column;
    border-radius: 12px;
  }

  .wd-audit__prefix {
    display: none;
  }

  .wd-audit__input {
    padding: 16px 16px 14px;
    text-align: center;
    border-bottom: 1px solid var(--brb-border);
  }

  .wd-audit__input::placeholder {
    text-align: center;
  }

  .wd-audit__submit {
    padding: 14px;
    justify-content: center;
    border-radius: 0;
  }

  .wd-audit__preview {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wd-audit__trust {
    font-size: 12px;
  }

  .wd-audit__trust-sep {
    display: block;
    margin: 4px 0;
    height: 0;
    overflow: hidden;
  }
}

/* ============================================================
   WD · 02 · Craft Philosophy
   ============================================================ */
.wd-craft {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  position: relative;
}

.wd-craft__inner {
  max-width: 760px;
  margin: 0 auto;
}

.wd-craft .eyebrow {
  margin-bottom: 28px;
  display: inline-block;
}

.wd-craft__title {
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.35;
  color: var(--brb-text);
  margin-bottom: 32px;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.wd-craft__title em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

/* Word-by-word reveal */
.reveal-words {
  --reveal-delay: 0ms;
}

.reveal-words > em,
.reveal-words {
  opacity: 1;
}

/* Fade the whole paragraph up smoothly instead of per-word
   to keep it performant and not distracting */
.reveal-words {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance), transform 1000ms var(--brb-ease-entrance);
}

.reveal-words.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-craft__body {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.75;
  color: var(--brb-text-muted);
  max-width: 58ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms var(--brb-ease) 200ms, transform 800ms var(--brb-ease) 200ms;
}

.wd-craft__body.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   WD · 03 · Platform Stack
   ============================================================ */
.wd-stack {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-top: 1px solid var(--brb-border);
}

.wd-stack__head {
  max-width: 720px;
  margin-bottom: clamp(56px, 6vw, 80px);
}

.wd-stack__head .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.wd-stack__title {
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  font-weight: 400;
}

.wd-stack__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-stack__sub {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--brb-text-muted);
  max-width: 62ch;
}

.wd-stack__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1px;
  background: var(--brb-border-strong);
  border-top: 1px solid var(--brb-border-strong);
  border-bottom: 1px solid var(--brb-border-strong);
}

@media (max-width: 900px) {
  .wd-stack__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .wd-stack__grid { grid-template-columns: 1fr; }
}

.wd-platform {
  background: var(--brb-surface);
  padding: clamp(32px, 4vw, 48px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.wd-platform.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-platform--lead {
  /* grid-column / grid-row removed in v1.34.7 — these were designed
     for the legacy 4-up grid (1.5fr 1fr 1fr 1fr) where the lead
     occupied a tall column on the left while cards 2/3/4 filled
     the row 1 cells of the right 3 columns. The row 2 cells were
     empty, so the lead's height matched a single content row.
     After v1.34.4 collapsed the grid to 2-up, the row-span forced
     the lead to ~820px (the height of two stacked cells), leaving
     ~540px of empty dark space below its content. Now the lead is
     a normal grid cell that sizes to its content; visual weight
     comes from the dark background, the ::after gradient, the
     larger __name typography, and (when present) the WordPress
     pill — all preserved. */
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  position: relative;
}

.wd-platform--lead::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  height: 60%;
  background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.12), transparent 70%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .wd-platform--lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.wd-platform__num {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brb-text-muted);
  margin-bottom: 20px;
}

.wd-platform--lead .wd-platform__num {
  color: var(--brb-text-on-dark-subtle);
}

.wd-platform__name {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.wd-platform--lead .wd-platform__name {
  font-size: clamp(32px, 3.8vw, 48px);
}

.wd-platform__tag {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--brb-accent);
  color: var(--brb-anchor);
  padding: 3px 10px;
  border-radius: 100px;
  position: relative;
  top: -4px;
}

.wd-platform__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brb-text-muted);
}

.wd-platform--lead .wd-platform__body {
  color: var(--brb-text-on-dark-muted);
  font-size: 16px;
}

/* ============================================================
   WD · 04 · Device Mockup Showcase
   ============================================================ */
.wd-showcase {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(96px, 12vw, 160px) 0 clamp(120px, 15vw, 200px);
  position: relative;
  overflow: hidden;
}

.wd-showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(217, 119, 6, 0.06), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.04), transparent 50%);
  pointer-events: none;
}

.wd-showcase__head {
  position: relative;
  max-width: 760px;
  margin-bottom: clamp(56px, 7vw, 96px);
}

.wd-showcase__head .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.wd-showcase__title {
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.wd-showcase__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-showcase__stage {
  position: relative;
  height: clamp(420px, 55vw, 620px);
  max-width: 960px;
  margin: 0 auto;
}

/* Laptop mockup */
.wd-mock--laptop {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 75%;
  z-index: 1;
  opacity: 0;
  transition: opacity 1200ms var(--brb-ease-entrance), transform 1200ms var(--brb-ease-entrance);
}

.wd-mock--laptop.is-visible {
  opacity: 1;
  transform: translateY(-50%) rotateY(-2deg);
  animation: wd-laptop-idle 8s ease-in-out infinite;
}

@keyframes wd-laptop-idle {
  0%, 100% { transform: translateY(-50%) rotateY(-2deg) translateX(0); }
  50%      { transform: translateY(calc(-50% - 6px)) rotateY(-2deg) translateX(-4px); }
}

.wd-mock__frame {
  background: #2A2A28;
  border-radius: 14px 14px 4px 4px;
  padding: 14px 14px 20px;
  position: relative;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 20px 40px -10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

.wd-mock__notch {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #1A1A1A;
  border-radius: 0 0 6px 6px;
}

.wd-mock__screen {
  background: var(--brb-surface);
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.wd-mock__browser {
  background: #E8E5DF;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.wd-mock__dots {
  display: flex;
  gap: 6px;
}

.wd-mock__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C8C4BA;
}

.wd-mock__dots span:first-child { background: #E87C7C; }
.wd-mock__dots span:nth-child(2) { background: #E8C36A; }
.wd-mock__dots span:last-child { background: #86C580; }

.wd-mock__url {
  font-family: var(--brb-font-body);
  font-size: 10px;
  color: var(--brb-text-muted);
  background: var(--brb-surface);
  padding: 4px 12px;
  border-radius: 4px;
  flex-grow: 1;
  text-align: center;
  letter-spacing: 0.02em;
}

.wd-mock__content {
  padding: 6% 8%;
  background: var(--brb-surface);
  height: calc(100% - 34px);
  display: flex;
  flex-direction: column;
  gap: 6%;
}

.wd-mock__hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wd-mock__hero-badge {
  width: 80px;
  height: 8px;
  background: var(--brb-accent);
  border-radius: 2px;
  opacity: 0.7;
}

.wd-mock__hero-line {
  height: 16px;
  background: var(--brb-anchor);
  border-radius: 3px;
  margin-top: 4px;
}

.wd-mock__hero-line--long { width: 92%; }
.wd-mock__hero-line--medium { width: 68%; }

.wd-mock__hero-sub {
  height: 6px;
  background: var(--brb-text-muted);
  opacity: 0.3;
  border-radius: 2px;
  width: 75%;
  margin-top: 14px;
}

.wd-mock__hero-buttons {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.wd-mock__btn {
  height: 18px;
  width: 70px;
  border-radius: 4px;
}

.wd-mock__btn--primary { background: var(--brb-accent); }
.wd-mock__btn--ghost {
  background: transparent;
  border: 1px solid var(--brb-anchor);
}

.wd-mock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
}

.wd-mock__card {
  aspect-ratio: 3 / 2;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 4px;
  position: relative;
}

.wd-mock__card::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 12%;
  width: 60%;
  height: 6px;
  background: var(--brb-anchor);
  opacity: 0.5;
  border-radius: 2px;
}

.wd-mock__card::after {
  content: '';
  position: absolute;
  top: 48%;
  left: 12%;
  width: 40%;
  height: 4px;
  background: var(--brb-accent);
  border-radius: 2px;
}

.wd-mock__base {
  height: 8px;
  background: linear-gradient(to bottom, #2A2A28, #1A1A1A);
  margin-top: -4px;
  width: 110%;
  margin-left: -5%;
  border-radius: 0 0 8px 8px;
  position: relative;
}

.wd-mock__base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16%;
  height: 100%;
  background: #000;
  border-radius: 0 0 6px 6px;
}

.wd-mock__shadow {
  height: 50px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4), transparent 70%);
  margin-top: -20px;
  filter: blur(15px);
  opacity: 0.5;
}

/* Phone mockup */
.wd-mock--phone {
  position: absolute;
  right: 2%;
  top: 8%;
  width: 28%;
  max-width: 220px;
  z-index: 2;
  opacity: 0;
  transition: opacity 1200ms var(--brb-ease-entrance) 300ms, transform 1200ms var(--brb-ease-entrance) 300ms;
}

.wd-mock--phone.is-visible {
  opacity: 1;
  transform: rotate(6deg);
  animation: wd-phone-idle 9s ease-in-out infinite 1s;
}

@keyframes wd-phone-idle {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-10px); }
}

.wd-mock__phone-frame {
  background: #1A1A1A;
  border: 3px solid #2A2A28;
  border-radius: 28px;
  padding: 10px;
  box-shadow:
    0 30px 60px -10px rgba(0, 0, 0, 0.6),
    0 15px 30px -5px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
  aspect-ratio: 9 / 19;
}

.wd-mock__phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 18px;
  background: #000;
  border-radius: 12px;
  z-index: 2;
}

.wd-mock__phone-screen {
  background: var(--brb-surface);
  border-radius: 20px;
  height: 100%;
  overflow: hidden;
  position: relative;
  padding: 28px 12px 12px;
}

.wd-mock__phone-status {
  height: 3px;
  background: var(--brb-anchor);
  border-radius: 2px;
  width: 50px;
  margin: 0 auto 12px;
  opacity: 0.3;
}

.wd-mock__phone-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
}

.wd-mock__phone-heading {
  height: 14px;
  background: var(--brb-anchor);
  border-radius: 3px;
  width: 80%;
}

.wd-mock__phone-line {
  height: 5px;
  background: var(--brb-text-muted);
  opacity: 0.25;
  border-radius: 2px;
  width: 95%;
}

.wd-mock__phone-line--short { width: 70%; }

.wd-mock__phone-btn {
  height: 22px;
  background: var(--brb-accent);
  border-radius: 4px;
  width: 100%;
  margin-top: 6px;
}

.wd-mock__phone-card {
  aspect-ratio: 5 / 3;
  background: rgba(26, 26, 26, 0.06);
  border-radius: 4px;
  margin-top: 8px;
  position: relative;
}

.wd-mock__phone-card::before {
  content: '';
  position: absolute;
  top: 40%;
  left: 10%;
  right: 40%;
  height: 4px;
  background: var(--brb-anchor);
  opacity: 0.5;
  border-radius: 2px;
}

.wd-mock__phone-card--alt::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 10%;
  width: 30%;
  height: 8px;
  background: var(--brb-accent);
  border-radius: 3px;
}

/* ============================================================
   WD · 05 · Industries
   ============================================================ */
.wd-industries {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
}

.wd-industries__head {
  max-width: 720px;
  margin-bottom: clamp(56px, 6vw, 80px);
}

.wd-industries__head .eyebrow { margin-bottom: 20px; display: inline-block; }

.wd-industries__title {
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  font-weight: 400;
}

.wd-industries__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-industries__sub {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--brb-text-muted);
  max-width: 62ch;
}

.wd-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brb-border-strong);
  border-top: 1px solid var(--brb-border-strong);
  border-bottom: 1px solid var(--brb-border-strong);
}

@media (max-width: 900px) {
  .wd-industries__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wd-industries__grid { grid-template-columns: 1fr; }
}

.wd-industry {
  background: var(--brb-surface);
  padding: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.wd-industry.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-industry__label {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brb-text-muted);
}

.wd-industry__title {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brb-text);
}

.wd-industry__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-industry__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--brb-text-muted);
}

/* (Note: legacy dark-design .wd-principles block removed in 1.28.19.
   The cream-design rule near the bottom of this file is now the only
   .wd-principles definition. Service-page templates use the
   .wd-principles__grid + .principle markup pattern.) */

/* ============================================================
   WD · 07 · Proof
   ============================================================ */
.wd-proof {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-bottom: 1px solid var(--brb-border);
}

.wd-proof__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
}

.wd-proof__item {
  flex: 1;
  min-width: 140px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.wd-proof__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-proof__item:nth-child(3) { transition-delay: 100ms; }
.wd-proof__item:nth-child(5) { transition-delay: 200ms; }
.wd-proof__item:nth-child(7) { transition-delay: 300ms; }

.wd-proof__value {
  font-family: var(--brb-font-display);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brb-text);
  margin-bottom: 8px;
}

.wd-proof__value .wd-proof__sub {
  color: var(--brb-accent);
  font-weight: 400;
  font-style: italic;
  margin-left: 2px;
}

.wd-proof__word {
  font-style: italic;
  color: var(--brb-text);
}

.wd-proof__label {
  font-family: var(--brb-font-body);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  font-weight: 500;
}

.wd-proof__divider {
  width: 1px;
  height: 60px;
  background: var(--brb-border);
}

@media (max-width: 720px) {
  .wd-proof__divider { display: none; }
  .wd-proof__item { min-width: 45%; }
}

/* ============================================================
   WD · 08 · Final CTA
   ============================================================ */
.wd-final {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(96px, 12vw, 160px) 0;
  position: relative;
  overflow: hidden;
}

.wd-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(217, 119, 6, 0.08), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.05), transparent 50%);
  pointer-events: none;
}

.wd-final__inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.wd-final__inner.is-visible {
  /* preserved for any legacy pages that do add .reveal to the inner */
}

.wd-final__inner .eyebrow {
  margin-bottom: 24px;
  display: inline-block;
}

.wd-final__title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  font-weight: 400;
}

.wd-final__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-final__body {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  max-width: 54ch;
  margin: 0 auto 40px;
}

.wd-final__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   WD · Mini Client Showcase strip (.wd-clients)
   Supportive trust strip on /website-design only — between
   .wd-dashboard and .wd-showcase. Logos render desaturated at
   rest, restore color on hover. All logos link to /work.
   ============================================================ */
.wd-clients {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-top: 1px solid var(--brb-border);
}

.wd-clients__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.wd-clients__head .eyebrow {
  margin-bottom: 12px;
  display: inline-block;
}

.wd-clients__sub {
  font-family: var(--brb-font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.4;
  color: var(--brb-text-muted);
  margin: 0;
}

.wd-clients__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 36px) clamp(24px, 3.5vw, 48px);
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 600px) {
  .wd-clients__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 880px) {
  .wd-clients__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wd-clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wd-clients__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: transform 200ms var(--brb-ease), box-shadow 200ms var(--brb-ease);
}

.wd-clients__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.06);
}

.wd-clients__logo {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 200ms var(--brb-ease);
}

.wd-clients__link:hover .wd-clients__logo {
  filter: grayscale(0%) opacity(1);
}

.wd-clients__cta-wrap {
  text-align: center;
  margin-top: clamp(40px, 5vw, 64px);
}

.wd-clients__cta {
  font-family: var(--brb-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brb-text);
  text-decoration: none;
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 2px;
  transition: color 200ms var(--brb-ease), border-color 200ms var(--brb-ease);
}

.wd-clients__cta:hover {
  color: var(--brb-accent);
}

/* ============================================================
   ==============================================================
   WD · Dashboard Mockup Section (.wd-dashboard)
   Reinforces "Measurable from day one" principle with a
   CSS+SVG stylized analytics dashboard. Brand-colored.
   ==============================================================
   ============================================================ */

.wd-dashboard {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-top: 1px solid var(--brb-border);
  position: relative;
  overflow: hidden;
}

.wd-dashboard::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse at center right, rgba(217, 119, 6, 0.04), transparent 60%);
  pointer-events: none;
}

.wd-dashboard__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  position: relative;
}

@media (max-width: 900px) {
  .wd-dashboard__grid {
    grid-template-columns: 1fr;
  }
}

/* Copy column */
.wd-dashboard__copy {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}

.wd-dashboard__copy.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-dashboard__copy .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.wd-dashboard__title {
  font-family: var(--brb-font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  font-weight: 400;
  max-width: 18ch;
}

.wd-dashboard__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-dashboard__body {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.7;
  color: var(--brb-text-muted);
  max-width: 48ch;
}

/* Dashboard viz column */
.wd-dashboard__viz {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1200ms var(--brb-ease-entrance) 200ms, transform 1200ms var(--brb-ease-entrance) 200ms;
}

.wd-dashboard__viz.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The actual dashboard window */
.wd-dash {
  background: var(--brb-anchor);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(26, 26, 26, 0.25),
    0 20px 40px -10px rgba(26, 26, 26, 0.15),
    0 0 0 1px rgba(26, 26, 26, 0.08);
  position: relative;
  animation: wd-dash-idle 10s ease-in-out infinite;
}

@keyframes wd-dash-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Header */
.wd-dash__head {
  background: #232321;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(250, 247, 242, 0.05);
}

.wd-dash__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wd-dash__dot {
  width: 8px;
  height: 8px;
  background: var(--brb-accent);
  border-radius: 50%;
  animation: wd-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5);
}

@keyframes wd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
}

.wd-dash__name {
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brb-text-on-dark-muted);
}

.wd-dash__tabs {
  display: flex;
  gap: 16px;
}

.wd-dash__tab {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brb-text-on-dark-subtle);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--brb-ease);
}

.wd-dash__tab--active {
  color: var(--brb-text-on-dark);
  border-bottom-color: var(--brb-accent);
}

/* Body */
.wd-dash__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Stats row */
.wd-dash__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.wd-dash__stat {
  background: rgba(250, 247, 242, 0.03);
  border: 1px solid rgba(250, 247, 242, 0.06);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wd-dash__stat-label {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
}

.wd-dash__stat-value {
  font-family: var(--brb-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.wd-dash__stat-delta {
  font-family: var(--brb-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.wd-dash__stat-delta--up {
  color: #7ACC8F;
}

/* Chart */
.wd-dash__chart {
  height: 120px;
  position: relative;
  padding: 12px 0;
}

.wd-dash__chart-grid {
  position: absolute;
  inset: 12px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wd-dash__chart-grid span {
  height: 1px;
  background: rgba(250, 247, 242, 0.05);
}

.wd-dash__chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wd-dash__chart-area {
  fill: url(#wd-chart-gradient);
  fill: rgba(217, 119, 6, 0.15);
  opacity: 0;
  animation: wd-chart-area-in 1600ms var(--brb-ease-entrance) 600ms forwards;
}

@keyframes wd-chart-area-in {
  to { opacity: 1; }
}

.wd-dash__chart-line {
  fill: none;
  stroke: var(--brb-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: wd-chart-draw 2000ms var(--brb-ease-entrance) 400ms forwards;
}

@keyframes wd-chart-draw {
  to { stroke-dashoffset: 0; }
}

.wd-dash__chart-dot {
  fill: var(--brb-accent);
  opacity: 0;
  animation: wd-dot-in 400ms var(--brb-ease) forwards;
}

.wd-dash__chart-dot:nth-of-type(1) { animation-delay: 1400ms; }
.wd-dash__chart-dot:nth-of-type(2) { animation-delay: 1700ms; }
.wd-dash__chart-dot:nth-of-type(3) { animation-delay: 2000ms; }
.wd-dash__chart-dot--last {
  animation-delay: 2300ms;
}

.wd-dash__chart-dot--last {
  fill: var(--brb-accent);
  filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.8));
}

@keyframes wd-dot-in {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* Sources block */
.wd-dash__sources {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(250, 247, 242, 0.05);
}

.wd-dash__source-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.wd-dash__source-label {
  font-family: var(--brb-font-body);
  font-size: 11px;
  color: var(--brb-text-on-dark-muted);
}

.wd-dash__source-pct {
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--brb-text-on-dark);
}

.wd-dash__bar {
  height: 4px;
  background: rgba(250, 247, 242, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.wd-dash__bar-fill {
  height: 100%;
  background: var(--brb-accent);
  border-radius: 2px;
  width: 0 !important;
  animation: wd-bar-fill 1400ms var(--brb-ease-entrance) forwards;
}

.wd-dashboard__viz.is-visible .wd-dash__source:nth-child(1) .wd-dash__bar-fill { animation-delay: 800ms; --target-width: 42%; }
.wd-dashboard__viz.is-visible .wd-dash__source:nth-child(2) .wd-dash__bar-fill { animation-delay: 900ms; --target-width: 31%; }
.wd-dashboard__viz.is-visible .wd-dash__source:nth-child(3) .wd-dash__bar-fill { animation-delay: 1000ms; --target-width: 18%; }
.wd-dashboard__viz.is-visible .wd-dash__source:nth-child(4) .wd-dash__bar-fill { animation-delay: 1100ms; --target-width: 9%; }

@keyframes wd-bar-fill {
  to { width: var(--target-width, 50%) !important; }
}

/* Floating notification bubble */
.wd-dash__notif {
  position: absolute;
  top: -16px;
  right: -20px;
  background: var(--brb-surface);
  border: 1px solid var(--brb-border);
  border-radius: 100px;
  padding: 8px 14px 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--brb-text);
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px -5px rgba(26, 26, 26, 0.15);
  opacity: 0;
  transform: translate(8px, -8px) scale(0.9);
  animation: wd-notif-in 600ms var(--brb-ease-entrance) 2400ms forwards,
             wd-notif-float 6s ease-in-out 3000ms infinite;
}

@keyframes wd-notif-in {
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes wd-notif-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(0, -4px) scale(1); }
}

.wd-dash__notif-dot {
  width: 8px;
  height: 8px;
  background: #7ACC8F;
  border-radius: 50%;
  animation: wd-pulse-green 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(122, 204, 143, 0.5);
}

@keyframes wd-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 204, 143, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(122, 204, 143, 0); }
}

.wd-dash__notif-text { white-space: nowrap; }

@media (max-width: 900px) {
  .wd-dash__notif { right: -10px; top: -12px; }
}

/* ============================================================
   Extra polish: subtle hover lifts + underline growth on industries,
   + gentle hover lift on platform cards
   ============================================================ */

.wd-industry {
  position: relative;
  cursor: default;
}

.wd-industry::after {
  content: '';
  position: absolute;
  left: clamp(32px, 4vw, 48px);
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--brb-accent);
  transition: width 500ms var(--brb-ease);
}

.wd-industry:hover::after {
  width: 48px;
}

/* Hub-link variant of an industry cell — clickable, with amber-underlined
   accent text + arrow on the body to signal interactivity. */
.wd-industry--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 250ms var(--brb-ease);
  display: block;
}
.wd-industry--link:hover {
  transform: translateY(-2px);
}
.wd-industry--link:hover::after {
  width: 64px;
}
.wd-industry__link-text {
  border-bottom: 1px solid var(--brb-accent);
  transition: color 200ms var(--brb-ease);
}
.wd-industry--link:hover .wd-industry__link-text {
  color: var(--brb-accent);
}

/* "See all industries →" CTA below the wd-industries grid */
.wd-industries__cta-wrap {
  margin-top: clamp(28px, 3vw, 40px);
  text-align: center;
}
.wd-industries__cta {
  font-family: var(--brb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}
.wd-industries__cta:hover {
  color: var(--brb-accent);
}

/* Dark-context variant — SEO + paid-advertising sections use --brb-anchor bg */
.wd-industries:has(.industry-item) .wd-industries__cta {
  color: var(--brb-text-on-dark);
}

/* "{Service} in {city} · {Service} in {city}" cities row below "See all industries" */
.wd-industries__cities {
  margin-top: clamp(10px, 1.2vw, 14px);
  text-align: center;
  font-family: var(--brb-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--brb-text-muted);
}
.wd-industries__cities a {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}
.wd-industries__cities a:hover {
  color: var(--brb-accent);
}

/* Dark-context variant — SEO + paid-advertising sections use --brb-anchor bg */
.wd-industries:has(.industry-item) .wd-industries__cities {
  color: var(--brb-text-on-dark-muted);
}
.wd-industries:has(.industry-item) .wd-industries__cities a {
  color: var(--brb-text-on-dark);
}

/* "See all reviews →" CTA below the homepage reviews grid */
.reviews__cta-wrap {
  margin-top: clamp(32px, 4vw, 48px);
  text-align: center;
}
.reviews__cta {
  font-family: var(--brb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}
.reviews__cta:hover {
  color: var(--brb-accent);
}

.wd-platform {
  transition: opacity 700ms var(--brb-ease),
              transform 700ms var(--brb-ease),
              background 300ms var(--brb-ease);
  cursor: default;
}

.wd-platform:not(.wd-platform--lead):hover {
  background: #F4F1EB;
}

/* Nudge the mockup's primary button with a soft pulse */
.wd-mock__btn--primary {
  animation: wd-btn-pulse 3s ease-in-out infinite;
}

@keyframes wd-btn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}


/* ============================================================
   ==============================================================
   HOMEPAGE ENHANCEMENTS
   — Hero animated background (orbs + grid)
   — Hero line-by-line assembly
   — Trust strip under hero
   — Mini mockups for service cards (browser/SERP/display ad)
   — Dashboard mockup in flagship section
   — Count-up styling for inline hero counter
   ==============================================================
   ============================================================ */

/* ============================================================
   Hero — animated background
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(217, 119, 6, 0.38) 0%, transparent 100%),
    radial-gradient(ellipse at 0% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
}

/* Orb divs kept in DOM for stability but hidden —
   amber glow is now a corner-anchored gradient on .hero__bg */
.hero__orb { display: none; }

.hero__grid {
  /* Grid lines removed — kept the class for DOM stability, but it now renders nothing.
     If you ever want the grid back, restore the previous background-image rules. */
  display: none;
}

/* Hero headline line-by-line assembly */
.hero__headline .line {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}

.hero__headline .line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__headline em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

/* Inline hero metric styling */
.hero__inline-metric {
  color: var(--brb-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Trust Strip — between hero and services
   ============================================================ */
.trust-strip {
  background: var(--brb-surface);
  border-top: 1px solid var(--brb-border);
  border-bottom: 1px solid var(--brb-border);
  padding: 20px 0;
  position: relative;
}

.trust-strip__link {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  text-decoration: none;
  color: inherit;
  padding: 8px 0;
  transition: opacity 200ms var(--brb-ease);
}

.trust-strip__link:hover {
  opacity: 0.85;
}

.trust-strip__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--brb-border);
  background: var(--brb-neutral-200);
}

.trust-strip__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trust-strip__copy {
  flex-grow: 1;
  min-width: 0;
}

.trust-strip__name {
  font-family: var(--brb-font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--brb-text);
}

.trust-strip__dot {
  color: var(--brb-accent);
  font-weight: 700;
}

.trust-strip__detail {
  font-family: var(--brb-font-body);
  font-size: clamp(12px, 1.1vw, 13px);
  color: var(--brb-text-muted);
  letter-spacing: 0.02em;
  margin-top: 3px;
  line-height: 1.5;
}

.trust-strip__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--brb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brb-accent);
  flex-shrink: 0;
  transition: gap 200ms var(--brb-ease);
}

.trust-strip__link:hover .trust-strip__cta {
  gap: 10px;
}

@media (max-width: 600px) {
  .trust-strip__cta {
    display: none;
  }
  .trust-strip__detail {
    line-height: 1.4;
  }
}

/* ============================================================
   Mini Mockups — inside service cards
   Shared base
   ============================================================ */
.mini-mock {
  position: relative;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
  background: var(--brb-anchor);
  border: 1px solid var(--brb-border);
  transition: transform 400ms var(--brb-ease), box-shadow 400ms var(--brb-ease);
  pointer-events: none;
}

.service-card:hover .mini-mock {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(26, 26, 26, 0.2);
}

/* ============================================================
   Mini Mockup · Browser (Web Design card)
   ============================================================ */
.mini-mock--browser {
  background: var(--brb-surface);
  border-color: rgba(26, 26, 26, 0.1);
}

.mini-browser__bar {
  background: #E8E5DF;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mini-browser__dots {
  display: flex;
  gap: 4px;
}

.mini-browser__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C8C4BA;
}
.mini-browser__dots span:first-child { background: #E87C7C; }
.mini-browser__dots span:nth-child(2) { background: #E8C36A; }
.mini-browser__dots span:last-child { background: #86C580; }

.mini-browser__url {
  font-family: var(--brb-font-body);
  font-size: 9px;
  color: var(--brb-text-muted);
  background: var(--brb-surface);
  padding: 3px 10px;
  border-radius: 3px;
  flex-grow: 1;
  text-align: center;
  letter-spacing: 0.02em;
}

.mini-browser__content {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: calc(100% - 30px);
  background: var(--brb-surface);
}

.mini-browser__logo {
  width: 50px;
  height: 6px;
  background: var(--brb-accent);
  border-radius: 2px;
  opacity: 0.8;
  margin-bottom: 4px;
}

.mini-browser__line {
  height: 8px;
  background: var(--brb-anchor);
  border-radius: 2px;
}
.mini-browser__line--long { width: 80%; }
.mini-browser__line--med  { width: 55%; }

.mini-browser__buttons {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.mini-browser__btn {
  height: 14px;
  width: 46px;
  border-radius: 3px;
}

.mini-browser__btn--primary {
  background: var(--brb-accent);
}

.mini-browser__btn--ghost {
  background: transparent;
  border: 1px solid var(--brb-anchor);
}

/* Subtle hover pulse on browser URL */
.service-card:hover .mini-browser__url {
  animation: mini-url-pulse 1.8s ease-in-out infinite;
}

@keyframes mini-url-pulse {
  0%, 100% { background: var(--brb-surface); }
  50%      { background: #FFFDF8; }
}

/* ============================================================
   Mini Mockup · SERP (SEO card)
   ============================================================ */
.mini-mock--serp {
  background: var(--brb-surface);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-color: rgba(26, 26, 26, 0.1);
}

.mini-serp__search {
  background: white;
  border: 1px solid #D5D1C8;
  border-radius: 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brb-font-body);
  font-size: 10px;
  color: var(--brb-text);
  position: relative;
}

.mini-serp__icon {
  color: var(--brb-text-muted);
  flex-shrink: 0;
}

.mini-serp__query {
  letter-spacing: 0.01em;
}

.mini-serp__cursor {
  display: inline-block;
  width: 1px;
  height: 10px;
  background: var(--brb-accent);
  animation: mini-cursor-blink 1s steps(2) infinite;
}

@keyframes mini-cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.mini-serp__result {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 0 6px 4px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.mini-serp__result:last-child {
  border-bottom: none;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.mini-serp__tag {
  font-family: var(--brb-font-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
}

.mini-serp__site {
  font-family: var(--brb-font-body);
  font-size: 9px;
  color: var(--brb-text);
  letter-spacing: 0.01em;
}

.mini-serp__title {
  height: 6px;
  width: 60%;
  background: var(--brb-anchor);
  border-radius: 2px;
}

.mini-serp__snippet {
  height: 4px;
  width: 88%;
  background: var(--brb-text-muted);
  opacity: 0.3;
  border-radius: 2px;
}

.mini-serp__stars {
  font-family: var(--brb-font-display);
  font-size: 11px;
  color: var(--brb-accent);
  letter-spacing: 1px;
  line-height: 1;
}

.mini-serp__reviews-text {
  font-family: var(--brb-font-body);
  font-size: 9px;
  color: var(--brb-text-muted);
}

/* ============================================================
   Mini Mockup · Display Ad (Paid Ads card)
   ============================================================ */
.mini-mock--ad {
  background: linear-gradient(135deg, #1F1F1D, #141413);
  border-color: rgba(217, 119, 6, 0.3);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.mini-mock--ad::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.2), transparent 70%);
  pointer-events: none;
}

.mini-ad__sponsored {
  font-family: var(--brb-font-body);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.4);
  align-self: flex-start;
}

.mini-ad__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.mini-ad__headline {
  font-family: var(--brb-font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.mini-ad__metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mini-ad__metric-value {
  font-family: var(--brb-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--brb-accent);
  letter-spacing: -0.02em;
  line-height: 1;
}

.mini-ad__metric-label {
  font-family: var(--brb-font-body);
  font-size: 9px;
  color: rgba(250, 247, 242, 0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}

.mini-ad__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brb-accent);
  color: var(--brb-anchor);
  font-family: var(--brb-font-body);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  align-self: flex-start;
  margin-top: 4px;
  transition: gap 200ms var(--brb-ease);
}

.service-card:hover .mini-ad__cta {
  gap: 10px;
}

/* Pulsing glow ring on the ad card on hover */
.service-card:hover .mini-mock--ad {
  border-color: rgba(217, 119, 6, 0.6);
}

/* ============================================================
   Flagship Dashboard wrapper
   Uses the existing .wd-dash / .wd-dashboard__viz styles.
   Just needs a wrapper and label styling.
   ============================================================ */
.flagship__dashboard {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}

.flagship__dashboard.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .flagship__dashboard { grid-template-columns: 1fr; }
}

.flagship__dashboard-label {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.flagship__dashboard-caption {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  max-width: 44ch;
}

/* Service cards — make sure there's room for the mockup */
.service-card {
  display: flex;
  flex-direction: column;
  transition: transform 300ms var(--brb-ease);
}

/* Subtle amber underline growing on service card hover */
.service-card__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 200ms var(--brb-ease);
}

.service-card__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--brb-accent);
  transition: width 400ms var(--brb-ease);
}

.service-card:hover .service-card__link::after {
  width: 100%;
}


/* ============================================================
   ==============================================================
   ABOUT PAGE ENHANCEMENTS
   — Animated intro hero (orbs, grid, line assembly)
   — Signature portrait section
   — By the Numbers stats
   — Beyond the Work studio visualization (CSS/SVG)
   — Subtle polish on existing sections
   ==============================================================
   ============================================================ */

/* ============================================================
   Intro — animated background
   ============================================================ */
.intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.intro__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(217, 119, 6, 0.38) 0%, transparent 100%),
    radial-gradient(ellipse at 0% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
}

/* Orb divs kept in DOM for stability but hidden —
   amber glow is now a corner-anchored gradient on .intro__bg */
.intro__orb { display: none; }

.intro__grid {
  /* Grid lines removed for consistency across all page heroes.
     Kept class for DOM stability. */
  display: none;
}

/* Intro headline line-by-line */
.intro__headline .line {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}

.intro__headline .line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.intro__headline em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

/* Intro body lines fade up */
.intro__body-line {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.intro__body-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Signature section — portrait + name + signature mark
   ============================================================ */
.signature {
  background: var(--brb-surface);
  padding: clamp(56px, 7vw, 96px) 0;
  border-bottom: 1px solid var(--brb-border);
}

.signature__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}

@media (max-width: 680px) {
  .signature__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.signature__photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--brb-anchor);
  box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.3);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}

.signature__photo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 680px) {
  .signature__photo {
    width: 180px;
    height: 180px;
    margin: 0 auto;
  }
}

.signature__photo::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--brb-accent);
  opacity: 0;
  animation: signature-ring 4s ease-in-out infinite;
}

@keyframes signature-ring {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(1.04); }
}

.signature__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.signature__meta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--brb-ease-entrance) 200ms, transform 900ms var(--brb-ease-entrance) 200ms;
}

.signature__meta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.signature__line {
  width: 40px;
  height: 2px;
  background: var(--brb-accent);
  margin-bottom: 20px;
}

@media (max-width: 680px) {
  .signature__line { margin: 0 auto 20px; }
}

.signature__name {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brb-text);
  margin-bottom: 12px;
}

.signature__dot {
  color: var(--brb-accent);
  font-weight: 700;
}

.signature__role {
  font-family: var(--brb-font-body);
  font-size: 14px;
  color: var(--brb-text-muted);
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}

.signature__mark {
  color: var(--brb-accent);
  max-width: 200px;
  height: 40px;
}

@media (max-width: 680px) {
  .signature__mark { margin: 0 auto; }
}

.signature__mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.signature__path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 2000ms var(--brb-ease-entrance);
}

.signature__mark.is-drawn .signature__path {
  stroke-dashoffset: 0;
}

/* ============================================================
   By the Numbers
   ============================================================ */
.numbers {
  background: var(--brb-surface);
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid var(--brb-border);
  border-bottom: 1px solid var(--brb-border);
}

.numbers__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
}

.numbers__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.numbers__title {
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.numbers__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.numbers__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  flex-wrap: wrap;
  max-width: 1040px;
  margin: 0 auto;
}

.numbers__item {
  flex: 1;
  min-width: 140px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.numbers__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.numbers__item:nth-child(3) { transition-delay: 100ms; }
.numbers__item:nth-child(5) { transition-delay: 200ms; }
.numbers__item:nth-child(7) { transition-delay: 300ms; }

.numbers__value {
  font-family: var(--brb-font-display);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brb-text);
  margin-bottom: 12px;
}

.numbers__word {
  font-style: italic;
  color: var(--brb-text);
}

.numbers__label {
  font-family: var(--brb-font-body);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  font-weight: 500;
}

.numbers__divider {
  width: 1px;
  height: 60px;
  background: var(--brb-border);
}

@media (max-width: 720px) {
  .numbers__divider { display: none; }
  .numbers__item { min-width: 45%; }
}

/* ============================================================
   Beyond the Work — Studio visualization
   ============================================================ */
.beyond__viz {
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance), transform 1000ms var(--brb-ease-entrance);
}

.beyond__viz .studio-viz.is-visible,
.beyond__viz:has(.studio-viz.is-visible) {
  opacity: 1;
  transform: translateY(0);
}

/* Since :has() isn't universal, use a class on .beyond__viz directly */
.studio-viz.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.studio-viz {
  background: var(--brb-anchor);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 14px;
  padding: 24px;
  box-shadow:
    0 30px 60px -15px rgba(26, 26, 26, 0.35),
    0 15px 30px -10px rgba(26, 26, 26, 0.25);
  color: var(--brb-text-on-dark);
  font-family: var(--brb-font-body);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance), transform 1000ms var(--brb-ease-entrance);
}

.studio-viz::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.08), transparent 60%);
  pointer-events: none;
}

.studio-viz__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  margin-bottom: 20px;
}

.studio-viz__indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.studio-viz__rec-dot {
  width: 8px;
  height: 8px;
  background: #E87C7C;
  border-radius: 50%;
  animation: studio-rec-pulse 1.5s ease-in-out infinite;
}

@keyframes studio-rec-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232, 124, 124, 0.5); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(232, 124, 124, 0); }
}

.studio-viz__rec-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brb-text-on-dark-muted);
}

.studio-viz__timestamp {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brb-accent);
  font-family: 'Fraunces', Georgia, serif;
}

/* VU Meter */
.studio-viz__vu {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.studio-viz__vu-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--brb-text-on-dark-subtle);
  width: 14px;
}

.studio-viz__vu-track {
  flex-grow: 1;
  height: 10px;
  background: rgba(250, 247, 242, 0.05);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.studio-viz__vu-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}

.studio-viz__vu-ticks span {
  width: 1px;
  height: 100%;
  background: rgba(26, 26, 26, 0.4);
}

.studio-viz__vu-fill {
  height: 100%;
  background: linear-gradient(to right,
    #7ACC8F 0%,
    #7ACC8F 55%,
    var(--brb-accent) 60%,
    var(--brb-accent) 80%,
    #E87C7C 85%,
    #E87C7C 100%);
  transform-origin: left;
  animation: studio-vu-l 1.2s ease-in-out infinite;
  border-radius: 2px;
}

.studio-viz__vu-fill--r {
  animation: studio-vu-r 1.4s ease-in-out infinite 0.3s;
}

@keyframes studio-vu-l {
  0%   { transform: scaleX(0.35); }
  25%  { transform: scaleX(0.72); }
  50%  { transform: scaleX(0.58); }
  75%  { transform: scaleX(0.82); }
  100% { transform: scaleX(0.35); }
}

@keyframes studio-vu-r {
  0%   { transform: scaleX(0.4); }
  30%  { transform: scaleX(0.68); }
  60%  { transform: scaleX(0.78); }
  80%  { transform: scaleX(0.52); }
  100% { transform: scaleX(0.4); }
}

.studio-viz__vu-peak {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  z-index: 3;
  opacity: 0;
  animation: studio-peak-flash 2.4s ease-out infinite;
}

.studio-viz__vu-peak--green { left: 50%; background: #7ACC8F; animation-delay: 0.4s; }
.studio-viz__vu-peak--amber { left: 70%; background: var(--brb-accent); animation-delay: 1.0s; }
.studio-viz__vu-peak--red   { left: 88%; background: #E87C7C; animation-delay: 1.6s; }

@keyframes studio-peak-flash {
  0%, 90%, 100% { opacity: 0; }
  45%, 55%      { opacity: 1; }
}

/* Waveform */
.studio-viz__waveform {
  position: relative;
  height: 80px;
  margin: 20px 0;
  background: rgba(250, 247, 242, 0.02);
  border-radius: 6px;
  overflow: hidden;
}

.studio-viz__wave-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.studio-viz__wave-path {
  fill: none;
  stroke: var(--brb-accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.8;
  animation: studio-wave-shift 12s linear infinite;
}

.studio-viz__wave-svg--alt { opacity: 0.35; }

.studio-viz__wave-path--alt {
  stroke: #FAF7F2;
  animation: studio-wave-shift 16s linear infinite reverse;
}

@keyframes studio-wave-shift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-8px); }
}

/* Levels */
.studio-viz__levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(250, 247, 242, 0.08);
}

.studio-viz__level {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
}

.studio-viz__level-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brb-text-on-dark-subtle);
}

.studio-viz__level-bar {
  height: 4px;
  background: rgba(250, 247, 242, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.studio-viz__level-fill {
  height: 100%;
  background: var(--brb-accent);
  border-radius: 2px;
  width: 0;
  animation: studio-level-fill 1400ms var(--brb-ease-entrance) forwards;
  --level: 50%;
}

.beyond__viz .studio-viz.is-visible .studio-viz__level:nth-child(1) .studio-viz__level-fill { animation-delay: 400ms; }
.beyond__viz .studio-viz.is-visible .studio-viz__level:nth-child(2) .studio-viz__level-fill { animation-delay: 500ms; }
.beyond__viz .studio-viz.is-visible .studio-viz__level:nth-child(3) .studio-viz__level-fill { animation-delay: 600ms; }

@keyframes studio-level-fill {
  to { width: var(--level); }
}

.studio-viz__level-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  width: 40px;
  text-align: right;
  letter-spacing: -0.02em;
}

/* ============================================================
   Subtle polish on existing About sections
   ============================================================ */

/* How I Work — amber underline on hover */
.how-item {
  position: relative;
  transition: transform 400ms var(--brb-ease);
}

.how-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--brb-accent);
  transition: width 400ms var(--brb-ease);
}

.how-item:hover::after {
  width: 40px;
}

.how-item__num {
  transition: color 300ms var(--brb-ease), transform 300ms var(--brb-ease);
}

.how-item:hover .how-item__num {
  color: var(--brb-accent);
  transform: translateX(3px);
}

/* Belief items — subtle left border amber flash on hover */
.belief {
  position: relative;
  padding-left: 16px;
  transition: transform 300ms var(--brb-ease);
}

.belief::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--brb-accent);
  opacity: 0;
  transform: scaleY(0.5);
  transform-origin: center;
  transition: opacity 400ms var(--brb-ease), transform 400ms var(--brb-ease);
}

.belief:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Client items — subtle lift + amber name on hover */
.clients-item {
  transition: transform 300ms var(--brb-ease), background 300ms var(--brb-ease);
  padding: 16px;
  border-radius: 6px;
}

.clients-item:hover {
  background: rgba(217, 119, 6, 0.04);
}

.clients-item__name {
  transition: color 300ms var(--brb-ease);
}

.clients-item:hover .clients-item__name {
  color: var(--brb-accent);
}


/* ============================================================
   About page — centered signature variant
   (when photo is moved up to hero, signature becomes text-only)
   ============================================================ */
.signature__grid--centered {
  grid-template-columns: 1fr !important;
  text-align: center;
  max-width: 600px;
}

.signature__grid--centered .signature__line {
  margin: 0 auto 20px;
}

.signature__grid--centered .signature__mark {
  margin: 0 auto;
}

/* Beyond the Work — styled outbound links for Carbon City Lights + Venia Mastering */
.beyond__link {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease), background 200ms var(--brb-ease);
}

.beyond__link:hover {
  color: var(--brb-accent);
  background: rgba(217, 119, 6, 0.06);
}

/* On dark backgrounds, use the dark-muted token */
.beyond--dark .beyond__link,
.beyond .beyond__content p .beyond__link {
  color: inherit;
}


/* ============================================================
   About · Hero portrait caption — elegant editorial detail
   Sits below the portrait with a subtle amber rule above
   ============================================================ */
.intro__caption {
  margin-top: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  animation: intro-caption-in 900ms var(--brb-ease-entrance) 1400ms forwards;
}

@keyframes intro-caption-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro__caption-line {
  width: 24px;
  height: 1px;
  background: var(--brb-accent);
  margin: 0 auto 14px;
  opacity: 0.8;
}

.intro__caption-name {
  font-family: var(--brb-font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--brb-text-on-dark);
  line-height: 1.1;
  margin-bottom: 6px;
}

.intro__caption-dot {
  color: var(--brb-accent);
  font-weight: 700;
}

.intro__caption-role {
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .intro__caption {
    margin-top: 18px;
  }
  .intro__caption-name {
    font-size: 18px;
  }
  .intro__caption-role {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}


/* ============================================================
   About · Beyond the Work — photo block (replaces studio viz)
   Uses the acoustic performance photo as the focal element,
   with the offset amber accent frame pattern from the hero.
   ============================================================ */
.beyond__photo-block {
  position: relative;
  aspect-ratio: 3 / 4;
  width: 100%;
}

@media (min-width: 900px) {
  .beyond__photo-block {
    max-width: 460px;
  }
}

.beyond__photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.4),
    0 15px 30px -10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 1200ms var(--brb-ease-entrance),
              transform 1200ms var(--brb-ease-entrance);
}

.beyond__photo-frame.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.beyond__photo-frame:hover img {
  transform: scale(1.03);
}

.beyond__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms var(--brb-ease);
}

/* Subtle gradient overlay at bottom for caption readability */
.beyond__photo-frame::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* Photo caption overlay */
.beyond__photo-caption {
  position: absolute;
  bottom: 20px;
  left: 24px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.beyond__photo-caption-label {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.beyond__photo-caption-link {
  font-family: var(--brb-font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #FAF7F2;
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}

.beyond__photo-caption-link:hover {
  color: var(--brb-accent);
}

/* Amber offset accent frame behind the photo */
.beyond__photo-accent {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--brb-accent);
  border-radius: 8px;
  z-index: 1;
  opacity: 0.35;
  transition: all 600ms var(--brb-ease);
}

.beyond__photo-block:hover .beyond__photo-accent {
  top: 20px;
  left: 20px;
  opacity: 0.55;
}


/* ============================================================
   ==============================================================
   HOMEPAGE v2 ENHANCEMENTS
   — Pull-quote editorial section (3.5)
   — Upgraded Who's Behind section
   — 3-column Work grid variant
   — Featured + grid reviews
   ==============================================================
   ============================================================ */

/* ============================================================
   Pull-quote section (between flagship and Who's Behind)
   ============================================================ */
.pullquote {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}

.pullquote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30%;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(217, 119, 6, 0.06), transparent 60%);
  pointer-events: none;
}

.pullquote__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .pullquote__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.pullquote__photo-block {
  position: relative;
  width: clamp(240px, 28vw, 340px);
  aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
  .pullquote__photo-block {
    margin: 0 auto;
    width: clamp(220px, 50vw, 300px);
  }
}

.pullquote__photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.5),
    0 15px 30px -10px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 1200ms var(--brb-ease-entrance),
              transform 1200ms var(--brb-ease-entrance);
}

.pullquote__photo-frame.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pullquote__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05);
}

.pullquote__photo-accent {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--brb-accent);
  border-radius: 8px;
  z-index: 1;
  opacity: 0.45;
  transition: all 600ms var(--brb-ease);
}

.pullquote__photo-block:hover .pullquote__photo-accent {
  top: 20px;
  left: 20px;
  opacity: 0.65;
}

.pullquote__content {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--brb-ease-entrance) 300ms,
              transform 900ms var(--brb-ease-entrance) 300ms;
}

.pullquote__content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pullquote__content .eyebrow {
  margin-bottom: 24px;
  display: inline-block;
}

/* Giant opening quote mark as decorative element */
.pullquote__text {
  font-family: var(--brb-font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  font-weight: 300;
  color: var(--brb-text-on-dark);
  margin: 24px 0 28px 0;
}

.pullquote__text em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

.pullquote__credit {
  font-family: var(--brb-font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(250, 247, 242, 0.1);
  max-width: 320px;
}

.pullquote__credit a {
  color: var(--brb-text-on-dark);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}

.pullquote__credit a:hover {
  color: var(--brb-accent);
}

/* ============================================================
   Upgraded Who's Behind section
   ============================================================ */
.who__grid {
  align-items: center;
}

/* Override existing who__photo styling - use block with accent frame */
.who__photo-block {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 460px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1000ms var(--brb-ease-entrance),
              transform 1000ms var(--brb-ease-entrance);
}

.who__photo-block.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.who__photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 30px 60px -15px rgba(26, 26, 26, 0.35),
    0 15px 30px -10px rgba(26, 26, 26, 0.2);
}

.who__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms var(--brb-ease);
}

.who__photo-block:hover .who__photo-frame img {
  transform: scale(1.02);
}

.who__photo-accent {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--brb-accent);
  border-radius: 8px;
  z-index: 1;
  opacity: 0.35;
  transition: all 600ms var(--brb-ease);
}

.who__photo-block:hover .who__photo-accent {
  top: 20px;
  left: 20px;
  opacity: 0.55;
}

.who__content {
  padding-left: clamp(0px, 3vw, 32px);
}

@media (max-width: 900px) {
  .who__content {
    padding-left: 0;
  }
  .who__photo-block {
    margin: 0 auto;
  }
}

.who__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 16px 0 28px;
  font-weight: 400;
}

.who__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.who__body {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.75;
  color: var(--brb-text-muted);
  margin-bottom: 20px;
  max-width: 52ch;
}

.who__body:last-of-type {
  margin-bottom: 32px;
}

.who__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   Work grid — 3-column variant
   ============================================================ */
.work__grid--three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

@media (max-width: 1000px) {
  .work__grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .work__grid--three {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Reviews — featured quote + grid of 3
   ============================================================ */

.reviews__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

.reviews__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.reviews__title {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 20px;
}

.reviews__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.reviews__sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--brb-text-muted);
}

.reviews__link {
  color: var(--brb-accent);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease), background 200ms var(--brb-ease);
}

.reviews__link:hover {
  background: rgba(217, 119, 6, 0.06);
}

/* Featured review — large, centered, editorial */
.review-featured {
  max-width: 780px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: clamp(40px, 5vw, 64px);
  background: var(--brb-surface);
  border: 1px solid var(--brb-border);
  border-radius: 12px;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 30px -10px rgba(26, 26, 26, 0.08);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--brb-ease-entrance),
              transform 900ms var(--brb-ease-entrance);
}

.review-featured.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.review-featured::before {
  content: '“';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--brb-font-display);
  font-size: 140px;
  line-height: 1;
  color: var(--brb-accent);
  opacity: 0.15;
  font-weight: 400;
  pointer-events: none;
}

.review-featured__stars {
  color: var(--brb-accent);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.review-featured__quote {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  font-weight: 300;
  color: var(--brb-text);
  margin: 0 0 32px;
  position: relative;
  z-index: 1;
}

.review-featured__quote em {
  font-style: italic;
  color: var(--brb-accent);
  font-weight: 400;
}

.review-featured__author {
  position: relative;
  z-index: 1;
}

.review-featured__name {
  font-family: var(--brb-font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--brb-text);
  letter-spacing: -0.01em;
}

.review-featured__meta {
  font-family: var(--brb-font-body);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  margin-top: 6px;
  font-weight: 500;
}

/* Supporting grid of 3 reviews */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

@media (max-width: 960px) {
  .reviews__grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }
}

.review {
  background: var(--brb-surface);
  border: 1px solid var(--brb-border);
  border-radius: 10px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 300ms var(--brb-ease),
              box-shadow 300ms var(--brb-ease),
              border-color 300ms var(--brb-ease);
}

.review:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.12);
  border-color: rgba(217, 119, 6, 0.3);
}

.review__stars {
  color: var(--brb-accent);
  font-size: 14px;
  letter-spacing: 1.5px;
}

.review__quote {
  font-family: var(--brb-font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--brb-text);
  flex-grow: 1;
  margin: 0;
  font-style: italic;
}

.review__author {
  padding-top: 16px;
  border-top: 1px solid var(--brb-border);
}

.review__name {
  font-family: var(--brb-font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--brb-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.review__role {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  margin-top: 4px;
  font-weight: 500;
}


/* ============================================================
   ==============================================================
   SEO PAGE — SIGNATURE VISUALS
   — Animated SERP mockup with typing query + highlighted #1
   — Rank tracking dashboard (keyword table + sparklines)
   — Local Pack visualization (map + 3-pack results)
   — Core Web Vitals donut charts
   ==============================================================
   ============================================================ */

/* ============================================================
   SEO · SERP Mockup
   ============================================================ */
.seo-serp {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}

.seo-serp::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.08), transparent 60%);
  pointer-events: none;
}

.seo-serp__head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
  position: relative;
}

.seo-serp__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.seo-serp__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 20px;
}

.seo-serp__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.seo-serp__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
  margin: 0 auto;
}

.serp-mockup {
  max-width: 840px;
  margin: 0 auto;
  background: #FAF7F2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 20px 40px -10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1200ms var(--brb-ease-entrance),
              transform 1200ms var(--brb-ease-entrance);
  position: relative;
}

.serp-mockup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.serp-mockup__chrome {
  background: #E8E5E0;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.serp-mockup__dots {
  display: flex;
  gap: 6px;
}

.serp-mockup__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.serp-mockup__dots span:nth-child(1) { background: #FF5F56; }
.serp-mockup__dots span:nth-child(2) { background: #FFBD2E; }
.serp-mockup__dots span:nth-child(3) { background: #27C93F; }

.serp-mockup__url-bar {
  flex: 1;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #5F5F5A;
  display: flex;
  align-items: center;
  gap: 8px;
}

.serp-mockup__lock {
  font-size: 10px;
}

.serp-mockup__search {
  padding: 32px 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.serp-mockup__google {
  font-family: 'Product Sans', 'Inter', sans-serif;
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
}

.serp-mockup__search-input {
  background: #FFFFFF;
  border: 1px solid #DFE1E5;
  border-radius: 24px;
  padding: 12px 20px;
  font-size: 15px;
  color: #202124;
  min-height: 40px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.serp-mockup__query {
  font-family: Arial, sans-serif;
  color: #202124;
}

.serp-mockup__cursor {
  display: inline-block;
  animation: serp-blink 1s step-end infinite;
  color: #202124;
  margin-left: 1px;
}

@keyframes serp-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.serp-mockup__results {
  padding: 16px 40px 32px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--brb-ease), transform 600ms var(--brb-ease);
}

.serp-mockup__results.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.serp-mockup__stats {
  font-size: 12px;
  color: #70757A;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.serp-result {
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 8px;
  position: relative;
  transition: all 300ms var(--brb-ease);
}

.serp-result--featured {
  background: rgba(217, 119, 6, 0.07);
  border: 1.5px solid var(--brb-accent);
  padding-right: 80px;
  animation: serp-featured-glow 3s ease-in-out infinite;
}

@keyframes serp-featured-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.08); }
}

.serp-result__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--brb-accent);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.serp-result__badge-icon {
  font-size: 12px;
}

.serp-result__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #202124;
  margin-bottom: 6px;
}

.serp-result__favicon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brb-accent);
  display: inline-block;
  flex-shrink: 0;
}

.serp-result__favicon--grey { background: #9AA0A6; }

.serp-result__sep {
  color: #9AA0A6;
  margin: 0 2px;
}

.serp-result__title {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #1A0DAB;
  line-height: 1.3;
  margin: 4px 0 6px 0;
  text-decoration: underline;
  text-decoration-color: rgba(26, 13, 171, 0.2);
}

.serp-result--competitor .serp-result__title {
  color: #1A0DAB;
}

.serp-result__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}

.serp-result__stars {
  color: #F59E0B;
  letter-spacing: 1px;
}

.serp-result__rating-count {
  color: #70757A;
  font-size: 13px;
}

.serp-result__desc {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #4D5156;
  margin: 0;
}

.serp-result--competitor {
  opacity: 0.65;
}

@media (max-width: 640px) {
  .serp-mockup__search { padding: 24px 20px 16px; }
  .serp-mockup__results { padding: 12px 20px 24px; }
  .serp-mockup__google { font-size: 32px; }
  .serp-result__title { font-size: 17px; }
  .serp-result--featured { padding-right: 16px; }
  .serp-result__badge { top: auto; bottom: 8px; right: 8px; }
}

/* ============================================================
   SEO · Rank Tracking Dashboard
   ============================================================ */
.seo-rankings {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--brb-surface);
}

.seo-rankings__head {
  max-width: 680px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}

.seo-rankings__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.seo-rankings__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 20px;
}

.seo-rankings__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.seo-rankings__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-muted);
}

.rank-dash {
  max-width: 960px;
  margin: 0 auto;
  background: var(--brb-anchor);
  border-radius: 12px;
  padding: 32px;
  color: var(--brb-text-on-dark);
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.25),
    0 15px 30px -10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance),
              transform 1000ms var(--brb-ease-entrance);
}

.rank-dash.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rank-dash__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  margin-bottom: 24px;
}

@media (max-width: 720px) {
  .rank-dash__head { grid-template-columns: 1fr; }
}

.rank-dash__live {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--brb-text-on-dark);
  font-weight: 500;
  margin-bottom: 4px;
}

.rank-dash__live-dot {
  width: 8px;
  height: 8px;
  background: #7ACC8F;
  border-radius: 50%;
  animation: rank-dash-pulse 2s ease-in-out infinite;
}

@keyframes rank-dash-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(122, 204, 143, 0.4); }
  50%      { opacity: 0.8; box-shadow: 0 0 0 6px rgba(122, 204, 143, 0); }
}

.rank-dash__range {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
}

.rank-dash__summary {
  display: flex;
  gap: 32px;
}

@media (max-width: 720px) {
  .rank-dash__summary { gap: 16px; flex-wrap: wrap; }
}

.rank-dash__stat-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  margin-bottom: 4px;
  font-weight: 500;
}

.rank-dash__stat-value {
  font-family: var(--brb-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rank-dash__delta {
  font-family: var(--brb-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.rank-dash__delta--up { color: #7ACC8F; }
.rank-dash__delta--down { color: #E87C7C; }

.rank-dash__table-head {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 100px;
  gap: 16px;
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
  border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}

.rank-dash__row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 100px;
  gap: 16px;
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.05);
  transition: background 200ms var(--brb-ease);
}

.rank-dash__row:hover {
  background: rgba(250, 247, 242, 0.02);
}

.rank-dash__row:last-child { border-bottom: none; }

.rank-dash__keyword {
  font-size: 14px;
  color: var(--brb-text-on-dark);
  font-weight: 500;
}

.rank-dash__position {
  font-family: var(--brb-font-display);
  font-size: 20px;
  font-weight: 400;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.rank-dash__position--1 {
  background: rgba(217, 119, 6, 0.15);
  color: var(--brb-accent);
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.4);
}

.rank-dash__position--2 {
  background: rgba(122, 204, 143, 0.1);
  color: #7ACC8F;
}

.rank-dash__position--3 {
  background: rgba(122, 204, 143, 0.06);
  color: #7ACC8F;
}

.rank-dash__position--4,
.rank-dash__position--5 {
  background: rgba(250, 247, 242, 0.04);
  color: var(--brb-text-on-dark-muted);
}

.rank-dash__spark {
  width: 100%;
  max-width: 180px;
  height: 30px;
  color: #7ACC8F;
}

.rank-dash__spark-path {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation: rank-spark-draw 2s var(--brb-ease-entrance) forwards;
}

.rank-dash.is-visible .rank-dash__row:nth-child(2) .rank-dash__spark-path { animation-delay: 200ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(3) .rank-dash__spark-path { animation-delay: 300ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(4) .rank-dash__spark-path { animation-delay: 400ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(5) .rank-dash__spark-path { animation-delay: 500ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(6) .rank-dash__spark-path { animation-delay: 600ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(7) .rank-dash__spark-path { animation-delay: 700ms; }

@keyframes rank-spark-draw {
  to { stroke-dashoffset: 0; }
}

.rank-dash__volume {
  font-size: 13px;
  color: var(--brb-text-on-dark-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 720px) {
  .rank-dash { padding: 20px; }
  .rank-dash__table-head { display: none; }
  .rank-dash__row {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 14px 8px;
  }
  .rank-dash__spark { display: none; }
  .rank-dash__volume { font-size: 11px; }
}

/* ============================================================
   SEO · Local Pack
   ============================================================ */
.seo-local {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--brb-surface);
  border-top: 1px solid var(--brb-border);
}

.seo-local__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .seo-local__grid { grid-template-columns: 1fr; }
}

.seo-local__content .eyebrow { margin-bottom: 16px; display: inline-block; }

.seo-local__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 24px;
}

.seo-local__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.seo-local__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin-bottom: 16px;
}

.seo-local__visual {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance),
              transform 1000ms var(--brb-ease-entrance);
}

.seo-local__visual.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.local-pack {
  background: var(--brb-anchor);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.3),
    0 15px 30px -10px rgba(0, 0, 0, 0.2);
}

.local-pack__map {
  height: 160px;
  background: #2A2A2A;
  position: relative;
  overflow: hidden;
}

.local-pack__map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.local-pack__pin {
  position: absolute;
  transform: translate(-50%, -100%);
  animation: local-pin-drop 600ms var(--brb-ease-entrance) backwards;
}

.local-pack__pin--primary { animation-delay: 400ms; }
.local-pack__pin--secondary { animation-delay: 600ms; }
.local-pack__pin--tertiary { animation-delay: 800ms; }

@keyframes local-pin-drop {
  from { opacity: 0; transform: translate(-50%, -150%); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}

.local-pack__pin-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--brb-font-display);
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
}

.local-pack__pin-marker::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid inherit;
}

.local-pack__pin--primary .local-pack__pin-marker {
  background: var(--brb-accent);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5);
  animation: local-pin-pulse 2s ease-in-out infinite;
  width: 32px;
  height: 32px;
  font-size: 15px;
}

@keyframes local-pin-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5); }
  50%      { box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5), 0 0 0 8px rgba(217, 119, 6, 0.15); }
}

.local-pack--pin-secondary .local-pack__pin-marker,
.local-pack__pin--secondary .local-pack__pin-marker { background: #8A8A8A; }

.local-pack__pin--tertiary .local-pack__pin-marker { background: #8A8A8A; }

.local-pack__results {
  padding: 16px;
  color: var(--brb-text-on-dark);
}

.local-pack__header {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  margin-bottom: 12px;
}

.local-pack__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(250, 247, 242, 0.05);
  position: relative;
}

.local-pack__item:last-child { border-bottom: none; }

.local-pack__item--featured {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.08), transparent);
  padding: 16px 14px;
  margin: 0 -14px;
  border-radius: 8px;
  border-bottom: none;
  border: 1px solid rgba(217, 119, 6, 0.25);
  margin-bottom: 10px;
}

.local-pack__marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brb-accent);
  color: #FFFFFF;
  font-family: var(--brb-font-display);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.local-pack__item:not(.local-pack__item--featured) .local-pack__marker {
  background: #4A4A4A;
  color: var(--brb-text-on-dark-muted);
}

.local-pack__body { flex: 1; min-width: 0; }

.local-pack__name {
  font-family: var(--brb-font-display);
  font-size: 15px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.local-pack__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
}

.local-pack__stars {
  color: var(--brb-accent);
  letter-spacing: 1px;
  font-size: 11px;
}

.local-pack__rating-text {
  color: var(--brb-text-on-dark-muted);
}

.local-pack__meta {
  font-size: 11px;
  color: var(--brb-text-on-dark-subtle);
  letter-spacing: 0.02em;
}

.local-pack__ribbon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--brb-accent);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}

/* ============================================================
   SEO · Core Web Vitals
   ============================================================ */
.seo-vitals {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}

.seo-vitals::before {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(122, 204, 143, 0.06), transparent 60%);
  pointer-events: none;
}

.seo-vitals__head {
  max-width: 680px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
  position: relative;
}

.seo-vitals__head .eyebrow { margin-bottom: 16px; display: inline-block; }

.seo-vitals__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 20px;
}

.seo-vitals__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.seo-vitals__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
}

.vitals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 32px);
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance),
              transform 1000ms var(--brb-ease-entrance);
}

.vitals-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .vitals-grid { grid-template-columns: 1fr; max-width: 320px; }
}

.vital-card {
  background: rgba(250, 247, 242, 0.03);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  transition: all 300ms var(--brb-ease);
}

.vital-card:hover {
  border-color: rgba(122, 204, 143, 0.3);
  background: rgba(250, 247, 242, 0.04);
}

.vital-card__meter {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
}

.vital-card__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.vital-card__ring-bg {
  fill: none;
  stroke: rgba(250, 247, 242, 0.06);
  stroke-width: 8;
}

.vital-card__ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 2s var(--brb-ease-entrance);
}

.vital-card__ring-fill--good { stroke: #7ACC8F; }

.vitals-grid.is-visible .vital-card:nth-child(1) .vital-card__ring-fill {
  stroke-dashoffset: calc(327 - (327 * 0.92));
  transition-delay: 300ms;
}
.vitals-grid.is-visible .vital-card:nth-child(2) .vital-card__ring-fill {
  stroke-dashoffset: calc(327 - (327 * 0.95));
  transition-delay: 500ms;
}
.vitals-grid.is-visible .vital-card:nth-child(3) .vital-card__ring-fill {
  stroke-dashoffset: calc(327 - (327 * 0.98));
  transition-delay: 700ms;
}

.vital-card__score {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vital-card__score-inner {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.vital-card__value {
  font-family: var(--brb-font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}

.vital-card__unit {
  font-size: 12px;
  color: var(--brb-text-on-dark-muted);
  font-family: var(--brb-font-body);
  line-height: 1;
}

.vital-card__label {
  font-family: var(--brb-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.vital-card__sublabel {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  margin-bottom: 16px;
  font-weight: 500;
}

.vital-card__status {
  font-family: var(--brb-font-body);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 500;
}

.vital-card__status--good {
  background: rgba(122, 204, 143, 0.12);
  color: #7ACC8F;
  border: 1px solid rgba(122, 204, 143, 0.25);
}


/* ============================================================
   ==============================================================
   PAID ADS PAGE — SIGNATURE VISUALS
   — Ad placement mockup (highlighted sponsored positions)
   — Campaign performance dashboard (ROAS-focused)
   — Ad creative A/B testing variants
   ==============================================================
   ============================================================ */

/* ============================================================
   Paid Ads · Placement Mockup
   ============================================================ */
.ads-placement {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  overflow: hidden;
}

.ads-placement::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.1), transparent 60%);
  pointer-events: none;
}

.ads-placement__head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
  position: relative;
}

.ads-placement__head .eyebrow { margin-bottom: 16px; display: inline-block; }

.ads-placement__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 20px;
}

.ads-placement__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.ads-placement__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
  margin: 0 auto;
}

.ads-serp {
  max-width: 840px;
  margin: 0 auto;
  background: #FAF7F2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 20px 40px -10px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1200ms var(--brb-ease-entrance),
              transform 1200ms var(--brb-ease-entrance);
}

.ads-serp.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reuse chrome styling from SERP */
.ads-serp__chrome {
  background: #E8E5E0;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ads-serp__dots { display: flex; gap: 6px; }
.ads-serp__dots span { width: 10px; height: 10px; border-radius: 50%; }
.ads-serp__dots span:nth-child(1) { background: #FF5F56; }
.ads-serp__dots span:nth-child(2) { background: #FFBD2E; }
.ads-serp__dots span:nth-child(3) { background: #27C93F; }

.ads-serp__url-bar {
  flex: 1;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #5F5F5A;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ads-serp__search {
  padding: 24px 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ads-serp__google {
  font-family: 'Product Sans', 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
}

.ads-serp__search-input {
  background: #FFFFFF;
  border: 1px solid #DFE1E5;
  border-radius: 24px;
  padding: 10px 20px;
  font-size: 14px;
  color: #202124;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  font-family: Arial, sans-serif;
}

.ads-serp__stats {
  padding: 0 40px;
  font-size: 12px;
  color: #70757A;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-left: 40px;
  margin-right: 40px;
}

.ads-serp__sponsored {
  padding: 16px 40px;
  background: rgba(217, 119, 6, 0.05);
  position: relative;
  border-top: 2px solid var(--brb-accent);
  border-bottom: 2px solid var(--brb-accent);
  animation: ads-sponsored-glow 3s ease-in-out infinite;
}

@keyframes ads-sponsored-glow {
  0%, 100% { background: rgba(217, 119, 6, 0.05); }
  50%      { background: rgba(217, 119, 6, 0.1); }
}

.ads-serp__sponsored-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-accent);
  margin-bottom: 14px;
}

.ads-serp__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brb-accent);
  animation: ads-pulse 1.5s ease-in-out infinite;
}

@keyframes ads-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
}

.ads-result {
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 6px;
  position: relative;
  background: #FFFFFF;
  transition: all 300ms var(--brb-ease);
}

.ads-result--ad-1 {
  border: 1.5px solid var(--brb-accent);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.1);
}

.ads-result--ad-2, .ads-result--ad-3, .ads-result--ad-4 {
  border: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0.75;
}

.ads-result__ad-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #202124;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 6px;
}

.ads-result--ad-1 .ads-result__ad-badge {
  background: var(--brb-accent);
  color: #FFFFFF;
}

.ads-result__position-label {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brb-accent);
  background: rgba(217, 119, 6, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}

.ads-result--ad-2 .ads-result__position-label,
.ads-result--ad-3 .ads-result__position-label,
.ads-result--ad-4 .ads-result__position-label {
  color: #70757A;
  background: rgba(0, 0, 0, 0.05);
}

.ads-result__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #202124;
  margin-bottom: 4px;
}

.ads-result__favicon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brb-accent);
  display: inline-block;
  flex-shrink: 0;
}

.ads-result__favicon--grey { background: #9AA0A6; }

.ads-result__title {
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #1A0DAB;
  line-height: 1.3;
  margin: 2px 0 4px 0;
}

.ads-result__desc {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #4D5156;
  margin: 0;
}

.ads-serp__organic {
  padding: 16px 40px 32px;
}

.ads-serp__organic-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9AA0A6;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.ads-serp__organic-sample {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0.35;
}

.ads-serp__organic-line {
  height: 8px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
  border-radius: 4px;
  width: 100%;
}

.ads-serp__organic-line--short { width: 60%; }

@media (max-width: 640px) {
  .ads-serp__search, .ads-serp__sponsored, .ads-serp__organic {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ads-serp__stats { margin-left: 20px; margin-right: 20px; }
  .ads-serp__google { font-size: 28px; }
  .ads-result__title { font-size: 15px; }
  .ads-result__position-label { top: 8px; right: 8px; font-size: 9px; }
}

/* ============================================================
   Paid Ads · Campaign Performance Dashboard
   ============================================================ */
.ads-dash {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--brb-surface);
}

.ads-dash__head {
  max-width: 680px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}

.ads-dash__head .eyebrow { margin-bottom: 16px; display: inline-block; }

.ads-dash__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 20px;
}

.ads-dash__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.ads-dash__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-muted);
}

.ads-dashboard {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--brb-anchor);
  border-radius: 12px;
  padding: 32px;
  color: var(--brb-text-on-dark);
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.25),
    0 15px 30px -10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance),
              transform 1000ms var(--brb-ease-entrance);
}

.ads-dashboard.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ads-dashboard__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  margin-bottom: 24px;
}

@media (max-width: 720px) {
  .ads-dashboard { padding: 20px; }
  .ads-dashboard__head { grid-template-columns: 1fr; gap: 16px; }
}

.ads-dashboard__live {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--brb-text-on-dark);
  font-weight: 500;
  margin-bottom: 4px;
}

.ads-dashboard__live-dot {
  width: 8px;
  height: 8px;
  background: #7ACC8F;
  border-radius: 50%;
  animation: rank-dash-pulse 2s ease-in-out infinite;
}

.ads-dashboard__range {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
}

.ads-dashboard__hero-metric {
  text-align: right;
}

@media (max-width: 720px) { .ads-dashboard__hero-metric { text-align: left; } }

.ads-dashboard__hero-value {
  font-family: var(--brb-font-display);
  font-size: 42px;
  font-weight: 400;
  color: var(--brb-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ads-dashboard__hero-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  margin-top: 6px;
  font-weight: 500;
}

/* KPI grid */
.ads-dashboard__kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .ads-dashboard__kpis { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .ads-dashboard__kpis { grid-template-columns: repeat(2, 1fr); }
}

.ads-kpi {
  padding: 12px 14px;
  background: rgba(250, 247, 242, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(250, 247, 242, 0.05);
}

.ads-kpi__label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  margin-bottom: 6px;
  font-weight: 500;
}

.ads-kpi__value {
  font-family: var(--brb-font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ads-kpi__delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.ads-kpi__delta--up { color: #7ACC8F; }
.ads-kpi__delta--down { color: #7ACC8F; } /* Low CPC going down is good */

/* Chart */
.ads-dashboard__chart-section {
  padding: 20px 0;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  margin-bottom: 24px;
}

.ads-dashboard__chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.ads-dashboard__chart-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--brb-text-on-dark);
}

.ads-dashboard__chart-legend {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--brb-text-on-dark-muted);
}

.ads-dashboard__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ads-dashboard__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ads-dashboard__legend-dot--revenue { background: var(--brb-accent); }
.ads-dashboard__legend-dot--spend { background: #8A8A8A; }

.ads-dashboard__chart {
  width: 100%;
  height: 180px;
  display: block;
}

.ads-dashboard__chart-grid {
  stroke: rgba(250, 247, 242, 0.04);
  stroke-width: 1;
}

.ads-dashboard__chart-area {
  fill: url(#adsGradient);
  fill: rgba(217, 119, 6, 0.08);
  opacity: 0;
  animation: ads-chart-area-in 1400ms var(--brb-ease-entrance) 600ms forwards;
}

@keyframes ads-chart-area-in {
  to { opacity: 1; }
}

.ads-dashboard__chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}

.ads-dashboard.is-visible .ads-dashboard__chart-line {
  animation: ads-chart-line-draw 2s var(--brb-ease-entrance) forwards;
}

.ads-dashboard__chart-line--revenue {
  stroke: var(--brb-accent);
  animation-delay: 400ms;
}

.ads-dashboard__chart-line--spend {
  stroke: #8A8A8A;
  stroke-width: 1.5;
  opacity: 0.7;
  animation-delay: 600ms;
}

@keyframes ads-chart-line-draw {
  to { stroke-dashoffset: 0; }
}

/* Campaigns table */
.ads-dashboard__campaigns-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
  border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}

.ads-campaign-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.05);
  font-size: 13px;
  color: var(--brb-text-on-dark);
  transition: background 200ms var(--brb-ease);
  font-variant-numeric: tabular-nums;
}

.ads-campaign-row:hover {
  background: rgba(250, 247, 242, 0.02);
}

.ads-campaign-row:last-child { border-bottom: none; }

.ads-campaign-row__name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ads-campaign-row__type {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--brb-font-body);
}

.ads-campaign-row__type--search { background: rgba(217, 119, 6, 0.15); color: var(--brb-accent); }
.ads-campaign-row__type--pmax { background: rgba(139, 92, 246, 0.15); color: #A78BFA; }
.ads-campaign-row__type--remarketing { background: rgba(122, 204, 143, 0.15); color: #7ACC8F; }
.ads-campaign-row__type--display { background: rgba(250, 247, 242, 0.06); color: var(--brb-text-on-dark-muted); }
.ads-campaign-row__type--meta { background: rgba(56, 142, 244, 0.15); color: #6BA8F5; }

.ads-campaign-row__roas {
  font-family: var(--brb-font-display);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}

.ads-campaign-row__roas--strong {
  color: var(--brb-accent);
  font-weight: 400;
}

@media (max-width: 720px) {
  .ads-dashboard__campaigns-head,
  .ads-campaign-row {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .ads-dashboard__campaigns-head > div:nth-child(3),
  .ads-campaign-row > div:nth-child(3) { display: none; }
  .ads-campaign-row__name { font-size: 12px; }
}

/* ============================================================
   Paid Ads · Creative Variants (A/B testing)
   ============================================================ */
.ads-variants {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--brb-surface);
  border-top: 1px solid var(--brb-border);
}

.ads-variants__head {
  max-width: 680px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}

.ads-variants__head .eyebrow { margin-bottom: 16px; display: inline-block; }

.ads-variants__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 20px;
}

.ads-variants__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.ads-variants__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-muted);
}

.ads-variants__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  max-width: 1100px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance),
              transform 1000ms var(--brb-ease-entrance);
}

.ads-variants__grid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .ads-variants__grid { grid-template-columns: 1fr; max-width: 480px; }
}

.ad-variant {
  background: #FFFFFF;
  border: 1px solid var(--brb-border);
  border-radius: 12px;
  padding: 24px;
  transition: all 300ms var(--brb-ease);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ad-variant--winner {
  border-color: var(--brb-accent);
  box-shadow: 0 8px 24px -8px rgba(217, 119, 6, 0.2);
  transform: translateY(-8px);
}

.ad-variant--loser {
  opacity: 0.7;
}

.ad-variant__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--brb-border);
}

.ad-variant__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--brb-text-muted);
}

.ad-variant__badge--winner {
  background: var(--brb-accent);
  color: #FFFFFF;
}

.ad-variant__badge--loser {
  background: rgba(0, 0, 0, 0.06);
  color: var(--brb-text-muted);
}

.ad-variant__version {
  font-family: var(--brb-font-display);
  font-size: 13px;
  color: var(--brb-text);
  font-weight: 400;
}

/* Ad preview mimics a Google Ad */
.ad-variant__preview {
  background: #F8F8F8;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ad-variant__sponsored {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #202124;
  width: fit-content;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  margin-bottom: 4px;
}

.ad-variant__url {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #202124;
}

.ad-variant__headline {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1A0DAB;
  line-height: 1.3;
  margin: 4px 0 6px 0;
}

.ad-variant__description {
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #4D5156;
  margin: 0;
}

.ad-variant__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--brb-border);
}

.ad-variant__metric {
  text-align: center;
  padding: 8px;
  background: rgba(250, 247, 242, 0.5);
  border-radius: 6px;
}

.ad-variant__metric--hero {
  background: rgba(217, 119, 6, 0.06);
}

.ad-variant--winner .ad-variant__metric--hero {
  background: rgba(217, 119, 6, 0.12);
}

.ad-variant__metric-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}

.ad-variant__metric-value {
  font-family: var(--brb-font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--brb-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.ad-variant--winner .ad-variant__metric--hero .ad-variant__metric-value {
  color: var(--brb-accent);
  font-size: 18px;
}


/* ============================================================
   ==============================================================
   SERVICE PAGE — SHARED SECTION CSS (SEO + Paid Ads)
   Missing classes that existed in the templates but had no CSS
   ==============================================================
   ============================================================ */

/* ============================================================
   Hero body + CTAs + meta (under the headline)
   ============================================================ */
.wd-hero__body {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 58ch;
  margin: clamp(28px, 4vw, 40px) 0 clamp(32px, 4vw, 44px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.wd-hero__body.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 40px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.wd-hero__ctas.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-hero__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px);
  font-family: var(--brb-font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.wd-hero__meta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-hero__meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brb-accent);
  display: inline-block;
}

/* ============================================================
   Approach + form (merged section)
   Two-column grid on ≥880px (approach left, form right).
   Stacks below 880px with approach text on top.
   The outer .wd-craft block keeps its existing background +
   padding rules elsewhere in the file — this just adds the grid
   and form-column styling on top.
   ============================================================ */
.wd-craft__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

@media (min-width: 880px) {
  .wd-craft__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
  }
}

.wd-craft__form {
  /* Form column — visually distinct without breaking from the
     section's cream surface. Subtle raised card treatment so the
     form reads as a discrete element next to the editorial copy. */
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border);
  border-radius: 8px;
  padding: clamp(28px, 3.5vw, 44px);
}

.wd-craft__form-title {
  font-family: var(--brb-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--brb-text);
  margin: 0 0 12px;
}

.wd-craft__form-title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-craft__form-sub {
  font-family: var(--brb-font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--brb-text-muted);
  margin: 0 0 24px;
}

/* ============================================================
   Philosophy section
   ============================================================ */
.wd-philosophy {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-bottom: 1px solid var(--brb-border);
}

.wd-philosophy__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 900px) {
  .wd-philosophy__grid { grid-template-columns: 1fr; gap: 32px; }
}

.wd-philosophy__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.wd-philosophy__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--brb-text);
}

.wd-philosophy__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-philosophy__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--brb-text-muted);
}

.wd-philosophy__body p {
  margin: 0 0 20px 0;
}

.wd-philosophy__body p:last-child { margin-bottom: 0; }

.wd-philosophy__body em {
  font-style: italic;
  color: var(--brb-text);
  font-weight: 400;
}

/* ============================================================
   Platforms / Services breakdown section
   ============================================================ */
.wd-platforms {
  padding: var(--brb-section-pad) 0;
  background: var(--brb-surface);
}

.wd-platforms__head {
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.wd-platforms__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.wd-platforms__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--brb-text);
}

.wd-platforms__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-platforms__grid {
  /* 2-up at desktop (≥640px) — the previous 4-up layout
     (1.5fr 1fr 1fr 1fr) rendered cards 2 and 3 at ~239px on a
     1280px viewport, which squeezed the location-service template's
     content-heavy bodies (16–28-word paragraphs + 4-item bullet
     lists) into 13+ wrapped lines and broke bullet text mid-word.
     2-up gives ~562px per card at 1280px — comfortable reading
     width for the same content. /paid-advertising/ and /seo/
     (which also use this grid via .platform-card) benefit too;
     their hero variant loses layout-driven width emphasis but
     keeps its styling differentiation. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 2.5vw, 32px);
  row-gap: clamp(48px, 5vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
  /* align-items: start (added v1.34.7) prevents the grid from
     stretching cells in the same row to match the tallest card.
     Each card sits at its natural content height — Card 02 with
     a 52-word body no longer inflates Card 01's row, and the lead
     card no longer leaves empty cream space below its row partner.
     Defensive against the OPPOSITE failure mode of the v1.34.7
     grid-row removal too: if a future card ends up much heavier
     than its partner, the partner doesn't get padded. */
  align-items: start;
}

@media (max-width: 640px) {
  .wd-platforms__grid { grid-template-columns: 1fr; }
  .platform-card--hero { grid-column: auto; }
}

.platform-card {
  background: #FFFFFF;
  border: 1px solid var(--brb-border);
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 300ms var(--brb-ease),
              box-shadow 300ms var(--brb-ease),
              border-color 300ms var(--brb-ease);
}

.platform-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.12);
  border-color: rgba(217, 119, 6, 0.3);
}

.platform-card--hero {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border-color: var(--brb-anchor);
  position: relative;
  overflow: hidden;
}

.platform-card--hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.08), transparent 60%);
  pointer-events: none;
}

.platform-card__rank {
  font-family: var(--brb-font-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--brb-accent);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.platform-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--brb-accent);
  color: #FFFFFF;
  width: fit-content;
}

.platform-card__name {
  font-family: var(--brb-font-display);
  font-size: 24px;
  font-weight: 400;
  color: inherit;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  position: relative;
}

.platform-card--hero .platform-card__name {
  font-size: 28px;
  color: var(--brb-text-on-dark);
}

.platform-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--brb-text-muted);
  margin: 0;
  position: relative;
}

.platform-card--hero .platform-card__desc {
  color: var(--brb-text-on-dark-muted);
  font-size: 15px;
}

.platform-card__features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.platform-card__features li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--brb-text-on-dark-muted);
  padding-left: 20px;
  position: relative;
}

.platform-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 1px;
  background: var(--brb-accent);
}

/* ============================================================
   Industries section
   ============================================================ */
.wd-industries:has(.industry-item) {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
}

.wd-industries:has(.industry-item) .wd-industries__head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.wd-industries:has(.industry-item) .wd-industries__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.wd-industries:has(.industry-item) .wd-industries__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
}

.wd-industries:has(.industry-item) .wd-industries__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-industries__grid:has(.industry-item) {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .wd-industries__grid:has(.industry-item) { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .wd-industries__grid:has(.industry-item) { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .wd-industries__grid:has(.industry-item) { grid-template-columns: 1fr; }
}

.industry-item {
  background: rgba(250, 247, 242, 0.03);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 300ms var(--brb-ease),
              border-color 300ms var(--brb-ease),
              transform 300ms var(--brb-ease);
}

.industry-item:hover {
  background: rgba(250, 247, 242, 0.05);
  border-color: rgba(217, 119, 6, 0.3);
  transform: translateY(-2px);
}

.industry-item__num {
  font-family: var(--brb-font-display);
  font-size: 12px;
  font-weight: 400;
  color: var(--brb-accent);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.industry-item__name {
  font-family: var(--brb-font-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.industry-item__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--brb-text-on-dark-muted);
}

/* ============================================================
   Principles section
   ============================================================ */
.wd-principles {
  padding: var(--brb-section-pad) 0;
  background: var(--brb-surface);
  border-top: 1px solid var(--brb-border);
}

.wd-principles__head {
  max-width: 680px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.wd-principles__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.wd-principles__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--brb-text);
}

.wd-principles__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-principles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .wd-principles__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .wd-principles__grid { grid-template-columns: 1fr; }
}

.principle {
  background: #FFFFFF;
  border: 1px solid var(--brb-border);
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 300ms var(--brb-ease),
              box-shadow 300ms var(--brb-ease),
              border-color 300ms var(--brb-ease);
}

.principle:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.1);
  border-color: rgba(217, 119, 6, 0.3);
}

.principle__icon {
  font-size: 24px;
  color: var(--brb-accent);
  line-height: 1;
  font-family: var(--brb-font-display);
}

.principle__title {
  font-family: var(--brb-font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--brb-text);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.principle__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--brb-text-muted);
  margin: 0;
}

/* ============================================================
   Proof strip
   ============================================================ */
.wd-proof.wd-proof--dark,
.wd-proof:has(.wd-proof__stat) {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid rgba(250, 247, 242, 0.06);
}

.wd-proof.wd-proof--dark .wd-proof__inner,
.wd-proof:has(.wd-proof__stat) .wd-proof__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 48px);
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1000ms var(--brb-ease-entrance), transform 1000ms var(--brb-ease-entrance);
}

.wd-proof.wd-proof--dark .wd-proof__inner.is-visible,
.wd-proof:has(.wd-proof__stat) .wd-proof__inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wd-proof--dark .wd-proof__stat,
.wd-proof:has(.wd-proof__stat) .wd-proof__stat {
  flex: 1;
  min-width: 140px;
  text-align: center;
}

.wd-proof--dark .wd-proof__value,
.wd-proof:has(.wd-proof__stat) .wd-proof__value {
  font-family: var(--brb-font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brb-text-on-dark);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.wd-proof--dark .wd-proof__label,
.wd-proof:has(.wd-proof__stat) .wd-proof__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
}

.wd-proof--dark .wd-proof__divider,
.wd-proof:has(.wd-proof__stat) .wd-proof__divider {
  width: 1px;
  height: 56px;
  background: rgba(250, 247, 242, 0.1);
}

@media (max-width: 720px) {
  .wd-proof__divider { display: none; }
  .wd-proof__stat { min-width: 45%; }
}

/* ============================================================
   Final CTA
   ============================================================ */
.wd-final.wd-final--dark,
.wd-final:has(.wd-final__ctas) {
  padding: clamp(60px, 8vw, 100px) 0;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  text-align: center;
}

.wd-final.wd-final--dark .wd-final__inner .eyebrow,
.wd-final:has(.wd-final__ctas) .wd-final__inner .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.wd-final.wd-final--dark .wd-final__title,
.wd-final:has(.wd-final__ctas) .wd-final__title {
  font-family: var(--brb-font-display);
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  margin-bottom: 28px;
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.wd-final.wd-final--dark .wd-final__title em,
.wd-final:has(.wd-final__ctas) .wd-final__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-final.wd-final--dark .wd-final__body,
.wd-final:has(.wd-final__ctas) .wd-final__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  margin: 0 auto 36px;
  max-width: 56ch;
}

.wd-final__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.wd-final__contact {
  font-size: 14px;
  color: var(--brb-text-on-dark-muted);
  letter-spacing: 0.02em;
}

.wd-final__contact a {
  color: var(--brb-text-on-dark);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}

.wd-final__contact a:hover {
  color: var(--brb-accent);
}


/* ============================================================
   Service hero — two-column with visual on the right
   Scoped to only apply when the hero uses the new split layout
   (i.e. when wd-hero__content is present). The Web Design page
   uses the original full-width hero and is unaffected.
   ============================================================ */
.wd-hero__inner:has(.wd-hero__content) {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
}

@media (max-width: 960px) {
  .wd-hero__inner:has(.wd-hero__content) {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

.wd-hero__content {
  max-width: 640px;
}

.wd-hero__visual {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  animation: wd-hero-visual-in 1200ms var(--brb-ease-entrance) 700ms forwards;
}

@keyframes wd-hero-visual-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 960px) {
  .wd-hero__visual {
    max-width: 440px;
    margin: 0 auto;
  }
}

/* ==========================================================
   SEO hero visual — mini ranking cards
   ========================================================== */
.seo-hero-viz {
  position: relative;
  padding: 28px;
  background: rgba(250, 247, 242, 0.03);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 14px;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.4),
    0 15px 30px -10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.seo-hero-viz::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.1), transparent 70%);
  pointer-events: none;
}

.seo-hero-viz__query {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  margin-bottom: 18px;
  position: relative;
}

.seo-hero-viz__query-icon {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--brb-text-on-dark-muted);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.seo-hero-viz__query-icon::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 8px;
  height: 2px;
  background: var(--brb-text-on-dark-muted);
  transform: rotate(45deg);
}

.seo-hero-viz__query-text {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: var(--brb-text-on-dark-muted);
}

.seo-hero-viz__results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.seo-hero-result {
  padding: 12px 14px;
  background: rgba(250, 247, 242, 0.04);
  border-radius: 8px;
  border: 1px solid transparent;
  position: relative;
  animation: seo-hero-result-in 600ms var(--brb-ease-entrance) backwards;
}

.seo-hero-result:nth-child(1) { animation-delay: 1000ms; }
.seo-hero-result:nth-child(2) { animation-delay: 1200ms; }
.seo-hero-result:nth-child(3) { animation-delay: 1400ms; }

@keyframes seo-hero-result-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.seo-hero-result--featured {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.4);
  animation: seo-hero-result-in 600ms var(--brb-ease-entrance) 1000ms backwards,
             seo-hero-glow 3s ease-in-out 1800ms infinite;
}

@keyframes seo-hero-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.12); }
}

.seo-hero-result__rank {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--brb-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

.seo-hero-result__rank--muted {
  color: var(--brb-text-on-dark-subtle);
}

.seo-hero-result__url {
  font-size: 11px;
  color: var(--brb-text-on-dark-muted);
  margin-bottom: 3px;
}

.seo-hero-result--featured .seo-hero-result__url {
  color: var(--brb-accent);
  font-weight: 500;
}

.seo-hero-result__title {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #B4C8FF;
  font-weight: 400;
  line-height: 1.35;
  margin: 0;
}

.seo-hero-result--featured .seo-hero-result__title {
  color: #D8E3FF;
}

.seo-hero-viz__badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--brb-accent);
  color: #FFFFFF;
  font-family: var(--brb-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
  animation: seo-hero-badge-in 700ms var(--brb-ease-entrance) 1600ms backwards;
}

@keyframes seo-hero-badge-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================
   Paid Ads hero visual — ROAS growth chart
   ========================================================== */
.ads-hero-viz {
  position: relative;
  padding: 28px;
  background: rgba(250, 247, 242, 0.03);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 14px;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.4),
    0 15px 30px -10px rgba(0, 0, 0, 0.25);
}

.ads-hero-viz::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at bottom right, rgba(217, 119, 6, 0.12), transparent 70%);
  pointer-events: none;
}

.ads-hero-viz__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.ads-hero-viz__label {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ads-hero-viz__label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7ACC8F;
  animation: ads-hero-dot-pulse 2s ease-in-out infinite;
}

@keyframes ads-hero-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(122, 204, 143, 0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 5px rgba(122, 204, 143, 0); }
}

.ads-hero-viz__roas {
  text-align: right;
}

.ads-hero-viz__roas-value {
  font-family: var(--brb-font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brb-accent);
  font-variant-numeric: tabular-nums;
  animation: ads-hero-roas-in 800ms var(--brb-ease-entrance) 1600ms backwards;
}

@keyframes ads-hero-roas-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.ads-hero-viz__roas-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  margin-top: 4px;
  font-weight: 500;
}

.ads-hero-viz__chart {
  position: relative;
  height: 120px;
  margin: 8px 0 16px;
}

.ads-hero-viz__chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ads-hero-viz__chart-grid {
  stroke: rgba(250, 247, 242, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.ads-hero-viz__chart-area {
  fill: rgba(217, 119, 6, 0.15);
  opacity: 0;
  animation: ads-hero-area-in 1200ms var(--brb-ease-entrance) 1200ms forwards;
}

@keyframes ads-hero-area-in {
  to { opacity: 1; }
}

.ads-hero-viz__chart-line-revenue {
  fill: none;
  stroke: var(--brb-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: ads-hero-line-draw 1800ms var(--brb-ease-entrance) 1000ms forwards;
  filter: drop-shadow(0 2px 4px rgba(217, 119, 6, 0.3));
}

.ads-hero-viz__chart-line-spend {
  fill: none;
  stroke: rgba(138, 138, 138, 0.7);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: ads-hero-line-draw 1800ms var(--brb-ease-entrance) 1200ms forwards;
}

@keyframes ads-hero-line-draw {
  to { stroke-dashoffset: 0; }
}

.ads-hero-viz__chart-endpoint {
  fill: var(--brb-accent);
  r: 5;
  opacity: 0;
  animation: ads-hero-endpoint-in 600ms var(--brb-ease-entrance) 2600ms forwards;
}

@keyframes ads-hero-endpoint-in {
  to { opacity: 1; }
}

.ads-hero-viz__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(250, 247, 242, 0.06);
}

.ads-hero-viz__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ads-hero-viz__stat-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
}

.ads-hero-viz__stat-value {
  font-family: var(--brb-font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.ads-hero-viz__stat-value--up {
  color: #7ACC8F;
}

.ads-hero-viz__legend {
  display: flex;
  gap: 14px;
  font-size: 10px;
  color: var(--brb-text-on-dark-muted);
  margin-top: 8px;
}

.ads-hero-viz__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.05em;
}

.ads-hero-viz__legend-dot {
  width: 8px;
  height: 2px;
  border-radius: 1px;
}

.ads-hero-viz__legend-dot--revenue { background: var(--brb-accent); }
.ads-hero-viz__legend-dot--spend { background: rgba(138, 138, 138, 0.7); }


/* ============================================================
   Service hero — headline sizing adjustment for two-column
   The Web Design page uses the hero full-width; SEO and Paid Ads
   use the two-column split layout, which needs a slightly smaller
   headline to fit the narrower content column.
   ============================================================ */
.wd-hero__content .wd-hero__headline {
  font-size: clamp(40px, 5.5vw, 64px);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.wd-hero__content .wd-hero__body {
  font-size: clamp(16px, 1.3vw, 18px);
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.wd-hero__content .wd-hero__ctas {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* ============================================================
   Audit page · Hero — two-column with Trailhead PDF cover visual
   ============================================================ */
.audit-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  max-width: 1240px;
  margin-inline: auto;
}

@media (max-width: 960px) {
  .audit-hero__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

.audit-hero__content {
  max-width: 620px;
}

.audit-hero__visual {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  animation: audit-hero-visual-in 1100ms var(--brb-ease-entrance) 500ms forwards;
}

@keyframes audit-hero-visual-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Trailhead PDF cover mock — pixel-targets the canonical Worker
   M2 PDF cover design. Score 73 is hardcoded in the markup; this
   only handles layout and typography.

   Aspect ratio is deliberately preserved on mobile per the
   strategy-audit copy lock: the 8.5:11 print proportion signals
   "this is the actual PDF you'll get back" and shrinking below
   that defeats the dual-path hero's visual hook. On a 375px
   viewport that produces a ~440px-tall card — acceptable
   tradeoff for the visual integrity. */
.trailhead-cover {
  position: relative;
  background: var(--brb-surface);
  border-radius: 6px;
  padding: 36px 36px 0;
  box-shadow:
    0 24px 60px rgba(26, 26, 26, 0.18),
    0 6px 18px rgba(26, 26, 26, 0.08);
  overflow: hidden;
  aspect-ratio: 8.5 / 11;
  max-width: 420px;
  margin-left: auto;
  font-family: var(--brb-font-body);
  color: var(--brb-text);
}

@media (max-width: 960px) {
  .trailhead-cover { margin: 0 auto; }
}

.trailhead-cover__brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  margin-bottom: 0.4in;
}

.trailhead-cover__brand-tail {
  color: var(--brb-accent);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.trailhead-cover__divider {
  width: 60px;
  height: 2px;
  background: var(--brb-accent);
  margin-bottom: 0.4in;
}

.trailhead-cover__lede {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-subtle);
  margin-bottom: 8pt;
}

.trailhead-cover__domain {
  font-family: var(--brb-font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--brb-text);
  margin-bottom: 12pt;
}

.trailhead-cover__date {
  font-size: 11px;
  color: var(--brb-text-muted);
}

.trailhead-cover__score-block {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 1.2in;
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.trailhead-cover__score {
  font-family: var(--brb-font-display);
  font-size: 130px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--brb-accent);
}

.trailhead-cover__score-meta {
  font-size: 11px;
  color: var(--brb-text-muted);
  letter-spacing: 0.02em;
}

.trailhead-cover__strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.4in;
  background: var(--brb-accent);
}


/* ============================================================
   Web Design page · "See the tool" CTA card
   Replaces the inline Trailhead form previously hosted on
   page-web-design.php Section 02. Single anchor link to
   /free-strategy-audit/#trailhead — no widget, no Turnstile.
   ============================================================ */
.wd-audit-cta {
  background: var(--brb-surface);
  padding: 64px 0 var(--brb-section-pad);
  position: relative;
  border-top: 1px solid var(--brb-border);
}

.wd-audit-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.wd-audit-cta__head {
  margin-bottom: 36px;
}

.wd-audit-cta__head .eyebrow {
  display: inline-block;
  margin-bottom: 20px;
}

.wd-audit-cta__headline {
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--brb-text);
  margin: 0 0 20px;
}

.wd-audit-cta__headline em {
  font-style: italic;
  color: var(--brb-accent);
}

.wd-audit-cta__sub {
  font-family: var(--brb-font-body);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--brb-text-muted);
  max-width: 620px;
  margin: 0 auto;
}

.wd-audit-cta__action {
  margin: 32px 0 0;
  text-align: center;
}


/* ============================================================
   About · subtle "more about industries" link
   ============================================================ */
.clients__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
  font-family: var(--brb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-text);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 3px;
  transition: color 200ms var(--brb-ease), gap 200ms var(--brb-ease);
}

.clients__more-link:hover {
  color: var(--brb-accent);
  gap: 12px;
}

.clients__more-link-arrow {
  transition: transform 200ms var(--brb-ease);
}

.clients__more-link:hover .clients__more-link-arrow {
  transform: translateX(2px);
}

.clients__more-wrap {
  text-align: center;
  margin-top: clamp(32px, 4vw, 56px);
}


/* ============================================================
   Scroll-to-top button — sitewide
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border: 1px solid var(--brb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 300ms var(--brb-ease),
              visibility 300ms var(--brb-ease),
              transform 300ms var(--brb-ease),
              background 200ms var(--brb-ease);
  z-index: 90;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-family: var(--brb-font-body);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--brb-accent);
  color: var(--brb-anchor);
  transform: translateY(-2px);
}

.scroll-top svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms var(--brb-ease);
}

.scroll-top:hover svg {
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .scroll-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}


/* ============================================================
   Homepage hero — split layout with composite visual on right
   Proportions match .wd-hero--has-visual on service pages so the
   text/visual balance feels consistent across the site.
   ============================================================ */
.hero__inner--split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
}

@media (max-width: 1000px) {
  .hero__inner--split {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

.hero__content {
  max-width: 620px;
  position: relative;
  z-index: 2;
}

/* When the homepage hero has the split layout, use a smaller
   headline size than the full-width variant — so the text doesn't
   overpower the visual on the right. The cap is lower than the
   service page cap (48px vs 64px) because the homepage headline
   uses complete sentences per line, not short phrases. */
.hero__inner--split .hero__headline {
  font-size: clamp(32px, 4vw, 48px);
  max-width: 32ch;
  text-wrap: pretty;
}

.hero__inner--split .hero__subhead {
  max-width: 46ch;
}

.hero__visual {
  position: relative;
  width: 100%;
  height: 440px;
  opacity: 0;
  animation: hero-viz-in 1200ms var(--brb-ease-entrance) 700ms forwards;
}

@media (max-width: 1000px) {
  .hero__visual { height: 560px; max-width: 520px; margin: 0 auto; }
}

@keyframes hero-viz-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO VIZ v2 — Two-card composition (site mockup + live dashboard)
   Homepage hero visual: website mockup behind, analytics dashboard in front.
   Legacy 3-card styles are preserved below as .hero-viz-legacy-* for reuse
   on service pages (Web Design / SEO / Paid Ads).
   ============================================================ */

.hero-viz-card {
  position: absolute;
  background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 10px;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(217, 119, 6, 0.04) inset;
  color: var(--brb-surface);
  overflow: hidden;
  transition: transform 500ms var(--brb-ease),
              box-shadow 500ms var(--brb-ease);
}

.hero-viz-card--site      { animation: hero-viz-float-site 7s ease-in-out infinite; }
.hero-viz-card--dashboard { animation: hero-viz-float-dash 8s ease-in-out -3s infinite; }

@keyframes hero-viz-float-site {
  0%, 100% { transform: translate(0, 0) rotate(var(--r, -1.5deg)); }
  50%      { transform: translate(0, -6px) rotate(var(--r, -1.5deg)); }
}
@keyframes hero-viz-float-dash {
  0%, 100% { transform: translate(0, 0) rotate(var(--r, 2deg)); }
  50%      { transform: translate(0, -4px) rotate(var(--r, 2deg)); }
}

.hero__visual:hover .hero-viz-card {
  transition: transform 200ms var(--brb-ease),
              box-shadow 500ms var(--brb-ease);
}

/* ----- Card 1 — Website mockup (tilted left, back) ----- */
.hero-viz-card--site {
  --r: -1.5deg;
  transform: rotate(-1.5deg);
  top: 10px;
  left: 0;
  width: 62%;
  z-index: 1;
}

.hero__visual:hover .hero-viz-card--site {
  animation-play-state: paused;
  transform: rotate(-0.5deg) translateY(-4px)
             translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -8px), 0);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(217, 119, 6, 0.08) inset;
}

.site-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #0F0F0F;
  border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}
.site-bar__dots { display: flex; gap: 5px; }
.site-bar__dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(250, 247, 242, 0.15);
}
.site-bar__dots span:first-child   { background: rgba(217, 80, 80, 0.45); }
.site-bar__dots span:nth-child(2)  { background: rgba(217, 170, 80, 0.45); }
.site-bar__dots span:nth-child(3)  { background: rgba(80, 217, 130, 0.45); }
.site-bar__url {
  flex: 1;
  background: rgba(250, 247, 242, 0.05);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  color: rgba(250, 247, 242, 0.55);
  font-family: 'Inter', sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}
.site-bar__url::before {
  content: '';
  width: 9px; height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.6;
  flex-shrink: 0;
}
.site-bar__url-text {
  overflow: hidden;
  white-space: nowrap;
}
.site-bar__cursor {
  display: inline-block;
  width: 1px;
  background: var(--brb-accent);
  height: 12px;
  vertical-align: middle;
  animation: site-cursor-blink 1s step-end infinite;
  margin-left: 1px;
}
@keyframes site-cursor-blink { 50% { opacity: 0; } }
.site-bar__url-text.is-done + .site-bar__cursor { display: none; }

.site-body {
  padding: 22px 22px 18px;
  background: linear-gradient(180deg, #1A1A1A 0%, #151515 100%);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) 900ms forwards;
}
.site-nav__logo {
  width: 48px; height: 8px;
  background: var(--brb-surface);
  border-radius: 2px;
  opacity: 0.85;
}
.site-nav__links { display: flex; gap: 10px; }
.site-nav__links span {
  width: 28px; height: 5px;
  background: rgba(250, 247, 242, 0.25);
  border-radius: 2px;
}

.site-hero-section {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  margin-bottom: 16px;
}
.site-hero-section__headline {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--brb-surface);
  line-height: 1.25;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) 1100ms forwards;
}
.site-hero-section__headline em {
  color: var(--brb-accent);
  font-style: italic;
}
.site-hero-section__sub {
  height: 4px;
  background: rgba(250, 247, 242, 0.2);
  border-radius: 2px;
  margin-bottom: 4px;
  width: 70%;
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) 1250ms forwards;
}
.site-hero-section__sub.second {
  animation-delay: 1330ms;
  width: 50%;
  margin-bottom: 12px;
}
.site-hero-section__cta {
  display: inline-block;
  background: var(--brb-accent);
  color: var(--brb-surface);
  font-size: 9px;
  padding: 5px 10px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  font-weight: 500;
  opacity: 0;
  transform: translateY(4px);
  animation: site-el-in 500ms var(--brb-ease-entrance) 1450ms forwards;
  transition: background 250ms var(--brb-ease),
              transform 250ms var(--brb-ease),
              box-shadow 250ms var(--brb-ease);
}
.hero-viz-card--site:hover .site-hero-section__cta {
  background: #E8842A;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
}

.site-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.site-grid__cell {
  aspect-ratio: 1.2;
  background: rgba(250, 247, 242, 0.04);
  border: 1px solid rgba(250, 247, 242, 0.06);
  border-radius: 3px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) forwards;
}
.site-grid__cell:nth-child(1) { animation-delay: 1600ms; }
.site-grid__cell:nth-child(2) { animation-delay: 1680ms; }
.site-grid__cell:nth-child(3) { animation-delay: 1760ms; }
.site-grid__cell-line {
  height: 3px;
  background: rgba(250, 247, 242, 0.25);
  border-radius: 1px;
  margin-bottom: 3px;
}
.site-grid__cell-line--short { width: 60%; }

@keyframes site-el-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Card 2 — Analytics dashboard (tilted right, front, overlaps) ----- */
.hero-viz-card--dashboard {
  --r: 2deg;
  transform: rotate(2deg);
  top: 180px;
  right: 0;
  width: 58%;
  padding: 18px 20px;
  z-index: 2;
}

.hero__visual:hover .hero-viz-card--dashboard {
  animation-play-state: paused;
  transform: rotate(1deg) translateY(-6px)
             translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 8px), 0);
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(217, 119, 6, 0.08) inset;
}

.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) 1000ms forwards;
}
.dash-head__eyebrow {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.5);
  margin-bottom: 4px;
}
.dash-head__title {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--brb-surface);
  letter-spacing: -0.005em;
}
.dash-head__title em {
  font-style: italic;
  color: var(--brb-accent);
}
.dash-head__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: rgba(138, 211, 192, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-head__live::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brb-mint);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--brb-mint);
  animation: dash-live-pulse 2s ease-in-out infinite;
}
@keyframes dash-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dash-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.dash-kpi {
  padding: 8px 9px 9px;
  background: rgba(250, 247, 242, 0.03);
  border: 1px solid rgba(250, 247, 242, 0.06);
  border-radius: 5px;
  transition: background 250ms var(--brb-ease),
              border-color 250ms var(--brb-ease),
              transform 250ms var(--brb-ease);
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) forwards;
}
.dash-kpi:nth-child(1) { animation-delay: 1150ms; }
.dash-kpi:nth-child(2) { animation-delay: 1230ms; }
.dash-kpi:nth-child(3) { animation-delay: 1310ms; }
.dash-kpi:hover {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.25);
  transform: translateY(-1px);
}
.dash-kpi__label {
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.45);
  margin-bottom: 3px;
}
.dash-kpi__value {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-surface);
  letter-spacing: -0.01em;
  line-height: 1;
}
.dash-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 8px;
  color: var(--brb-mint);
  margin-top: 3px;
  font-weight: 500;
}
.dash-kpi__delta::before { content: '↑'; font-size: 9px; }

.dash-chart {
  position: relative;
  height: 110px;
  margin-bottom: 8px;
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) 1400ms forwards;
  cursor: crosshair;
}
.dash-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.dash-chart__grid {
  stroke: rgba(250, 247, 242, 0.06);
  stroke-width: 0.5;
  stroke-dasharray: 2 3;
}
.dash-chart__area {
  fill: url(#dashAreaGrad);
  opacity: 0;
  animation: dash-area-in 900ms var(--brb-ease-entrance) 1700ms forwards;
}
@keyframes dash-area-in { to { opacity: 1; } }
.dash-chart__line {
  fill: none;
  stroke: var(--brb-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: dash-line-draw 1600ms var(--brb-ease-entrance) 1500ms forwards;
  filter: drop-shadow(0 0 3px rgba(217, 119, 6, 0.3));
}
@keyframes dash-line-draw { to { stroke-dashoffset: 0; } }
.dash-chart__dot {
  fill: var(--brb-accent);
  opacity: 0;
  animation: dash-dot-in 300ms var(--brb-ease-entrance) forwards;
}
.dash-chart__dot:nth-child(1) { animation-delay: 1700ms; }
.dash-chart__dot:nth-child(2) { animation-delay: 1800ms; }
.dash-chart__dot:nth-child(3) { animation-delay: 1900ms; }
.dash-chart__dot:nth-child(4) { animation-delay: 2000ms; }
.dash-chart__dot:nth-child(5) { animation-delay: 2100ms; }
.dash-chart__dot:nth-child(6) { animation-delay: 2200ms; }
.dash-chart__dot:nth-child(7) { animation-delay: 2300ms; }
.dash-chart__dot--last {
  r: 4;
  fill: var(--brb-accent);
  filter: drop-shadow(0 0 6px var(--brb-accent));
  animation: dash-dot-in 300ms var(--brb-ease-entrance) 2300ms forwards,
             dash-dot-pulse 2.4s ease-in-out 2.6s infinite;
}
@keyframes dash-dot-in { to { opacity: 1; } }
@keyframes dash-dot-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px var(--brb-accent)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 10px var(--brb-accent)); }
}
.dash-chart__cursor {
  stroke: rgba(217, 119, 6, 0.4);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--brb-ease);
}
.dash-chart:hover .dash-chart__cursor { opacity: 1; }

.dash-chart__tooltip {
  position: absolute;
  top: -8px;
  background: rgba(250, 247, 242, 0.96);
  color: var(--brb-anchor);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 200ms var(--brb-ease);
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  z-index: 3;
}
.dash-chart__tooltip::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  background: rgba(250, 247, 242, 0.96);
}
.dash-chart:hover .dash-chart__tooltip { opacity: 1; }

.dash-chart__xlabels {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 0.05em;
  color: rgba(250, 247, 242, 0.4);
  padding: 0 2px;
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) 2500ms forwards;
}

.dash-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(250, 247, 242, 0.06);
  font-size: 9px;
  color: rgba(250, 247, 242, 0.45);
  letter-spacing: 0.04em;
  opacity: 0;
  animation: site-el-in 500ms var(--brb-ease-entrance) 2600ms forwards;
}
.dash-foot__source {
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* Mobile: cards stack vertically with enough container height for both
   to render without overflowing, plus a bit of bottom breathing room
   before the next section. */
@media (max-width: 1000px) {
  .hero-viz-card--site      { width: 75%; top: 0;    left: 0; }
  .hero-viz-card--dashboard { width: 75%; top: 260px; right: 0; }
}
@media (max-width: 520px) {
  .hero__visual { height: 540px; }
  .hero-viz-card--site      { width: 82%; }
  .hero-viz-card--dashboard { width: 82%; top: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-viz-card,
  .site-nav, .site-hero-section__headline,
  .site-hero-section__sub, .site-hero-section__cta, .site-grid__cell,
  .dash-head, .dash-kpi, .dash-chart, .dash-chart__area,
  .dash-chart__line, .dash-chart__dot, .dash-chart__dot--last,
  .dash-chart__xlabels, .dash-foot {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ============================================================
   LEGACY HERO VIZ — preserved for reuse on service pages.
   (These classes originally powered the 3-card homepage hero;
    they now live on the Web Design / SEO / Paid Ads pages.)
   ============================================================ */
.hero-viz-legacy-card {
  position: absolute;
  background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 8px;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(217, 119, 6, 0.03) inset;
  transition: transform 600ms var(--brb-ease);
  color: var(--brb-surface);
}
.hero-viz-legacy-card--float {
  animation: hero-viz-legacy-float 7s ease-in-out infinite;
}
@keyframes hero-viz-legacy-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-6px) rotate(var(--r, 0deg)); }
}

/* --- Legacy site mockup (used on Web Design page) --- */
.hero-viz-legacy-site {
  padding: 0;
  overflow: hidden;
}
.hero-viz-legacy-site__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #0F0F0F;
  border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}
.hero-viz-legacy-site__dots { display: flex; gap: 4px; }
.hero-viz-legacy-site__dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(250, 247, 242, 0.15);
}
.hero-viz-legacy-site__url {
  flex: 1;
  background: rgba(250, 247, 242, 0.05);
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 11px;
  color: rgba(250, 247, 242, 0.55);
  font-family: 'Inter', sans-serif;
}
.hero-viz-legacy-site__body {
  padding: 22px 22px 24px;
  background: linear-gradient(180deg, #1A1A1A 0%, #151515 100%);
}
.hero-viz-legacy-site__logo {
  width: 60px; height: 10px;
  background: var(--brb-surface);
  border-radius: 2px;
  margin-bottom: 18px;
  opacity: 0.9;
}
.hero-viz-legacy-site__line {
  height: 6px;
  background: rgba(250, 247, 242, 0.15);
  border-radius: 2px;
  margin-bottom: 8px;
}
.hero-viz-legacy-site__line--long { width: 90%; }
.hero-viz-legacy-site__line--med  { width: 60%; }
.hero-viz-legacy-site__btn {
  width: 80px; height: 20px;
  background: var(--brb-accent);
  border-radius: 3px;
  margin-top: 12px;
}

/* --- Legacy metric tile (used on Paid Ads page) --- */
.hero-viz-legacy-metric {
  padding: 22px 24px;
  color: var(--brb-surface);
}
.hero-viz-legacy-metric__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
  margin-bottom: 8px;
}
.hero-viz-legacy-metric__value {
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 500;
  color: var(--brb-accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 12px;
}
.hero-viz-legacy-metric__spark {
  width: 100%;
  height: 30px;
  color: var(--brb-accent);
}
.hero-viz-legacy-metric__spark svg {
  width: 100%;
  height: 100%;
}
.hero-viz-legacy-metric__spark-path {
  opacity: 0.85;
}

/* --- Legacy SERP snippet (used on SEO page) --- */
.hero-viz-legacy-serp {
  padding: 16px 18px;
  color: var(--brb-surface);
}
.hero-viz-legacy-serp__tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-mint);
  padding: 2px 8px;
  border: 1px solid rgba(138, 211, 192, 0.35);
  border-radius: 3px;
  margin-bottom: 10px;
}
.hero-viz-legacy-serp__site {
  font-size: 11px;
  color: rgba(250, 247, 242, 0.55);
  margin-bottom: 4px;
}
.hero-viz-legacy-serp__title {
  height: 10px;
  width: 75%;
  background: rgba(250, 247, 242, 0.2);
  border-radius: 2px;
  margin-bottom: 8px;
}
.hero-viz-legacy-serp__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--brb-text-on-dark-muted);
}
.hero-viz-legacy-serp__stars {
  color: var(--brb-accent);
  letter-spacing: 1px;
}


/* ============================================================
   Web Design hero — composite visual on right
   ============================================================ */
.wd-hero--has-visual .wd-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
}

@media (max-width: 1000px) {
  .wd-hero--has-visual .wd-hero__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

.wd-hero--has-visual .wd-hero__eyebrow,
.wd-hero--has-visual .wd-hero__headline,
.wd-hero--has-visual .wd-hero__sub,
.wd-hero--has-visual .wd-hero__actions {
  grid-column: 1;
}

/* Slightly smaller headline when paired with a visual so it sits
   comfortably in the left column without blowing out on line 4 */
.wd-hero--has-visual .wd-hero__headline {
  font-size: clamp(36px, 5vw, 64px);
  max-width: 14ch;
}

.wd-hero--has-visual .wd-hero__sub {
  max-width: 46ch;
}

.wd-hero__visual--design {
  grid-column: 2;
  grid-row: 1 / span 4;
  position: relative;
  width: 100%;
  height: 400px;
  opacity: 0;
  animation: hero-viz-in 1200ms var(--brb-ease-entrance) 700ms forwards;
}

@media (max-width: 1000px) {
  .wd-hero__visual--design {
    grid-column: 1;
    grid-row: auto;
    height: 340px;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* Desktop browser frame — primary */
.wd-hero-mock {
  position: relative;
  width: 100%;
  min-height: clamp(280px, 28vw, 400px);
  background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 10px;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(217, 119, 6, 0.04) inset;
  overflow: hidden;
}

.wd-hero-mock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(250, 247, 242, 0.02);
  border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}

.wd-hero-mock__dots {
  display: flex;
  gap: 5px;
}

.wd-hero-mock__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(250, 247, 242, 0.15);
}

.wd-hero-mock__url {
  font-family: var(--brb-font-body);
  font-size: 10px;
  color: var(--brb-text-on-dark-subtle);
  letter-spacing: 0.02em;
}

.wd-hero-mock__canvas {
  padding: 24px 22px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  min-height: 220px;
  position: relative;
}

/* Grid backdrop on the canvas — subtle design-token feeling */
.wd-hero-mock__canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250,247,242,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,247,242,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.wd-hero-mock__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.wd-hero-mock__headline {
  height: 24px;
  background: linear-gradient(90deg, var(--brb-text-on-dark) 0%, rgba(250,247,242,0.3) 100%);
  border-radius: 3px;
  width: 90%;
}

.wd-hero-mock__line {
  height: 6px;
  border-radius: 2px;
  background: rgba(250, 247, 242, 0.12);
}

.wd-hero-mock__line--short { width: 55%; }
.wd-hero-mock__line--med   { width: 75%; }

.wd-hero-mock__btn {
  width: 100px;
  height: 26px;
  background: var(--brb-accent);
  border-radius: 4px;
  margin-top: 8px;
}

.wd-hero-mock__image {
  background:
    radial-gradient(circle at 30% 30%, rgba(217, 119, 6, 0.15) 0%, transparent 60%),
    linear-gradient(135deg, rgba(250,247,242,0.08), rgba(250,247,242,0.02));
  border-radius: 4px;
  height: 100%;
  min-height: 140px;
  border: 1px solid rgba(250, 247, 242, 0.06);
  position: relative;
  overflow: hidden;
}

.wd-hero-mock__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(217, 119, 6, 0.08) 60%, transparent 80%);
}

/* Mobile mockup — overlapping right-bottom */
.wd-hero-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32%;
  aspect-ratio: 9 / 19;
  background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
  border: 1px solid rgba(250, 247, 242, 0.1);
  border-radius: 20px;
  padding: 12px 8px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
  animation: hero-viz-float 8s ease-in-out -2s infinite;
  --r: 3deg;
  transform: rotate(3deg);
}

.wd-hero-phone__notch {
  width: 40%;
  height: 4px;
  background: rgba(250, 247, 242, 0.15);
  border-radius: 2px;
  margin: 0 auto 14px;
}

.wd-hero-phone__header {
  height: 12px;
  background: linear-gradient(90deg, var(--brb-accent) 0%, rgba(217,119,6,0.3) 100%);
  border-radius: 2px;
  margin: 0 6px 10px;
}

.wd-hero-phone__body {
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wd-hero-phone__line {
  height: 4px;
  border-radius: 2px;
  background: rgba(250, 247, 242, 0.1);
}

.wd-hero-phone__line--short { width: 50%; }
.wd-hero-phone__line--med { width: 75%; }

.wd-hero-phone__card {
  height: 44px;
  background: rgba(250, 247, 242, 0.04);
  border: 1px solid rgba(250, 247, 242, 0.06);
  border-radius: 4px;
  margin: 6px 0;
}

.wd-hero-phone__btn {
  height: 14px;
  background: var(--brb-accent);
  border-radius: 3px;
  margin-top: 6px;
}


/* ============================================================
   Footer logo — clickable
   ============================================================ */
.footer-brand__logo-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 12px;
  transition: opacity 200ms var(--brb-ease);
}

.footer-brand__logo-link:hover {
  opacity: 0.7;
}

.footer-brand__logo-link:hover .dot {
  color: var(--brb-accent);
}


/* ============================================================
   ============================================================
   INDUSTRIES PAGE
   Single-page editorial overview of the verticals BRB serves.
   Alternating-direction industry blocks with content + vignette.
   ============================================================
   ============================================================ */

/* ============================================================
   Industries · Hero
   ============================================================ */
.ind-hero {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}

.ind-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(217, 119, 6, 0.38) 0%, transparent 100%),
    radial-gradient(ellipse at 0% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
}

/* Orb divs kept in DOM for stability but hidden —
   amber glow is now a corner-anchored gradient on .ind-hero__bg */
.ind-hero__orb { display: none; }

.ind-hero__grid {
  /* Grid lines removed — kept the class for DOM stability, but it now renders nothing.
     If you ever want the grid back, restore the previous background-image rules. */
  display: none;
}

.ind-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.ind-hero .eyebrow {
  margin-bottom: clamp(24px, 3vw, 36px);
  display: inline-block;
}

.ind-hero__headline {
  font-family: var(--brb-font-display);
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.ind-hero__headline .line {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  animation: fadeUp 1000ms var(--brb-ease-entrance) forwards;
}

.ind-hero__headline .line:nth-child(1) { animation-delay: 200ms; }
.ind-hero__headline .line:nth-child(2) { animation-delay: 400ms; }

.ind-hero__headline em {
  font-style: italic;
  color: var(--brb-accent);
}

.ind-hero__headline .dot {
  color: var(--brb-accent);
  font-style: normal;
}

.ind-hero__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 60ch;
  margin: 0 auto clamp(40px, 5vw, 56px);
  opacity: 0;
  animation: fadeUp 1000ms var(--brb-ease-entrance) 650ms forwards;
}

/* Jump nav */
.ind-hero__jump {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 1000ms var(--brb-ease-entrance) 900ms forwards;
}

.ind-hero__jump a {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--brb-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--brb-text-on-dark);
  border: 1px solid rgba(250, 247, 242, 0.18);
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: background 200ms var(--brb-ease),
              border-color 200ms var(--brb-ease),
              color 200ms var(--brb-ease);
}

.ind-hero__jump a:hover {
  background: var(--brb-accent);
  border-color: var(--brb-accent);
  color: var(--brb-anchor);
}

/* ============================================================
   Industries · Blocks (shared)
   Each industry block: two-column with content + vignette
   Alternating bg to create rhythm down the page.
   ============================================================ */
.industry-block {
  padding: clamp(72px, 10vw, 140px) 0;
  position: relative;
}

/* Alternating backgrounds for visual rhythm */
.industry-block--medical { background: var(--brb-surface); }
.industry-block--real-estate {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
}
.industry-block--wineries { background: var(--brb-surface); }
.industry-block--home-services {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
}
.industry-block--professional { background: var(--brb-surface); }

.industry-block__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
}

.industry-block__grid--reversed {
  grid-template-columns: 1fr 1.1fr;
}

.industry-block__grid--reversed .industry-block__content {
  grid-column: 2;
}

.industry-block__grid--reversed .industry-block__visual {
  grid-column: 1;
  grid-row: 1;
}

@media (max-width: 900px) {
  .industry-block__grid,
  .industry-block__grid--reversed {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .industry-block__grid--reversed .industry-block__content,
  .industry-block__grid--reversed .industry-block__visual {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Block content */
.industry-block__label {
  font-family: var(--brb-font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brb-accent);
  font-weight: 500;
  margin-bottom: 20px;
}

.industry-block__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: 28px;
  max-width: 16ch;
}

.industry-block--real-estate .industry-block__title,
.industry-block--home-services .industry-block__title {
  color: var(--brb-text-on-dark);
}

.industry-block__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.industry-block__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin-bottom: 20px;
  max-width: 56ch;
}

.industry-block--real-estate .industry-block__body,
.industry-block--home-services .industry-block__body {
  color: var(--brb-text-on-dark-muted);
}

/* Client list */
.industry-block__clients {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--brb-border);
}

.industry-block--real-estate .industry-block__clients,
.industry-block--home-services .industry-block__clients {
  border-top-color: rgba(250, 247, 242, 0.1);
}

.industry-block__clients-label {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
  font-weight: 500;
  margin-bottom: 10px;
}

.industry-block--real-estate .industry-block__clients-label,
.industry-block--home-services .industry-block__clients-label {
  color: var(--brb-text-on-dark-subtle);
}

.industry-block__clients-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--brb-font-display);
  font-size: 16px;
  color: var(--brb-text);
  line-height: 1.5;
}

.industry-block--real-estate .industry-block__clients-list,
.industry-block--home-services .industry-block__clients-list {
  color: var(--brb-text-on-dark);
}

.industry-block__clients-list li {
  display: inline;
}

.industry-block__clients-list li::after {
  content: ' · ';
  color: var(--brb-accent);
  margin: 0 4px;
}

.industry-block__clients-list li:last-child::after {
  content: '';
  margin: 0;
}

/* Service chips */
.industry-block__services {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.industry-block__service-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--brb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--brb-text);
  background: transparent;
  border: 1px solid var(--brb-border-strong);
  border-radius: 999px;
  transition: background 200ms var(--brb-ease),
              border-color 200ms var(--brb-ease),
              color 200ms var(--brb-ease);
}

.industry-block--real-estate .industry-block__service-chip,
.industry-block--home-services .industry-block__service-chip {
  color: var(--brb-text-on-dark);
  border-color: rgba(250, 247, 242, 0.18);
}

.industry-block__service-chip:hover {
  background: var(--brb-accent);
  border-color: var(--brb-accent);
  color: var(--brb-anchor);
}

/* "Full {industry} marketing strategy" deep-link below the service chips */
.industry-block__deep-link {
  margin-top: 20px;
  font-family: var(--brb-font-body);
  font-size: 14px;
  font-weight: 500;
}
.industry-block__deep-link a {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}
.industry-block__deep-link a:hover {
  color: var(--brb-accent);
}

/* Dark-context variant — real-estate + home-services blocks use --brb-anchor bg */
.industry-block--real-estate .industry-block__deep-link a,
.industry-block--home-services .industry-block__deep-link a {
  color: var(--brb-text-on-dark);
}

/* Vignette (right side visual) */
.industry-vignette {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 10px;
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.25);
}

.industry-block--real-estate .industry-vignette,
.industry-block--home-services .industry-vignette {
  background: var(--brb-surface);
  color: var(--brb-text);
  border-color: var(--brb-border-strong);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.15);
}

/* Accent glow */
.industry-vignette::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.12), transparent 70%);
  pointer-events: none;
}

.industry-vignette__head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  position: relative;
}

.industry-block--real-estate .industry-vignette__head,
.industry-block--home-services .industry-vignette__head {
  border-bottom-color: var(--brb-border);
}

.industry-vignette__eyebrow {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brb-accent);
  font-weight: 500;
}

.industry-vignette__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.industry-vignette__list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--brb-text-on-dark);
}

.industry-block--real-estate .industry-vignette__list li,
.industry-block--home-services .industry-vignette__list li {
  color: var(--brb-text);
}

.industry-vignette__num {
  font-family: var(--brb-font-display);
  font-size: 18px;
  color: var(--brb-accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding-top: 2px;
}

/* ============================================================
   Industries · "Category not listed" section
   ============================================================ */
.ind-outsider {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(64px, 8vw, 100px) 0;
  text-align: center;
  border-top: 1px solid rgba(250, 247, 242, 0.06);
}

.ind-outsider__inner {
  max-width: 720px;
  margin-inline: auto;
}

.ind-outsider .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.ind-outsider__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: 24px;
  color: var(--brb-text-on-dark);
}

.ind-outsider__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.ind-outsider__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
  margin: 0 auto 32px;
}

.ind-outsider__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   Homepage · Industries — link to industries page under the grid
   ============================================================ */
.industries__more {
  text-align: center;
  margin-top: clamp(40px, 5vw, 56px);
}

.industries__more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brb-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-text);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 3px;
  transition: color 200ms var(--brb-ease), gap 200ms var(--brb-ease);
}

.industries__more-link:hover {
  color: var(--brb-accent);
  gap: 12px;
}

.industries__more-link svg {
  transition: transform 200ms var(--brb-ease);
}

.industries__more-link:hover svg {
  transform: translateX(2px);
}


/* ============================================================
   ============================================================
   ANALYTICS PAGE
   Interactive data flow diagram, live hero dashboard preview,
   and the full measurement stack.
   ============================================================
   ============================================================ */

/* ============================================================
   Hero dashboard visual (replaces the standard wd-hero__visual)
   ============================================================ */
.wd-hero__visual:has(.an-hero-dash) {
  height: auto;
  max-width: 540px;
  margin-left: auto;
}

.an-hero-dash {
  background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 10px;
  padding: 18px;
  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(217, 119, 6, 0.04) inset;
  position: relative;
}

.an-hero-dash::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.14), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.an-hero-dash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.08);
  margin-bottom: 16px;
  gap: 16px;
}

.an-hero-dash__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brb-font-body);
  font-size: 12px;
  color: var(--brb-text-on-dark);
  font-weight: 500;
}

.an-hero-dash__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #86efac;
  box-shadow: 0 0 8px rgba(134, 239, 172, 0.5);
  animation: an-hero-dot-pulse 2s ease-in-out infinite;
}

@keyframes an-hero-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.an-hero-dash__tabs {
  display: flex;
  gap: 4px;
}

.an-hero-dash__tab {
  font-family: var(--brb-font-body);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--brb-text-on-dark-subtle);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.an-hero-dash__tab--active {
  background: rgba(217, 119, 6, 0.14);
  color: var(--brb-accent);
}

/* Metric buttons row */
.an-hero-dash__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.an-hero-dash__metric {
  background: rgba(250, 247, 242, 0.03);
  border: 1px solid rgba(250, 247, 242, 0.06);
  border-radius: 6px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: background 200ms var(--brb-ease),
              border-color 200ms var(--brb-ease);
  color: inherit;
  font-family: inherit;
}

.an-hero-dash__metric:hover {
  background: rgba(250, 247, 242, 0.06);
  border-color: rgba(250, 247, 242, 0.12);
}

.an-hero-dash__metric.is-active {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.4);
}

.an-hero-dash__metric-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
  margin-bottom: 4px;
}

.an-hero-dash__metric-value {
  font-family: var(--brb-font-display);
  font-size: 22px;
  color: var(--brb-text-on-dark);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-bottom: 4px;
}

.an-hero-dash__metric.is-active .an-hero-dash__metric-value {
  color: var(--brb-accent);
}

.an-hero-dash__metric-delta {
  font-size: 10px;
  font-weight: 500;
}

.an-hero-dash__metric-delta--up { color: #86efac; }

/* Chart */
.an-hero-dash__chart {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px;
  height: 140px;
}

.an-hero-dash__chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.an-hero-dash__grid-line {
  stroke: rgba(250, 247, 242, 0.06);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.an-hero-dash__line {
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.4));
}


/* ============================================================
   Data flow diagram — the interactive centerpiece
   ============================================================ */
.an-flow {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(72px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
}

.an-flow::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse at center top, rgba(217, 119, 6, 0.06), transparent 60%);
  pointer-events: none;
}

.an-flow__head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  position: relative;
}

.an-flow__head .eyebrow { margin-bottom: 16px; display: inline-block; }

.an-flow__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: 20px;
}

.an-flow__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.an-flow__sub {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 60ch;
  margin: 0 auto;
}

/* Stage container - fades in */
.an-flow__stage {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}

.an-flow__stage.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nodes row */
.an-flow__nodes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: clamp(40px, 5vw, 64px);
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .an-flow__nodes {
    gap: 8px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: thin;
  }
  .an-flow__nodes .an-flow__connector {
    display: none;
  }
}

.an-flow__node {
  background: rgba(250, 247, 242, 0.03);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 8px;
  padding: 18px 16px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--brb-text-on-dark);
  font-family: inherit;
  transition: background 250ms var(--brb-ease),
              border-color 250ms var(--brb-ease),
              transform 250ms var(--brb-ease);
}

.an-flow__node:hover {
  background: rgba(250, 247, 242, 0.06);
  border-color: rgba(250, 247, 242, 0.14);
  transform: translateY(-2px);
}

.an-flow__node.is-active {
  background: rgba(217, 119, 6, 0.1);
  border-color: var(--brb-accent);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.14);
}

.an-flow__node-icon {
  color: var(--brb-text-on-dark-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.an-flow__node.is-active .an-flow__node-icon { color: var(--brb-accent); }

.an-flow__node-label {
  font-family: var(--brb-font-display);
  font-size: 15px;
  color: var(--brb-text-on-dark);
  letter-spacing: -0.01em;
}

.an-flow__node-sub {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brb-text-on-dark-subtle);
  font-weight: 500;
}

/* Connector between nodes */
.an-flow__connector {
  flex: 0 0 36px;
  height: 8px;
  color: rgba(250, 247, 242, 0.2);
}

.an-flow__connector svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Detail panel */
.an-flow__detail {
  max-width: 780px;
  margin: 0 auto;
  background: rgba(250, 247, 242, 0.025);
  border: 1px solid rgba(250, 247, 242, 0.08);
  border-radius: 10px;
  padding: clamp(28px, 3.5vw, 44px);
  min-height: 260px;
  position: relative;
}

.an-flow__panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--brb-ease), transform 400ms var(--brb-ease);
}

.an-flow__panel.is-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.an-flow__panel-tag {
  font-family: var(--brb-font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brb-accent);
  font-weight: 500;
  margin-bottom: 10px;
}

.an-flow__panel-title {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.15;
  color: var(--brb-text-on-dark);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.an-flow__panel-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  margin-bottom: 18px;
  max-width: 60ch;
}

.an-flow__panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}

@media (max-width: 600px) {
  .an-flow__panel-list { grid-template-columns: 1fr; }
}

.an-flow__panel-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brb-text-on-dark);
}

.an-flow__panel-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--brb-accent);
}


/* ============================================================
   ============================================================
   FAQ PAGE
   Editorial accordion with search, section jumpnav, and smooth reveals.
   ============================================================
   ============================================================ */

.faq-hero {
  background: var(--brb-surface);
  padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}

.faq-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -5%;
  width: 40%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(217, 119, 6, 0.05), transparent 65%);
  pointer-events: none;
}

.faq-hero .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.faq-hero__title {
  font-family: var(--brb-font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 24px;
  max-width: 20ch;
}

.faq-hero__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.faq-hero__body {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--brb-text-muted);
  max-width: 60ch;
  margin-bottom: 36px;
}

.faq-hero__body a {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  text-decoration: none;
  transition: color 200ms var(--brb-ease);
}

.faq-hero__body a:hover { color: var(--brb-accent); }

/* Search input */
.faq-search {
  position: relative;
}

.faq-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brb-text-muted);
  pointer-events: none;
}

.faq-search input {
  width: 100%;
  padding: 14px 44px 14px 48px;
  border: 1px solid var(--brb-border);
  border-radius: 8px;
  background: #FFFFFF;
  font-family: var(--brb-font-body);
  font-size: 15px;
  color: var(--brb-text);
  transition: border-color 200ms var(--brb-ease),
              box-shadow 200ms var(--brb-ease);
}

.faq-search input::placeholder {
  color: var(--brb-text-muted);
}

.faq-search input:focus {
  outline: none;
  border-color: var(--brb-accent);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.14);
}

.faq-search__clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--brb-text-muted);
  border-radius: 4px;
  transition: background 200ms var(--brb-ease), color 200ms var(--brb-ease);
}

.faq-search__clear:hover {
  background: rgba(26, 26, 26, 0.06);
  color: var(--brb-text);
}

/* ============================================================
   Jump navigation — sticky on scroll
   ============================================================ */
.faq-jumpnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--brb-border);
}

.faq-jumpnav__inner {
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0;
  scrollbar-width: none;
}

.faq-jumpnav__inner::-webkit-scrollbar {
  display: none;
}

.faq-jumpnav__link {
  font-family: var(--brb-font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--brb-text-muted);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.04);
  border: 1px solid transparent;
  white-space: nowrap;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms var(--brb-ease), color 200ms var(--brb-ease), border-color 200ms var(--brb-ease);
}

.faq-jumpnav__link:hover {
  background: rgba(26, 26, 26, 0.08);
  color: var(--brb-text);
}

.faq-jumpnav__link.is-active,
.faq-jumpnav__link.is-active:hover {
  background: var(--brb-accent);
  color: var(--brb-text-on-dark);
  border-color: var(--brb-accent);
}

/* ============================================================
   FAQ main content
   ============================================================ */
.faq-main {
  background: var(--brb-surface);
  padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 10vw, 120px);
}

.faq-section {
  margin-bottom: clamp(48px, 6vw, 80px);
  scroll-margin-top: 80px;
}

.faq-section:last-child { margin-bottom: 0; }

.faq-section__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--brb-border);
}

.faq-section__num {
  font-family: var(--brb-font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--brb-accent);
  font-weight: 600;
}

.faq-section__title {
  font-family: var(--brb-font-display);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0;
}

/* FAQ items (accordion) */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid var(--brb-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 200ms var(--brb-ease),
              box-shadow 200ms var(--brb-ease);
}

.faq-item[open] {
  border-color: rgba(217, 119, 6, 0.3);
  box-shadow: 0 4px 16px rgba(26, 26, 26, 0.05);
}

.faq-item--match {
  border-color: rgba(217, 119, 6, 0.45);
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.08);
}

.faq-item__q {
  padding: 20px 24px;
  font-family: var(--brb-font-display);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--brb-text);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: background 200ms var(--brb-ease);
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q:hover {
  background: rgba(217, 119, 6, 0.03);
}

.faq-item__chevron {
  flex-shrink: 0;
  color: var(--brb-text-muted);
  transition: transform 300ms var(--brb-ease),
              color 200ms var(--brb-ease);
}

.faq-item[open] .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--brb-accent);
}

.faq-item__a {
  padding: 0 24px 24px 24px;
  border-top: 1px solid var(--brb-border);
}

.faq-item__a p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin: 16px 0 0;
}

.faq-item__a p:first-child { margin-top: 16px; }

.faq-item__a p strong {
  color: var(--brb-text);
  font-weight: 600;
}

.faq-item__a a {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  text-decoration: none;
  transition: color 200ms var(--brb-ease);
}

.faq-item__a a:hover { color: var(--brb-accent); }

.faq-item__a ul {
  margin: 16px 0 0;
  padding-left: 0;
  list-style: none;
}

.faq-item__a ul li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--brb-text-muted);
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.faq-item__a ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 1px;
  background: var(--brb-accent);
}

/* No results */
.faq-noresults {
  text-align: center;
  padding: 48px 24px;
  color: var(--brb-text-muted);
  font-size: 15px;
}

.faq-noresults a {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  text-decoration: none;
}

/* ============================================================
   FAQ CTA section
   ============================================================ */
.faq-cta {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(64px, 8vw, 120px) 0;
  text-align: center;
}

.faq-cta__inner {
  max-width: 720px;
  margin-inline: auto;
}

.faq-cta .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.faq-cta__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: 20px;
}

.faq-cta__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.faq-cta__body {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
  margin: 0 auto 36px;
}

.faq-cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Blog · Index (page-blog.php)
   ============================================================ */
.blog-hero {
  background: var(--brb-surface);
  padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 64px);
  position: relative;
  overflow: hidden;
}

.blog-hero .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.blog-hero__title {
  font-family: var(--brb-font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 24px;
  max-width: 22ch;
}

.blog-hero__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.blog-hero__body {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--brb-text-muted);
  max-width: 60ch;
}

.blog-main {
  background: var(--brb-surface);
  padding: clamp(32px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
}

.blog-card {
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 300ms var(--brb-ease), border-color 300ms var(--brb-ease), box-shadow 300ms var(--brb-ease);
}

.blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--brb-border-strong);
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
}

.blog-card__link {
  display: block;
  color: inherit;
}

.blog-card__illustration {
  aspect-ratio: 16 / 10;
  background: var(--brb-neutral-100);
  position: relative;
  overflow: hidden;
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card__illustration-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(217, 119, 6, 0.22) 0%, transparent 70%),
    linear-gradient(135deg, var(--brb-neutral-100) 0%, #E4E1DA 100%);
}

.blog-card__body {
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(24px, 2.2vw, 32px);
}

.blog-card__category {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brb-accent);
  margin-bottom: 12px;
}

.blog-card__title {
  font-family: var(--brb-font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--brb-text);
  margin-bottom: 14px;
  transition: color 200ms var(--brb-ease);
}

.blog-card:hover .blog-card__title {
  color: var(--brb-accent);
}

.blog-card__date {
  font-size: 13px;
  color: var(--brb-text-subtle);
  letter-spacing: 0.01em;
}

.blog-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--brb-text-muted);
  font-size: 17px;
}

/* ============================================================
   Blog · Shared CTA (page-blog.php + single.php)
   ============================================================ */
.blog-cta {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(64px, 8vw, 120px) 0;
  text-align: center;
}

.blog-cta__inner {
  max-width: 720px;
  margin-inline: auto;
}

.blog-cta .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}

.blog-cta__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: 20px;
}

.blog-cta__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.blog-cta__body {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
  margin: 0 auto 36px;
}

.blog-cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Blog · Single post (single.php)
   ============================================================ */
.wrap-reading {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--brb-pad-page);
}

.post-single {
  background: var(--brb-surface);
  padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px);
}

.post-single__header {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.post-single__back {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--brb-text-muted);
  margin-bottom: 28px;
  transition: color 200ms var(--brb-ease);
}

.post-single__back:hover { color: var(--brb-accent); }

.post-single__category {
  margin-bottom: 16px;
  display: inline-block;
}

.post-single__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 5.5vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--brb-text);
}

.post-single__meta {
  font-size: 14px;
  color: var(--brb-text-subtle);
  letter-spacing: 0.02em;
}

.post-single__illustration {
  margin-top: clamp(32px, 4vw, 56px);
}

.post-single__illustration img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.post-single__illustration-placeholder {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(217, 119, 6, 0.22) 0%, transparent 70%),
    linear-gradient(135deg, var(--brb-neutral-100) 0%, #E4E1DA 100%);
}

.post-single__content {
  font-family: var(--brb-font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--brb-ink);
}

.post-single__content > * + * { margin-top: 1.3em; }

.post-single__content h2 {
  font-family: var(--brb-font-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: var(--brb-text);
}

.post-single__content h3 {
  font-family: var(--brb-font-display);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  color: var(--brb-text);
}

.post-single__content h4 {
  font-family: var(--brb-font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  color: var(--brb-text);
}

.post-single__content p { margin: 0; }

.post-single__content a {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  transition: color 200ms var(--brb-ease);
}

.post-single__content a:hover { color: var(--brb-accent); }

.post-single__content ul,
.post-single__content ol {
  padding-left: 1.4em;
}

.post-single__content li + li { margin-top: 0.5em; }

.post-single__content blockquote {
  border-left: 3px solid var(--brb-accent);
  padding: 4px 0 4px 24px;
  margin-left: 0;
  font-family: var(--brb-font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.45;
  color: var(--brb-text);
}

.post-single__content img {
  border-radius: 10px;
  margin: 1.8em 0;
}

.post-single__content figure {
  margin: 1.8em 0;
}

.post-single__content figure img { margin: 0; }

.post-single__content figcaption {
  font-size: 14px;
  color: var(--brb-text-subtle);
  text-align: center;
  margin-top: 10px;
}

.post-single__content code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--brb-neutral-100);
  padding: 2px 6px;
  border-radius: 4px;
}

.post-single__content pre {
  background: var(--brb-neutral-100);
  padding: 18px 20px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
}

.post-single__content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.post-single__content hr {
  border: 0;
  border-top: 1px solid var(--brb-border);
  margin: 2.4em auto;
  width: 60%;
}

/* ============================================================
   Landing template (page-landing.php)
   Used by service-area + industry pages whose body is editor-authored.
   Reuses the inline brand blocks already in the page content.
   ============================================================ */
.landing-hero {
  background: var(--brb-surface);
  padding: clamp(72px, 10vw, 128px) 0 clamp(32px, 4vw, 56px);
}

.landing-hero__title {
  font-family: var(--brb-font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--brb-text);
  max-width: 22ch;
}

.landing-hero__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.landing-main {
  background: var(--brb-surface);
  padding: clamp(24px, 3vw, 48px) 0 clamp(80px, 10vw, 140px);
}

/* /reviews-only override — its short content was leaving a 228px void
   between the verification CTA and the cross-links section. Cuts the
   bottom padding by half on this page only. */
body.page-reviews .landing-main { padding-bottom: 72px; }

.landing-main__inner {
  font-family: var(--brb-font-body);
  font-size: 18px;
  line-height: 1.75;
  color: var(--brb-ink);
}

.landing-main__inner > * + * { margin-top: 1.3em; }

.landing-main__inner h2 {
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: var(--brb-text);
}

.landing-main__inner h2 em {
  font-style: italic;
  color: var(--brb-accent);
}

.landing-main__inner h3 {
  font-family: var(--brb-font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  color: var(--brb-text);
}

.landing-main__inner h4 {
  font-family: var(--brb-font-body);
  font-size: 17px;
  font-weight: 600;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  color: var(--brb-text);
}

.landing-main__inner p { margin: 0; }

.landing-main__inner a {
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  transition: color 200ms var(--brb-ease);
}

.landing-main__inner a:hover { color: var(--brb-accent); }

.landing-main__inner ul,
.landing-main__inner ol {
  padding-left: 1.4em;
}

.landing-main__inner li + li { margin-top: 0.5em; }

.landing-main__inner blockquote {
  border-left: 3px solid var(--brb-accent);
  padding: 4px 0 4px 24px;
  margin-left: 0;
  font-family: var(--brb-font-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.45;
  color: var(--brb-text);
}

.landing-main__inner img {
  border-radius: 10px;
  margin: 1.8em 0;
}

.landing-main__inner figure { margin: 1.8em 0; }
.landing-main__inner figure img { margin: 0; }
.landing-main__inner figcaption {
  font-size: 14px;
  color: var(--brb-text-subtle);
  text-align: center;
  margin-top: 10px;
}

.landing-main__inner hr {
  border: 0;
  border-top: 1px solid var(--brb-border);
  margin: 2.4em auto;
  width: 60%;
}

/* ============================================================
   Landing template — hero eyebrow
   ============================================================ */
.landing-hero__eyebrow {
  margin-bottom: 18px;
}

/* ============================================================
   Landing template — author byline strip
   ============================================================ */
.landing-byline {
  background: var(--brb-surface);
}

.landing-byline__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--brb-border);
  border-bottom: 1px solid var(--brb-border);
}

.landing-byline__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  background: var(--brb-neutral-100);
}

.landing-byline__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.landing-byline__name {
  font-family: var(--brb-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--brb-text);
  letter-spacing: -0.005em;
}

.landing-byline__meta {
  font-family: var(--brb-font-body);
  font-size: 13px;
  color: var(--brb-text-muted);
  letter-spacing: 0.01em;
}

.landing-byline__link {
  font-family: var(--brb-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--brb-text);
  border-bottom: 1px solid var(--brb-accent);
  white-space: nowrap;
  transition: color 200ms var(--brb-ease);
  flex-shrink: 0;
}

.landing-byline__link:hover { color: var(--brb-accent); }

@media (max-width: 600px) {
  .landing-byline__inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .landing-byline__link {
    flex-basis: 100%;
    text-align: left;
  }
}

/* ============================================================
   Landing template — cross-links ("Also looking at")
   ============================================================ */
.landing-crosslinks {
  background: var(--brb-surface);
  padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 3vw, 40px);
}

.landing-crosslinks__title {
  font-family: var(--brb-font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brb-text);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.landing-crosslinks__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}

@media (max-width: 720px) {
  .landing-crosslinks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .landing-crosslinks__grid { grid-template-columns: 1fr; }
}

.landing-crosslinks__card {
  display: block;
  position: relative;
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border);
  border-radius: 12px;
  padding: 20px 22px 24px;
  color: inherit;
  transition: transform 250ms var(--brb-ease), border-color 250ms var(--brb-ease), box-shadow 250ms var(--brb-ease);
}

.landing-crosslinks__card:hover {
  transform: translateY(-2px);
  border-color: var(--brb-border-strong);
  box-shadow: 0 10px 28px rgba(26, 26, 26, 0.06);
}

.landing-crosslinks__card-title {
  font-family: var(--brb-font-display);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--brb-text);
  margin-bottom: 8px;
  transition: color 200ms var(--brb-ease);
}

.landing-crosslinks__card:hover .landing-crosslinks__card-title { color: var(--brb-accent); }

.landing-crosslinks__card-desc {
  font-family: var(--brb-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--brb-text-muted);
  margin-bottom: 12px;
}

.landing-crosslinks__card-arrow {
  font-family: var(--brb-font-body);
  font-size: 16px;
  color: var(--brb-accent);
  transition: transform 200ms var(--brb-ease);
  display: inline-block;
}

.landing-crosslinks__card:hover .landing-crosslinks__card-arrow { transform: translateX(3px); }

/* ============================================================
   Landing template — final CTA (dark band)
   ============================================================ */
.landing-final-cta {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(56px, 7vw, 96px) 0;
  text-align: center;
}

.landing-final-cta__inner {
  max-width: 640px;
  margin-inline: auto;
}

.landing-final-cta__title {
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  margin-bottom: 16px;
}

.landing-final-cta__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.landing-final-cta__body {
  font-family: var(--brb-font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 52ch;
  margin: 0 auto 32px;
}

.landing-final-cta__actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.landing-final-cta__secondary {
  font-family: var(--brb-font-body);
  font-size: 14px;
  color: var(--brb-text-on-dark-muted);
  border-bottom: 1px solid rgba(217, 119, 6, 0.6);
  transition: color 200ms var(--brb-ease), border-color 200ms var(--brb-ease);
}

.landing-final-cta__secondary:hover {
  color: var(--brb-text-on-dark);
  border-bottom-color: var(--brb-accent);
}

/* ============================================================
   404 — Not Found page
   ============================================================ */
.error-404 {
  background: var(--brb-surface);
  color: var(--brb-text);
  padding: clamp(72px, 12vw, 160px) 0 clamp(96px, 14vw, 200px);
}

.error-404__hero {
  text-align: center;
  max-width: 880px;
  padding-bottom: clamp(48px, 7vw, 96px);
}

.error-404__hero .eyebrow {
  margin-bottom: 18px;
}

.error-404__headline {
  font-family: var(--brb-font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--brb-text);
  margin: 0 0 24px;
}

.error-404__headline em {
  font-style: italic;
  color: var(--brb-accent);
}

.error-404__sub {
  font-family: var(--brb-font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--brb-text-muted);
  max-width: 560px;
  margin: 0 auto;
}

.error-404__nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-bottom: clamp(64px, 9vw, 120px);
}

@media (min-width: 880px) {
  .error-404__nav-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.error-404__nav-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--brb-text);
  transition: border-color 200ms var(--brb-ease),
              transform 200ms var(--brb-ease),
              box-shadow 200ms var(--brb-ease);
}

.error-404__nav-card:hover {
  border-color: var(--brb-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26, 26, 26, 0.06);
}

.error-404__nav-card--accent {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border-color: var(--brb-anchor);
}

.error-404__nav-card--accent:hover {
  border-color: var(--brb-accent);
}

.error-404__nav-card-label {
  font-family: var(--brb-font-display);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.error-404__nav-card--accent .error-404__nav-card-label {
  color: var(--brb-accent);
}

.error-404__nav-card-desc {
  font-family: var(--brb-font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--brb-text-muted);
}

.error-404__nav-card--accent .error-404__nav-card-desc {
  color: var(--brb-text-on-dark-muted);
}

.error-404__recent-posts {
  border-top: 1px solid var(--brb-border);
  padding-top: clamp(48px, 7vw, 88px);
}

.error-404__recent-posts-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.error-404__recent-posts-title {
  font-family: var(--brb-font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--brb-text);
  margin: 8px 0 0;
}

.error-404__recent-posts-title em {
  font-style: italic;
  color: var(--brb-accent);
}

.error-404__recent-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.error-404__recent-post {
  border-top: 1px solid var(--brb-border);
}

.error-404__recent-post:last-child {
  border-bottom: 1px solid var(--brb-border);
}

.error-404__recent-post-link {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 22px 4px;
  text-decoration: none;
  color: var(--brb-text);
  transition: color 200ms var(--brb-ease);
}

.error-404__recent-post-link:hover {
  color: var(--brb-accent);
}

.error-404__recent-post-meta {
  font-family: var(--brb-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brb-text-subtle);
}

.error-404__recent-post-title {
  font-family: var(--brb-font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

@media (max-width: 600px) {
  .error-404__recent-post-link {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 4px;
  }
}

/* ============================================================
   Location-service · Local-pack mockup (signature visual)
   --------------------------------------------------------------
   Two surfaces:
   1. .loc-pack-card (compact, hero right-side)
   2. .loc-pack       (expanded, full section between hero+market)
   Plus a paragraph-block stat row (.loc-stat) + 3-callout grid
   (.loc-pack__callouts) for the "What gets a business into the
   3-pack" annotation.
   ============================================================ */

/* ---- Compact card variant (hero visual) ---------------------- */
.loc-pack-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(26, 26, 26, 0.08);
  overflow: hidden;
  font-family: var(--brb-font-body);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.loc-pack-card.is-visible,
.wd-hero.is-visible .loc-pack-card,
.wd-hero__visual.is-visible .loc-pack-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.loc-pack-card__bar {
  background: rgba(26, 26, 26, 0.03);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.loc-pack-card__bar-logo {
  font-family: var(--brb-font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--brb-text);
  letter-spacing: -0.01em;
}
.loc-pack-card__bar-query {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 18px;
  padding: 5px 12px;
  flex: 1;
  color: rgba(26, 26, 26, 0.55);
  font-size: 12px;
}
.loc-pack-card__map {
  height: 56px;
  background: linear-gradient(135deg, #E8EDE7 0%, #DCE3DA 100%);
  position: relative;
}
.loc-pack-card__map::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  background: var(--brb-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2);
}
.loc-pack-card__results {
  padding: 4px 0;
}
.loc-pack-card__result {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.loc-pack-card__result:last-child { border-bottom: 0; }
.loc-pack-card__result--featured {
  background: rgba(217, 119, 6, 0.04);
  border-left: 3px solid var(--brb-accent);
  padding-left: 13px;
}
.loc-pack-card__result-name {
  font-family: var(--brb-font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-text);
  margin: 0;
  line-height: 1.2;
}
.loc-pack-card__result-meta {
  font-size: 11px;
  color: rgba(26, 26, 26, 0.7);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.loc-pack-card__stars { color: var(--brb-accent); letter-spacing: 1px; font-size: 10px; }
.loc-pack-card__rating-num { font-weight: 500; color: var(--brb-text); }
.loc-pack-card__result-address {
  font-size: 11px;
  color: rgba(26, 26, 26, 0.55);
}

/* Sponsored modifier (compact) — small uppercase eyebrow above the
   business name, signals paid-pack context (SLO Paid Ads, v1.35.1) */
.loc-pack-card__sponsored-tag {
  font-family: var(--brb-font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.42);
  margin: 0;
  line-height: 1;
}

/* ---- Expanded section variant -------------------------------- */
.loc-pack {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-top: 1px solid var(--brb-border);
}

.loc-pack__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.loc-pack__head .eyebrow {
  margin-bottom: 14px;
  display: inline-block;
}
.loc-pack__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0 0 18px;
}
.loc-pack__title em {
  font-style: italic;
  color: var(--brb-accent);
}
.loc-pack__body {
  font-family: var(--brb-font-body);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin: 0;
}

.loc-pack__chrome {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(26, 26, 26, 0.08);
  overflow: hidden;
  font-family: var(--brb-font-body);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 80px);
}

.loc-pack__bar {
  background: rgba(26, 26, 26, 0.03);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.loc-pack__bar-logo {
  font-family: var(--brb-font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--brb-text);
  letter-spacing: -0.01em;
}
.loc-pack__bar-query {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.1);
  border-radius: 22px;
  padding: 7px 16px;
  flex: 1;
  color: rgba(26, 26, 26, 0.55);
  font-size: 14px;
}

.loc-pack__map {
  height: 96px;
  background:
    radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
    linear-gradient(135deg, #E8EDE7 0%, #DCE3DA 100%);
  position: relative;
}
.loc-pack__map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: var(--brb-accent);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.18);
}
.loc-pack__map::after {
  content: '';
  position: absolute;
  top: 32%;
  left: 28%;
  width: 7px;
  height: 7px;
  background: rgba(26, 26, 26, 0.4);
  border-radius: 50%;
  box-shadow:
    100px 22px 0 -1px rgba(26, 26, 26, 0.4),
    160px -10px 0 -1px rgba(26, 26, 26, 0.4);
}

.loc-pack__results { padding: 4px 0; }
.loc-pack__result {
  padding: 16px 22px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.loc-pack__result:last-child { border-bottom: 0; }
.loc-pack__result--featured {
  background: rgba(217, 119, 6, 0.04);
  border-left: 3px solid var(--brb-accent);
  padding-left: 19px;
}
.loc-pack__result-name {
  font-family: var(--brb-font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--brb-text);
  margin: 0;
  line-height: 1.2;
}
.loc-pack__result-meta {
  font-size: 13px;
  color: rgba(26, 26, 26, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.loc-pack__stars { color: var(--brb-accent); letter-spacing: 1px; font-size: 12px; }
.loc-pack__rating-num { font-weight: 500; color: var(--brb-text); }
.loc-pack__result-address {
  font-size: 13px;
  color: rgba(26, 26, 26, 0.55);
}
.loc-pack__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.loc-pack__action {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.7);
  padding: 4px 12px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 14px;
  font-weight: 500;
}
.loc-pack__result--featured .loc-pack__action {
  color: var(--brb-accent);
  border-color: rgba(217, 119, 6, 0.3);
}

/* Sponsored modifier (expanded) — small uppercase eyebrow above the
   business name, signals paid-pack context (SLO Paid Ads, v1.35.1).
   Composes cleanly with --featured: featured row gets both amber tint
   AND sponsored eyebrow; runners-up get just the eyebrow. */
.loc-pack__sponsored-tag {
  font-family: var(--brb-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.42);
  margin: 0;
  line-height: 1;
}

/* ---- 3-pack callouts ----------------------------------------- */
.loc-pack__callouts {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border-radius: 14px;
  padding: clamp(28px, 3.5vw, 44px);
  max-width: 960px;
  margin: 0 auto;
}
.loc-pack__callouts-title {
  font-family: var(--brb-font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
  margin: 0 0 24px;
  font-weight: 500;
}
.loc-pack__callouts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .loc-pack__callouts-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); }
}
.loc-pack__callout {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--brb-ease), transform 600ms var(--brb-ease);
}
.loc-pack__callout.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.loc-pack__callout-num {
  font-family: var(--brb-font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--brb-accent);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.loc-pack__callout-title {
  font-family: var(--brb-font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--brb-text-on-dark);
  margin: 0 0 8px;
  line-height: 1.3;
}
.loc-pack__callout-body {
  font-family: var(--brb-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250, 247, 242, 0.78);
  margin: 0;
}

/* ---- Stat row used in .wd-philosophy on location pages ------- */
.loc-stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: clamp(20px, 2.5vw, 32px) 0 0;
}
@media (min-width: 720px) {
  .loc-stat-row { grid-template-columns: repeat(3, 1fr); }
}
.loc-stat {
  background: rgba(217, 119, 6, 0.06);
  border-left: 3px solid var(--brb-accent);
  padding: 16px 18px;
  border-radius: 4px;
}
.loc-stat__value {
  font-family: var(--brb-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--brb-accent);
  line-height: 1;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.loc-stat__label {
  font-family: var(--brb-font-body);
  font-size: 0.82rem;
  color: var(--brb-text);
  line-height: 1.4;
  margin: 0 0 4px;
}
.loc-stat__source {
  font-family: var(--brb-font-body);
  font-size: 0.7rem;
  color: rgba(26, 26, 26, 0.5);
  margin: 0;
  font-style: italic;
}

/* ============================================================
   Industry-service · Per-vertical signature visuals (RESERVED)
   --------------------------------------------------------------
   Reserved namespace for the .ind-mock-* classes that will host
   per-industry signature mockups when each vertical is populated
   in page-industry-service.php.

   Planned mockups per industry:
     - .ind-mock-medical    — review widget mockup (review velocity / GBP signal)
     - .ind-mock-realestate — listing card mockup (typical buyer-search behavior)
     - .ind-mock-winery     — tasting reservation flow (DTC-driven economy)
     - .ind-mock-home       — service-area + LSA result mockup

   Each industry-population commit will add its own scoped block
   here (e.g., .ind-mock-medical, .ind-mock-realestate). No shared
   CSS — vertical-specific by design. Compact + expanded variants
   per the .loc-pack-card / .loc-pack precedent.
   ============================================================ */
/* ============================================================
   Industry-service · Home services LSA + service-area mockup
   --------------------------------------------------------------
   First concrete .ind-mock-* implementation (v1.35.0).
   Sibling pattern to .loc-pack on page-location-service.php.

   Two surfaces:
     - Compact: hero visual slot (LSA card only, no map)
     - Expanded: Section 03 split layout (LSA card + service-area
       map), shown only on /home-services-digital-marketing/
   ============================================================ */

/* ---- Section frame --------------------------------------------- */
.ind-mock-home-services {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-top: 1px solid var(--brb-border);
}

.ind-mock-home-services__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.ind-mock-home-services__head .eyebrow {
  margin-bottom: 14px;
  display: inline-block;
}

.ind-mock-home-services__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0 0 18px;
}
.ind-mock-home-services__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.ind-mock-home-services__body {
  font-family: var(--brb-font-body);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin: 0;
}

/* ---- Split layout (expanded) ----------------------------------- */
.ind-mock-home-services__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}

/* ---- LSA card (shared by compact + expanded) ------------------- */
.ind-mock-home-services__card {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  padding: 18px;
  font-family: var(--brb-font-body);
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.ind-mock-home-services__card--compact {
  max-width: 380px;
  padding: 14px;
  margin-left: auto;
  margin-right: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.ind-mock-home-services__card--compact.is-visible,
.wd-hero.is-visible .ind-mock-home-services__card--compact,
.wd-hero__visual.is-visible .ind-mock-home-services__card--compact {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Search bar ------------------------------------------------ */
.ind-mock-home-services__searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(26, 26, 26, 0.04);
  border: 1px solid rgba(26, 26, 26, 0.06);
  border-radius: 999px;
  padding: 8px 14px;
  margin-bottom: 14px;
}
.ind-mock-home-services__search-icon {
  font-size: 14px;
  color: rgba(26, 26, 26, 0.45);
  line-height: 1;
}
.ind-mock-home-services__search-query {
  font-size: 13px;
  color: rgba(26, 26, 26, 0.75);
}

/* ---- LSA label ("Most popular") -------------------------------- */
.ind-mock-home-services__lsa-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  margin: 0 0 8px;
}

/* ---- LSA result rows ------------------------------------------- */
.ind-mock-home-services__lsa-result {
  padding: 12px 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.ind-mock-home-services__lsa-result:last-child { border-bottom: 0; }

.ind-mock-home-services__lsa-result--featured {
  background: rgba(217, 118, 6, 0.04);
  border: 1px solid rgba(217, 118, 6, 0.20);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.ind-mock-home-services__lsa-result--compact {
  padding: 8px 0;
}

.ind-mock-home-services__lsa-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--brb-text);
  margin: 0 0 4px;
  line-height: 1.3;
}

.ind-mock-home-services__lsa-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(26, 26, 26, 0.7);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ind-mock-home-services__lsa-rating-num { font-weight: 600; color: var(--brb-text); }
.ind-mock-home-services__lsa-stars { color: var(--brb-accent); letter-spacing: 1px; font-size: 11px; }
.ind-mock-home-services__lsa-reviews { color: rgba(26, 26, 26, 0.55); }

/* ---- Google Verified badge (BLUE per Oct 2025 platform change) - */
.ind-mock-home-services__lsa-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #1a73e8;
  margin-right: 8px;
}
.ind-mock-home-services__lsa-badge-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: #1a73e8;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}
.ind-mock-home-services__lsa-badge--inline {
  font-size: 0;
  margin-right: 0;
}

/* ---- Status line ----------------------------------------------- */
.ind-mock-home-services__lsa-status {
  display: block;
  font-size: 11px;
  color: rgba(26, 26, 26, 0.6);
  margin-top: 6px;
}

/* ---- Action buttons (Call / Message) --------------------------- */
.ind-mock-home-services__lsa-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ind-mock-home-services__lsa-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(26, 26, 26, 0.15);
  background: #fff;
  color: var(--brb-text);
  letter-spacing: 0.01em;
}
.ind-mock-home-services__lsa-action--call {
  background: var(--brb-text);
  color: #fff;
  border-color: var(--brb-text);
}

/* ---- Service-area map ------------------------------------------ */
.ind-mock-home-services__map {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  padding: 18px;
  font-family: var(--brb-font-body);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.ind-mock-home-services__map-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  margin: 0 0 12px;
}

.ind-mock-home-services__map-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
}

.ind-mock-home-services__map-fill {
  fill: rgba(217, 118, 6, 0.08);
  stroke: rgba(217, 118, 6, 0.25);
  stroke-width: 1;
}
.ind-mock-home-services__map-coast {
  fill: none;
  stroke: rgba(26, 26, 26, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.ind-mock-home-services__map-inland {
  fill: none;
  stroke: rgba(26, 26, 26, 0.20);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}

.ind-mock-home-services__map-pin {
  fill: rgba(26, 26, 26, 0.55);
}
.ind-mock-home-services__map-pin--featured {
  fill: var(--brb-accent);
}

.ind-mock-home-services__map-pin-label {
  font-family: var(--brb-font-body);
  font-size: 9px;
  fill: rgba(26, 26, 26, 0.65);
}
.ind-mock-home-services__map-pin-label--featured {
  font-weight: 600;
  fill: var(--brb-text);
}

.ind-mock-home-services__map-caption {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.6);
  margin: 12px 0 0;
  text-align: center;
  font-style: italic;
}

/* ---- Mobile breakpoint ----------------------------------------- */
@media (max-width: 720px) {
  .ind-mock-home-services__split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ind-mock-home-services__card,
  .ind-mock-home-services__map {
    padding: 14px;
    max-width: 100%;
  }
  .ind-mock-home-services__lsa-result--featured {
    padding: 10px 12px;
  }
}

/* ============================================================
   Industry-service · Medical reviews widget mockup
   --------------------------------------------------------------
   Second concrete .ind-mock-* implementation (v1.38.8).
   Google Reviews widget design — distinct from .ind-mock-home-services
   (LSA + service-area map).

   Two surfaces:
     - Compact: hero visual slot — GBP knowledge panel + first
       review only (no signals annotations or full review list)
     - Expanded: Section 03 — full GBP panel + 2 reviews +
       engagement signal annotations
   ============================================================ */

/* ---- Section frame --------------------------------------------- */
.ind-mock-medical {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-top: 1px solid var(--brb-border);
}

.ind-mock-medical__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.ind-mock-medical__head .eyebrow {
  margin-bottom: 14px;
  display: inline-block;
}

.ind-mock-medical__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0 0 18px;
}
.ind-mock-medical__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.ind-mock-medical__body {
  font-family: var(--brb-font-body);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin: 0;
}

/* ---- Card chrome (shared by compact + expanded) ---------------- */
.ind-mock-medical__card {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  font-family: var(--brb-font-body);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
}

.ind-mock-medical__card--compact {
  max-width: 380px;
  margin-left: auto;
  margin-right: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.ind-mock-medical__card--compact.is-visible,
.wd-hero.is-visible .ind-mock-medical__card--compact,
.wd-hero__visual.is-visible .ind-mock-medical__card--compact {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- GBP knowledge panel (header) ------------------------------ */
.ind-mock-medical__panel {
  padding: 18px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.ind-mock-medical__card--compact .ind-mock-medical__panel {
  padding: 14px;
}

.ind-mock-medical__practice-name {
  font-family: var(--brb-font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--brb-text);
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ind-mock-medical__card--compact .ind-mock-medical__practice-name {
  font-size: 15px;
}

.ind-mock-medical__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ind-mock-medical__rating-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--brb-text);
}
.ind-mock-medical__stars {
  color: var(--brb-accent);
  letter-spacing: 1px;
  font-size: 12px;
}
.ind-mock-medical__rating-count {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.55);
}
.ind-mock-medical__rating-badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1a8754;
  background: rgba(26, 135, 84, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
}

.ind-mock-medical__category {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.6);
  margin: 0 0 4px;
}
.ind-mock-medical__address {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.6);
  margin: 0 0 6px;
}
.ind-mock-medical__hours {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(26, 26, 26, 0.7);
  margin: 0;
}
.ind-mock-medical__hours-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a8754;
  flex-shrink: 0;
}

/* ---- Action button row ----------------------------------------- */
.ind-mock-medical__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.ind-mock-medical__action {
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(26, 26, 26, 0.15);
  background: #fff;
  color: var(--brb-text);
  letter-spacing: 0.01em;
}
.ind-mock-medical__action--primary {
  background: var(--brb-text);
  color: #fff;
  border-color: var(--brb-text);
}

/* ---- Reviews list ---------------------------------------------- */
.ind-mock-medical__reviews {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.ind-mock-medical__reviews-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  margin: 0 0 10px;
}

.ind-mock-medical__review {
  padding: 10px 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.04);
}
.ind-mock-medical__review:last-child {
  border-bottom: 0;
}
.ind-mock-medical__review--compact {
  padding: 12px 14px;
}

.ind-mock-medical__review-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ind-mock-medical__review-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--brb-text);
}
.ind-mock-medical__review-stars {
  color: var(--brb-accent);
  letter-spacing: 1px;
  font-size: 11px;
}
.ind-mock-medical__review-age {
  font-size: 11px;
  color: rgba(26, 26, 26, 0.5);
}

.ind-mock-medical__review-quote {
  font-family: var(--brb-font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.75);
  font-style: italic;
  margin: 0;
}

.ind-mock-medical__card--compact .ind-mock-medical__review-quote {
  font-size: 12px;
  line-height: 1.5;
}

/* ---- Engagement signals (expanded only) ------------------------ */
.ind-mock-medical__signals {
  padding: 14px 18px;
  background: rgba(26, 26, 26, 0.02);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ind-mock-medical__signal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(26, 26, 26, 0.7);
  margin: 0;
}
.ind-mock-medical__signal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(26, 135, 84, 0.10);
  color: #1a8754;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- Mobile breakpoint ----------------------------------------- */
@media (max-width: 720px) {
  .ind-mock-medical__card {
    max-width: 100%;
  }
  .ind-mock-medical__panel,
  .ind-mock-medical__reviews,
  .ind-mock-medical__signals {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ind-mock-medical__actions {
    gap: 6px;
  }
  .ind-mock-medical__action {
    font-size: 10.5px;
    padding: 5px 10px;
  }
}

/* ============================================================
   Industry-service · Real estate listing card mockup
   --------------------------------------------------------------
   Third concrete .ind-mock-* implementation (v1.38.9).
   Listing card design — visually distinct from
   .ind-mock-home-services (LSA + map) and .ind-mock-medical
   (GBP reviews widget).

   Two surfaces:
     - Compact: hero visual slot — listing card only (price,
       address, specs, agent), no search chrome or signals
     - Expanded: Section 03 — search result chrome + listing
       card + engagement signal annotations

   Photo placeholder uses a subtle muted gradient — no stock
   imagery. Signals "this is where a real listing photo would
   go" without faking content.
   ============================================================ */

/* ---- Section frame --------------------------------------------- */
.ind-mock-real-estate {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-top: 1px solid var(--brb-border);
}

.ind-mock-real-estate__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.ind-mock-real-estate__head .eyebrow {
  margin-bottom: 14px;
  display: inline-block;
}

.ind-mock-real-estate__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0 0 18px;
}
.ind-mock-real-estate__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.ind-mock-real-estate__body {
  font-family: var(--brb-font-body);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin: 0;
}

/* ---- Expanded chrome wrapper ----------------------------------- */
.ind-mock-real-estate__chrome {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  font-family: var(--brb-font-body);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
}

/* ---- Search result chrome (expanded only) ---------------------- */
.ind-mock-real-estate__search-chrome {
  padding: 14px 18px;
  background: rgba(26, 26, 26, 0.02);
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.ind-mock-real-estate__search-meta {
  font-size: 11.5px;
  color: rgba(26, 26, 26, 0.6);
  margin: 0 0 8px;
}

.ind-mock-real-estate__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ind-mock-real-estate__filter {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 26, 26, 0.10);
  background: #fff;
  color: rgba(26, 26, 26, 0.7);
}

/* ---- Listing card (shared by compact + expanded) --------------- */
.ind-mock-real-estate__card {
  background: #fff;
  font-family: var(--brb-font-body);
}

/* Compact variant lives outside the chrome — it's the whole card */
.ind-mock-real-estate__card--compact {
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.ind-mock-real-estate__card--compact.is-visible,
.wd-hero.is-visible .ind-mock-real-estate__card--compact,
.wd-hero__visual.is-visible .ind-mock-real-estate__card--compact {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Photo placeholder (no stock imagery) ---------------------- */
.ind-mock-real-estate__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(26, 26, 26, 0.06) 0%, rgba(26, 26, 26, 0.02) 100%);
  border-bottom: 1px solid rgba(26, 26, 26, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inline SVG house illustration — same illustrative-not-photographic
   philosophy as the .ind-mock-home-services service-area map. Amber
   line art on the soft gradient canvas. (v1.39.2) */
.ind-mock-real-estate__photo-svg {
  width: 55%;
  max-width: 220px;
  height: auto;
  fill: none;
  stroke: var(--brb-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ind-mock-real-estate__photo-body {
  fill: rgba(217, 119, 6, 0.04);
}
.ind-mock-real-estate__photo-ground {
  stroke: rgba(26, 26, 26, 0.20);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.ind-mock-real-estate__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a8754;
  background: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---- Listing details ------------------------------------------- */
.ind-mock-real-estate__details {
  padding: 16px 18px;
}

.ind-mock-real-estate__card--compact .ind-mock-real-estate__details {
  padding: 14px;
}

.ind-mock-real-estate__price {
  font-family: var(--brb-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--brb-text);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  line-height: 1.1;
}

.ind-mock-real-estate__card--compact .ind-mock-real-estate__price {
  font-size: 19px;
}

.ind-mock-real-estate__address {
  font-size: 12.5px;
  color: rgba(26, 26, 26, 0.7);
  margin: 0 0 6px;
  line-height: 1.4;
}

.ind-mock-real-estate__specs {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.6);
  margin: 0 0 10px;
}

/* ---- Action button row ----------------------------------------- */
.ind-mock-real-estate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.ind-mock-real-estate__action {
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(26, 26, 26, 0.15);
  background: #fff;
  color: var(--brb-text);
  letter-spacing: 0.01em;
}
.ind-mock-real-estate__action--primary {
  background: var(--brb-text);
  color: #fff;
  border-color: var(--brb-text);
}

/* ---- Agent attribution ----------------------------------------- */
.ind-mock-real-estate__agent {
  font-size: 11.5px;
  color: rgba(26, 26, 26, 0.6);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(26, 26, 26, 0.04);
  line-height: 1.4;
}
.ind-mock-real-estate__agent-name {
  color: var(--brb-text);
  font-weight: 500;
}
.ind-mock-real-estate__agent-rating {
  color: rgba(26, 26, 26, 0.7);
}

/* ---- Engagement signals (expanded only) ------------------------ */
.ind-mock-real-estate__signals {
  padding: 14px 18px;
  background: rgba(26, 26, 26, 0.02);
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ind-mock-real-estate__signal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(26, 26, 26, 0.7);
  margin: 0;
}
.ind-mock-real-estate__signal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(26, 135, 84, 0.10);
  color: #1a8754;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- Mobile breakpoint ----------------------------------------- */
@media (max-width: 720px) {
  .ind-mock-real-estate__chrome {
    max-width: 100%;
  }
  .ind-mock-real-estate__details,
  .ind-mock-real-estate__signals,
  .ind-mock-real-estate__search-chrome {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ind-mock-real-estate__actions {
    gap: 5px;
  }
  .ind-mock-real-estate__action {
    font-size: 10.5px;
    padding: 5px 10px;
  }
  .ind-mock-real-estate__price {
    font-size: 19px;
  }
}

/* ============================================================
   Industry-service · Winery tasting reservation flow mockup
   --------------------------------------------------------------
   Fourth and final concrete .ind-mock-* implementation (v1.39.0).
   Tasting reservation booking flow design — distinct from the
   three prior verticals (LSA/map, GBP reviews, listing card).

   Two surfaces:
     - Compact: hero visual slot — booking widget chrome +
       experience selection cards (Standard vs Estate) + club-
       member-save prompt only. No date pill, no time grid, no
       party size, no subtotal.
     - Expanded: Section 03 — full booking flow (header + step
       indicator + date + time grid + party size + experience
       cards + subtotal + CTA + club prompt)

   Selected-state treatment uses --brb-accent (amber) consistent
   with site-wide selected-state convention.
   ============================================================ */

/* ---- Section frame --------------------------------------------- */
.ind-mock-winery {
  background: var(--brb-surface);
  padding: var(--brb-section-pad) 0;
  border-top: 1px solid var(--brb-border);
}

.ind-mock-winery__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.ind-mock-winery__head .eyebrow {
  margin-bottom: 14px;
  display: inline-block;
}

.ind-mock-winery__title {
  font-family: var(--brb-font-display);
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0 0 18px;
}
.ind-mock-winery__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.ind-mock-winery__body {
  font-family: var(--brb-font-body);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.7;
  color: var(--brb-text-muted);
  margin: 0;
}

/* ---- Booking widget chrome (shared by compact + expanded) ------ */
.ind-mock-winery__chrome {
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  font-family: var(--brb-font-body);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
}

.ind-mock-winery__chrome--compact {
  max-width: 380px;
  margin-left: auto;
  margin-right: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}

.ind-mock-winery__chrome--compact.is-visible,
.wd-hero.is-visible .ind-mock-winery__chrome--compact,
.wd-hero__visual.is-visible .ind-mock-winery__chrome--compact {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Header ---------------------------------------------------- */
.ind-mock-winery__header {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
  background: rgba(26, 26, 26, 0.02);
}

.ind-mock-winery__chrome--compact .ind-mock-winery__header {
  padding: 14px;
}

.ind-mock-winery__winery {
  font-family: var(--brb-font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--brb-text);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.ind-mock-winery__subheader {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.6);
  margin: 0;
}

/* ---- Step indicator (expanded only) ---------------------------- */
.ind-mock-winery__step-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.ind-mock-winery__step-text {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
}
.ind-mock-winery__step-dots {
  display: inline-flex;
  gap: 4px;
}
.ind-mock-winery__step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.15);
}
.ind-mock-winery__step-dot--active {
  background: var(--brb-accent);
}

/* ---- Selection grid (expanded only) ---------------------------- */
.ind-mock-winery__selection {
  padding: 14px 18px;
}

.ind-mock-winery__field {
  margin-bottom: 14px;
}
.ind-mock-winery__field:last-child {
  margin-bottom: 0;
}

.ind-mock-winery__field-label {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  margin-bottom: 6px;
}

/* Date pill */
.ind-mock-winery__date {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.30);
  color: var(--brb-text);
}

/* Time grid */
.ind-mock-winery__time-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ind-mock-winery__time-slot {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 8px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  background: #fff;
  color: rgba(26, 26, 26, 0.7);
}
.ind-mock-winery__time-slot--selected {
  background: var(--brb-accent);
  color: #fff;
  border-color: var(--brb-accent);
}

/* Party size */
.ind-mock-winery__party-size {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 999px;
  padding: 4px 14px;
  background: #fff;
}
.ind-mock-winery__party-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
  color: rgba(26, 26, 26, 0.55);
  user-select: none;
}
.ind-mock-winery__party-count {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--brb-text);
}

/* ---- Experience cards (shared by compact + expanded) ----------- */
.ind-mock-winery__experiences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ind-mock-winery__chrome--compact .ind-mock-winery__experiences {
  padding: 14px;
  padding-top: 0;
}

.ind-mock-winery__experience {
  position: relative;
  padding: 10px 12px;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 8px;
  background: #fff;
}
.ind-mock-winery__experience--selected {
  border-color: var(--brb-accent);
  background: rgba(217, 119, 6, 0.04);
  box-shadow: 0 0 0 1px var(--brb-accent) inset;
}

.ind-mock-winery__experience-name {
  font-family: var(--brb-font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--brb-text);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}

.ind-mock-winery__experience-detail {
  font-size: 11px;
  color: rgba(26, 26, 26, 0.6);
  margin: 0 0 6px;
  line-height: 1.4;
}

.ind-mock-winery__experience-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--brb-text);
  margin: 0;
}

.ind-mock-winery__experience-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--brb-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

/* ---- Footer (expanded only) — subtotal + CTA + club prompt ----- */
.ind-mock-winery__footer {
  padding: 14px 18px 16px;
  background: rgba(26, 26, 26, 0.02);
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.ind-mock-winery__subtotal {
  font-size: 13px;
  font-weight: 500;
  color: var(--brb-text);
  margin: 0 0 10px;
}

.ind-mock-winery__cta {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  background: var(--brb-text);
  color: #fff;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* ---- Club prompt (shared) -------------------------------------- */
.ind-mock-winery__club-prompt {
  font-size: 11.5px;
  color: rgba(26, 26, 26, 0.6);
  margin: 10px 0 0;
  text-align: center;
}

.ind-mock-winery__chrome--compact .ind-mock-winery__club-prompt {
  margin: 0;
  padding: 12px 14px 14px;
  text-align: left;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  background: rgba(26, 26, 26, 0.02);
}

.ind-mock-winery__club-link {
  color: var(--brb-accent);
  font-weight: 500;
}

/* ---- Mobile breakpoint ----------------------------------------- */
@media (max-width: 720px) {
  .ind-mock-winery__chrome {
    max-width: 100%;
  }
  .ind-mock-winery__header,
  .ind-mock-winery__selection,
  .ind-mock-winery__footer {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ind-mock-winery__time-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ind-mock-winery__experiences {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Breadcrumbs (.brb-breadcrumbs)
   Site-wide nav chrome rendered by Rank Math via brb_breadcrumbs().
   Sits between site header and the first content section on
   blog posts, blog index, FAQ, location-service, industry-service.
   Skipped on homepage and top-level service pages by design.
============================================================ */
.brb-breadcrumbs {
  background: var(--brb-surface);
  border-bottom: 1px solid var(--brb-border);
  padding-block: 14px;
}
.brb-breadcrumbs__inner {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--brb-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.brb-breadcrumbs a {
  color: var(--brb-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--brb-ease);
}
.brb-breadcrumbs a:hover { border-bottom-color: var(--brb-accent); }
.brb-breadcrumbs__sep {
  color: var(--brb-text-subtle);
  margin: 0 10px;
  display: inline-block;
}
.brb-breadcrumbs .last { color: var(--brb-text-subtle); }

@media (max-width: 600px) {
  .brb-breadcrumbs { padding-block: 12px; }
  .brb-breadcrumbs__inner { font-size: 12px; }
  .brb-breadcrumbs__sep { margin: 0 6px; }
}

/* ============================================================
   Archive hero (.archive-hero)
   Utility-weight intro for fallback archive renders served via
   index.php — category, tag, author, date routes that don't have
   a dedicated template. Deliberately lighter than .blog-hero /
   .faq-hero: this is a list affordance, not an editorial moment.
   Suppressed on is_search() — search ships chrome + grid only.
============================================================ */
.archive-hero {
  background: var(--brb-surface);
  padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--brb-border);
}
.archive-hero .eyebrow {
  margin-bottom: 12px;
  display: inline-block;
}
.archive-hero__title {
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
  color: var(--brb-text);
}

.archive-empty {
  text-align: center;
  padding: clamp(48px, 6vw, 80px) 0;
  color: var(--brb-text-muted);
  font-size: 16px;
}

@media (max-width: 600px) {
  .archive-hero { padding: 32px 0 24px; }
  .archive-hero__title { font-size: clamp(24px, 6vw, 30px); }
}

/* ============================================================
   Accessibility utility — visually hidden but available to screen
   readers and search engines. Used for headings that need to exist
   for a11y/SEO without being rendered visually (e.g., search h1).
============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   42 · Reviews Page (page-reviews.php)
   — Editorial hero + filterable masonry + chip system
   ============================================================ */

/* Container override scoped to /reviews only — wider than 1200px to give
   the masonry columns more room without leaking into other pages. */
.reviews-page .wrap {
  max-width: 1320px;
}

/* ---------------- Hero stat band ---------------- */
.reviews-page__hero {
  position: relative;
  padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
  background: var(--brb-surface);
}

.reviews-page__hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 85% 15%,
    rgba(217, 119, 6, 0.10),
    transparent 55%
  );
  pointer-events: none;
}

.reviews-page__hero-inner {
  position: relative;
  z-index: 1;
}

.reviews-page__hero-title {
  font-family: var(--brb-font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--brb-text);
  margin: 14px 0 20px;
  max-width: 22ch;
}
.reviews-page__hero-title em {
  font-style: italic;
  color: var(--brb-accent);
}

.reviews-page__hero-sub {
  font-family: var(--brb-font-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--brb-text-muted);
  max-width: 56ch;
  margin: 0 0 36px;
}

.reviews-page__stat-row {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--brb-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(20px, 4vw, 48px);
}
.reviews-page__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--brb-font-body);
  font-size: 14px;
  color: var(--brb-text-muted);
}
.reviews-page__stat-num {
  font-family: var(--brb-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--brb-text);
  letter-spacing: -0.02em;
}
.reviews-page__stat-stars {
  color: var(--brb-accent);
  font-size: 14px;
  letter-spacing: 2px;
}
.reviews-page__stat-label {
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.reviews-page__stat-link {
  font-family: var(--brb-font-body);
  font-size: 14px;
  color: var(--brb-text);
  font-weight: 500;
  border-bottom: 1px solid var(--brb-accent);
  padding-bottom: 1px;
  transition: color 200ms var(--brb-ease);
}
.reviews-page__stat-link:hover {
  color: var(--brb-accent);
}

/* ---------------- Filter + sort controls ---------------- */
.reviews-page__controls-section {
  background: var(--brb-surface);
  padding: 8px 0 clamp(20px, 3vw, 32px);
}

.reviews-page__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--brb-border);
  border-bottom: 1px solid var(--brb-border);
}

.reviews-page__filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.reviews-page__filter-divider {
  color: var(--brb-text-subtle);
  margin: 0 4px;
  user-select: none;
  opacity: 0.55;
}

.filter-chip {
  font-family: var(--brb-font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--brb-border-strong);
  background-color: transparent;
  color: var(--brb-text);
  cursor: pointer;
  transition: background-color 200ms var(--brb-ease),
              color 200ms var(--brb-ease),
              border-color 200ms var(--brb-ease);
  letter-spacing: 0.01em;
}
.filter-chip:hover {
  background-color: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border-color: var(--brb-anchor);
}
.filter-chip--active,
.filter-chip--active:hover {
  background-color: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  border-color: var(--brb-anchor);
  font-weight: 500;
}

.reviews-page__sort-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reviews-page__sort-label {
  font-family: var(--brb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brb-text-muted);
}
.sort-dropdown {
  font-family: var(--brb-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--brb-text);
  background: transparent;
  border: 1px solid var(--brb-border-strong);
  border-radius: 8px;
  padding: 8px 32px 8px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 200ms var(--brb-ease);
}
.sort-dropdown:hover,
.sort-dropdown:focus {
  border-color: var(--brb-text);
  outline: none;
}

/* ---------------- Masonry grid (CSS columns) ---------------- */
.reviews-page__grid-section {
  background: var(--brb-surface);
  padding: clamp(24px, 4vw, 48px) 0 clamp(72px, 9vw, 120px);
}

.reviews-grid {
  column-gap: clamp(16px, 2vw, 28px);
  column-count: 1;
}
@media (min-width: 720px) {
  .reviews-grid { column-count: 2; }
}
@media (min-width: 1100px) {
  .reviews-grid { column-count: 3; }
}

/* ---------------- Review card ---------------- */
.review-card {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(16px, 2vw, 28px);
  padding: 28px 28px 22px;
  background: var(--brb-surface-raised);
  border: 1px solid var(--brb-border);
  border-radius: 12px;
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--brb-ease-entrance),
              transform 700ms var(--brb-ease-entrance),
              border-color 250ms var(--brb-ease),
              box-shadow 250ms var(--brb-ease);
  transition-delay: 0ms, 0ms, 0ms, 0ms;
}
.review-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--reveal-delay, 0ms),
                    var(--reveal-delay, 0ms),
                    0ms,
                    0ms;
}
.review-card:hover {
  transform: translateY(-2px);
  border-color: rgba(217, 119, 6, 0.30);
  box-shadow: 0 14px 32px -14px rgba(26, 26, 26, 0.12);
}

.review-card__stars {
  color: var(--brb-accent);
  font-size: 13px;
  letter-spacing: 1.5px;
  margin: 0 0 12px;
}

.review-card__quote {
  font-family: var(--brb-font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--brb-text);
  margin: 0 0 22px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.review-card__attribution-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 12px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--brb-border);
}
.review-card__attribution-row .review-card__avatar { grid-row: 1; grid-column: 1; }
.review-card__attribution-row .review-card__attribution { grid-row: 1; grid-column: 2; }
.review-card__attribution-row .review-card__chips { grid-row: 2; grid-column: 1 / -1; }

.review-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-family: var(--brb-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.review-card__avatar--amber {
  background: var(--brb-accent);
  color: var(--brb-anchor);
}
.review-card__avatar--mint {
  background: var(--brb-mint);
  color: var(--brb-anchor);
}
.review-card__avatar--anchor {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
}

.review-card__attribution {
  min-width: 0;
}
.review-card__name {
  font-family: var(--brb-font-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--brb-text);
  line-height: 1.3;
  margin: 0;
}
.review-card__meta {
  font-family: var(--brb-font-body);
  font-size: 12px;
  color: var(--brb-text-muted);
  margin: 4px 0 0;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.review-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------------- Chips (industry only) ----------------
   Base outlined neutral treatment, then a soft slug-keyed accent
   on the left edge for tasteful visual variety across the 3 buckets. */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--brb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.chip--industry {
  background: transparent;
  color: var(--brb-text-muted);
  border-color: var(--brb-border-strong);
  border-left-width: 3px;
  padding-left: 12px;
}
.chip--industry-home-services {
  border-left-color: var(--brb-accent);
}
.chip--industry-healthcare {
  border-left-color: var(--brb-mint);
}
.chip--industry-local-business {
  border-left-color: var(--brb-anchor);
}

/* ---------------- Final CTA (dark band) ---------------- */
.reviews-page__cta {
  background: var(--brb-anchor);
  color: var(--brb-text-on-dark);
  padding: clamp(72px, 10vw, 128px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reviews-page__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(217, 119, 6, 0.10),
    transparent 60%
  );
  pointer-events: none;
}
.reviews-page__cta-inner { position: relative; }

.reviews-page__cta-title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--brb-text-on-dark);
  margin: 16px 0 20px;
}
.reviews-page__cta-title em {
  font-style: italic;
  color: var(--brb-accent);
}
.reviews-page__cta-body {
  font-family: var(--brb-font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: var(--brb-text-on-dark-muted);
  max-width: 56ch;
  margin: 0 auto 36px;
}
.reviews-page__cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------- Mobile tweaks ---------------- */
@media (max-width: 720px) {
  .reviews-page__controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .reviews-page__sort-group { align-self: flex-end; }
}


/* ============================================================
   Hero stats — 3-stat counter row inside .wd-hero__content
   Used on the trojan-horse trojan template (page-seo-san-luis-
   obispo.php). Lives below .wd-hero__meta inside the hero's
   left column. Lighter visual than .wd-proof.wd-proof--dark
   (which is a section-level pattern). Animated countup wired
   via the inline reveal script's animateCounter() function.
   ============================================================ */
.wd-hero__stats {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--brb-border-on-dark);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);
  max-width: 560px;
}

.wd-hero__stats-item {
  min-width: 0;
}

.wd-hero__stats-value {
  margin: 0 0 4px 0;
  font-family: var(--brb-font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  color: var(--brb-accent);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.wd-hero__stats-label {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(250, 247, 242, 0.7);
  letter-spacing: 0.01em;
}

@media (max-width: 600px) {
  .wd-hero__stats {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: none;
  }
  .wd-hero__stats-value { font-size: 28px; }
}

/* ============================================================
   Google Business Profile card — hero right-column visual
   Renders as Back Road Building's actual GBP knowledge-panel
   shape: cover banner, business header (name + rating row +
   category), action button row (Website / Directions / Call —
   visual only, not interactive), info rows (hours, phone,
   address, services), and one anonymous review excerpt.

   Reveal pattern mirrors .loc-pack-card: opacity:0 + transform
   default, gated by .is-visible on self OR .wd-hero__visual
   ancestor (toggled by inline reveal script's setTimeout
   handler).

   Used on the trojan-horse template only. New pattern, no
   sister-page reuse expected.
   ============================================================ */
.gbp-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(26, 26, 26, 0.08);
  overflow: hidden;
  font-family: var(--brb-font-body);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
  color: var(--brb-text);
}

.gbp-card.is-visible,
.wd-hero.is-visible .gbp-card,
.wd-hero__visual.is-visible .gbp-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gbp-card__bar {
  background: rgba(26, 26, 26, 0.03);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.gbp-card__bar-logo {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--brb-text);
}

.gbp-card__bar-meta {
  font-size: 11px;
  color: var(--brb-text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gbp-card__cover {
  height: 88px;
  background:
    linear-gradient(135deg, rgba(217, 119, 6, 0.18) 0%, rgba(138, 211, 192, 0.20) 100%),
    radial-gradient(circle at 30% 70%, rgba(217, 119, 6, 0.25), transparent 55%),
    radial-gradient(circle at 75% 30%, rgba(138, 211, 192, 0.30), transparent 50%);
  border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}

.gbp-card__body {
  padding: 16px 18px 18px;
}

.gbp-card__header {
  margin-bottom: 14px;
}

.gbp-card__name {
  margin: 0 0 4px 0;
  font-family: var(--brb-font-display);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--brb-text);
}

.gbp-card__rating-row {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--brb-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.gbp-card__rating-num {
  font-weight: 600;
  color: var(--brb-text);
}

.gbp-card__stars {
  color: var(--brb-accent);
  letter-spacing: 1px;
  font-size: 12px;
}

.gbp-card__review-count {
  color: var(--brb-text-muted);
}

.gbp-card__category {
  color: var(--brb-text-muted);
}

.gbp-card__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.gbp-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid rgba(26, 26, 26, 0.10);
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  color: var(--brb-text);
}

.gbp-card__action-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--brb-accent);
}

.gbp-card__action-label {
  letter-spacing: 0.01em;
  font-weight: 500;
}

.gbp-card__info {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gbp-card__info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--brb-text);
}

.gbp-card__info-icon {
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
  font-size: 12px;
  color: var(--brb-text-muted);
  line-height: 1.4;
}

.gbp-card__info-text {
  color: var(--brb-text);
}

.gbp-card__info-text strong {
  color: #1a8754;
  font-weight: 600;
}

.gbp-card__review {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
}

.gbp-card__review-stars {
  display: block;
  color: var(--brb-accent);
  letter-spacing: 1.5px;
  font-size: 11px;
  margin-bottom: 6px;
}

.gbp-card__review-quote {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--brb-text-muted);
  font-style: italic;
}

@media (max-width: 960px) {
  .gbp-card {
    max-width: 480px;
    margin-inline: auto;
  }
}

/* ============================================================
   .wd-principles --3up modifier + supporting blocks for B.3
   Section 02 (trojan-horse template counter-position cards).
   The base .wd-principles pattern uses repeat(4, 1fr) at desktop;
   the --3up modifier overrides to repeat(3, 1fr) for the 3-card
   "Why most small business SEO underperforms" failure-mode grid.
   Plus __intro / __close paragraph blocks and __stats spacing
   for the in-section cost-range stat row.
   ============================================================ */
.wd-principles--3up .wd-principles__grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .wd-principles--3up .wd-principles__grid {
    grid-template-columns: 1fr;
  }
}

.wd-principles__head:has(.wd-principles__intro) {
  max-width: 760px;
}

.wd-principles__intro {
  margin: 24px 0 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--brb-text-muted);
  text-align: left;
}

.wd-principles__stats {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 900px;
  margin-inline: auto;
}

.wd-principles__close {
  max-width: 760px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--brb-text);
  text-align: left;
}

/* ============================================================
   .wd-platforms --5up modifier for B.3 Section 03 (trojan-horse
   template service cards). Base .wd-platforms__grid is 2-up at
   desktop, 1-up at ≤640px (line 9507). 5 cards in 2-up produces
   2/2/1; the 5th card (Link building) spans full-row width via
   :last-child override for visual emphasis on the section's
   closing service category. Mobile reverts to 1-up natural.
   ============================================================ */
.wd-platforms--5up .wd-platforms__grid > :last-child {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .wd-platforms--5up .wd-platforms__grid > :last-child {
    grid-column: auto;
  }
}

/* ============================================================
   .industry-cards / .industry-card — compact 2x2 grid pattern
   for B.3 Section 04 (trojan-horse template). Purpose-built
   variant of the industry-vertical card concept; intentionally
   distinct from /industries/ page's full-bleed alternating
   .industry-block pattern (which lives at ~viewport-tall scale).

   This compact pattern fits 4 industry cards into a single
   landing-page section (2x2 at desktop, 1-up at ≤760px) with
   body + internal link per card. No clients list, no service
   chips, no industry vignette — those live on the deeper
   /industries/ destination page. The ◭ / ✚ / ❀ / ✱ glyph set
   anchors visual differentiation per industry without a heavy
   visual right-column.

   Voice precedents preserved in card bodies:
     · real estate SLO scope-out parenthetical
     · "3,500+ leads delivered" only in real estate card
     · "direct wine sales and club memberships" in winery card
   ============================================================ */
.industry-cards {
  padding: var(--brb-section-pad) 0;
  background: var(--brb-surface);
  border-top: 1px solid var(--brb-border);
}

.industry-cards__head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

.industry-cards__head .eyebrow {
  margin-bottom: 16px;
  display: inline-block;
}

.industry-cards__title {
  font-family: var(--brb-font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--brb-text);
  margin: 0;
}

.industry-cards__title em {
  font-style: italic;
  color: var(--brb-accent);
}

.industry-cards__sub {
  margin: 24px 0 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--brb-text-muted);
  text-align: left;
}

.industry-cards__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .industry-cards__grid { grid-template-columns: 1fr; }
}

.industry-card {
  background: #fff;
  border: 1px solid var(--brb-border);
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 300ms var(--brb-ease),
              box-shadow 300ms var(--brb-ease),
              border-color 300ms var(--brb-ease);
}

.industry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.1);
  border-color: rgba(217, 119, 6, 0.3);
}

.industry-card__icon {
  font-size: 28px;
  color: var(--brb-accent);
  line-height: 1;
  font-family: var(--brb-font-display);
}

.industry-card__title {
  font-family: var(--brb-font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--brb-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}

.industry-card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--brb-text-muted);
  margin: 0;
  flex: 1;
}

.industry-card__link {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brb-accent);
  text-decoration: none;
  transition: color 200ms var(--brb-ease);
  align-self: flex-start;
}

.industry-card__link:hover {
  color: var(--brb-text);
}