/* ============================================================================
       BRIGHT OWL — Homepage v2
       Built from Kevin's Figma Single Elements + Homepage node (107:5027)
       Design tokens from BrightOwl-figma-colors-typography-effectstyles.json
       NO external tokens.css — fully self-contained
       ============================================================================ */

    /* --- Kevin's Design Tokens (exact from Figma) --- */
    :root {
      /* Colors */
      --bo-cosmic-orange: #FF6347;
      --bo-stellar-pink: #E01D78;
      --bo-deep-night: #080B15;
      --bo-space-dust: #2D2331;
      --bo-nova-white: #FFFFFF;
      --bo-form-grey: #F5F5F5;
      --bo-light-lunar-grey: #E6E6E6;
      --bo-mid-lunar-grey: #A0A0A0;
      --bo-dark-lunar-grey: #404040;
      --bo-brand-gradient: linear-gradient(135deg, #E01D78 0%, #FF6347 100%);
      --bo-text-dark: #2D2331;
      --bo-text-emphasis: #122d3c;

      /* Typography — Kevin's exact BO- styles */
      --bo-font-display: 'Plus Jakarta Sans', sans-serif;
      --bo-font-body: 'Inter', sans-serif;

      /* Effects */
      --bo-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
      --bo-shadow-sm: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    }

    /* --- Base reset --- */
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    html, body { margin: 0; padding: 0; overflow-x: hidden; }
    body {
      font-family: var(--bo-font-body);
      font-size: 17px;
      line-height: 27px;
      font-weight: 400;
      color: var(--bo-text-dark);
      background: var(--bo-nova-white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; }

    /* --- Typography Classes (Kevin's exact specs) --- */
    .bo-h1 { font-family: var(--bo-font-display); font-weight: 700; font-size: 48px; line-height: 58px; letter-spacing: 0; margin: 0; }
    .bo-h2 { font-family: var(--bo-font-display); font-weight: 500; font-size: 36px; line-height: 42px; letter-spacing: 0; margin: 0; }
    .bo-h3 { font-family: var(--bo-font-display); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: 0; margin: 0; }
    .bo-h4 { font-family: var(--bo-font-display); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: 0; margin: 0; }
    .bo-h5 { font-family: var(--bo-font-display); font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: 0; text-transform: capitalize; margin: 0; }
    .bo-cta-text { font-family: var(--bo-font-body); font-weight: 400; font-size: 17px; line-height: 27px; text-transform: capitalize; }
    .bo-large-copy { font-family: var(--bo-font-body); font-weight: 400; font-size: 17px; line-height: 27px; margin: 0; }
    .bo-body { font-family: var(--bo-font-body); font-weight: 400; font-size: 15px; line-height: 24px; margin: 0; }
    .bo-body-bold { font-family: var(--bo-font-body); font-weight: 700; font-size: 15px; line-height: 24px; }
    .bo-hyperlink { font-family: var(--bo-font-body); font-weight: 400; font-size: 15px; line-height: 24px; text-decoration: underline; }
    .bo-small { font-family: var(--bo-font-body); font-weight: 400; font-size: 12px; line-height: 18px; margin: 0; }
    .bo-display-body { font-family: var(--bo-font-display); font-weight: 400; font-size: 24px; line-height: 30px; margin: 0; }
    .bo-display-body-bold { font-family: var(--bo-font-display); font-weight: 700; font-size: 24px; line-height: 30px; margin: 0; }

    /* --- Section Label (Kevin's Single Element 75:1319: 3 themes, arrow inherits text color) --- */
    .section-label { display: inline-flex; align-items: center; gap: 5px; }
    .section-label--pink { color: var(--bo-stellar-pink); }
    .section-label--white { color: var(--bo-nova-white); }
    .section-label--black { color: var(--bo-space-dust); }
    .section-label__text { font-family: var(--bo-font-display); font-weight: 500; font-size: 20px; line-height: 24px; text-transform: capitalize; white-space: nowrap; margin: 0; color: inherit; }
    .section-label__arrow { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }

    /* --- Button (Kevin's Single Element: 4 styles, h44 px40 py15 r5 w172min) --- */
    .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 15px 40px; border-radius: 5px; font-family: var(--bo-font-body); font-weight: 400; font-size: 17px; line-height: 27px; text-transform: capitalize; text-decoration: none; white-space: nowrap; border: 1px solid transparent; box-shadow: var(--bo-shadow-sm); transition: transform 0.15s ease, opacity 0.15s ease; }
    .btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .btn--primary { background: var(--bo-stellar-pink); color: var(--bo-nova-white); }
    .btn--secondary { background: var(--bo-nova-white); color: var(--bo-stellar-pink); }
    .btn--white-line { background: transparent; color: var(--bo-nova-white); border-color: var(--bo-nova-white); box-shadow: var(--bo-shadow); }
    .btn--blue-line { background: transparent; color: var(--bo-stellar-pink); border-color: var(--bo-stellar-pink); }
    .btn--nav { width: 200px; }

    /* ============================================================================
       NAV — Kevin's Single Element (4:1340, Size=Default Theme=Dark)
       ============================================================================ */
    .nav {
      background: var(--bo-deep-night);
      border-bottom: 1px solid var(--bo-dark-lunar-grey);
      padding: 20px 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .nav__logo { height: 22px; width: 200px; flex-shrink: 0; }
    .nav__logo img { height: 100%; width: 100%; object-fit: contain; }
    .nav__links { display: flex; align-items: center; gap: 24px; }
    .nav__link { display: inline-flex; align-items: center; font-family: var(--bo-font-body); font-weight: 400; font-size: 17px; line-height: 27px; color: var(--bo-nova-white); white-space: nowrap; }
    .nav__link:hover { color: var(--bo-cosmic-orange); }
    .nav__link-arrow { width: 24px; height: 24px; margin-left: 4px; filter: brightness(0) invert(1); }
    .nav__toggle { display: none; background: transparent; border: 0; padding: 0; width: 24px; height: 24px; }
    .nav__toggle img { width: 100%; height: 100%; filter: brightness(0) invert(1); }

    /* ============================================================================
       HERO SECTION (111:395) — text left, framed astronaut right, cosmic bg
       ============================================================================ */
    .hero {
      position: relative;
      background:
        url('/assets/starfield.webp') 0 0 / 900px auto repeat,
        var(--bo-deep-night);
      background-blend-mode: screen, normal;
      padding: 100px;
      display: flex;
      align-items: center;
      gap: 60px;
      overflow: hidden;
    }
    .hero__content { flex: 1 0 0; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
    .hero__container-text { display: flex; flex-direction: column; gap: 30px; width: 100%; }
    .hero__title { color: var(--bo-cosmic-orange); }
    .hero__body { color: var(--bo-nova-white); font-family: var(--bo-font-body); font-size: 17px; line-height: 27px; margin: 0; }
    .hero__body p { margin: 0 0 27px 0; }
    .hero__body p:last-child { margin-bottom: 0; }
    .hero__media {
      flex: 0 1 589.5px;
      max-width: 589.5px;
      width: 100%;
      align-self: center;
      aspect-ratio: 589.5 / 584;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      background: var(--bo-deep-night);
    }
    .hero__media img { width: 100%; height: 100%; object-fit: cover; }

    /* ============================================================================
       CENTERED TEXT — GRADIENT (111:408) "Your Agency Shouldn't Stop Growing"
       Kevin's spec: pl-100 pr-417 py-100, gradient bg with starfield
       ============================================================================ */
    .centered-gradient {
      position: relative;
      padding: 100px 417px 100px 100px;
      background:
        url('/assets/starfield.webp') 0 0 / 900px auto repeat,
        var(--bo-brand-gradient);
      background-blend-mode: screen, normal;
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: flex-start;
      overflow: hidden;
    }
    .centered-gradient__body { font-family: var(--bo-font-display); font-weight: 400; font-size: 24px; line-height: 30px; color: var(--bo-nova-white); margin: 0; }
    .centered-gradient__emphasis { font-family: var(--bo-font-display); font-weight: 400; font-size: 24px; line-height: 30px; color: var(--bo-text-emphasis); margin: 0; }

    /* ============================================================================
       IMAGE + TEXT SPLIT (111:416) — image LEFT, text RIGHT, white bg
       ============================================================================ */
    .split {
      background: var(--bo-nova-white);
      border-bottom: 1px solid var(--bo-light-lunar-grey);
      padding: 100px;
      display: flex;
      align-items: center;
      gap: 60px;
    }
    .split__media {
      flex: 0 1 589.5px;
      max-width: 589.5px;
      width: 100%;
      align-self: center;
      aspect-ratio: 589.5 / 584;
      border-radius: 20px;
      overflow: hidden;
      background: var(--bo-deep-night);
    }
    .split__media img { width: 100%; height: 100%; object-fit: cover; }
    .split__content { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
    .split__inner { display: flex; flex-direction: column; gap: 30px; width: 100%; }
    .split__title { color: var(--bo-cosmic-orange); }
    .split__body { color: var(--bo-text-dark); font-family: var(--bo-font-body); font-size: 17px; line-height: 27px; margin: 0; }
    .split__body p { margin: 0 0 27px 0; }
    .split__body p:last-child { margin-bottom: 0; }

    /* ============================================================================
       SIX CARD GRID (111:429) — 3×2 grid, white bg, grey cards
       Kevin's spec: p-100, gap-30 rows, gap-30 columns, cards self-stretch
       ============================================================================ */
    .six-cards {
      background: var(--bo-nova-white);
      border-bottom: 1px solid var(--bo-form-grey);
      padding: 100px;
      display: flex;
      flex-direction: column;
      gap: 60px;
      align-items: center;
    }
    .six-cards__header { display: flex; flex-direction: column; gap: 30px; align-items: center; width: 100%; }
    .six-cards__title { color: var(--bo-cosmic-orange); text-align: center; width: 100%; }
    .six-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; align-items: stretch; }
    .six-cards__card {
      background: var(--bo-form-grey);
      border-radius: 5px;
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
      justify-content: center;
      height: 100%;
    }
    .six-cards__number { color: var(--bo-stellar-pink); font-family: var(--bo-font-body); font-weight: 400; font-size: 17px; line-height: 27px; }
    .six-cards__card-title { color: var(--bo-text-dark); font-family: var(--bo-font-display); font-weight: 400; font-size: 24px; line-height: 30px; }
    .six-cards__card-body { color: var(--bo-text-dark); font-family: var(--bo-font-body); font-weight: 400; font-size: 17px; line-height: 27px; }

    /* ============================================================================
       ICON FEATURE GRID (111:469) "Why Us" — dark bg, 3 rows of 2 columns
       ============================================================================ */
    .why-us {
      background: var(--bo-deep-night);
      border-bottom: 1px solid var(--bo-form-grey);
      padding: 100px;
      display: flex;
      flex-direction: column;
      gap: 60px;
      align-items: center;
    }
    .why-us__header { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; width: 100%; }
    .why-us__title { color: var(--bo-cosmic-orange); }
    .why-us__subtitle { color: var(--bo-light-lunar-grey); font-family: var(--bo-font-body); font-weight: 400; font-size: 17px; line-height: 27px; margin: 0; }
    .why-us__row { display: flex; gap: 30px; width: 100%; align-items: flex-start; }
    .why-us__item { flex: 1 0 0; min-width: 0; display: flex; gap: 10px; align-items: flex-start; }
    .why-us__icon { width: 30px; height: 30px; flex-shrink: 0; }
    .why-us__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
    .why-us__item-title { color: var(--bo-form-grey); font-family: var(--bo-font-display); font-weight: 400; font-size: 24px; line-height: 30px; margin: 0; }
    /* Kevin: rows 2 and 3 titles are pure white */
    .why-us__row:nth-of-type(n+3) .why-us__item-title { color: var(--bo-nova-white); }
    .why-us__item-body { color: var(--bo-form-grey); font-family: var(--bo-font-body); font-weight: 400; font-size: 17px; line-height: 27px; margin: 0; }
    .why-us__item-body--small { font-size: 15px; line-height: 24px; }

    /* ============================================================================
       CENTERED TEXT — LIGHT (111:529) "See The Difference In 30 Days"
       Kevin: white bg, pl-100 pr-417 py-100, pink eyebrow, dark body
       ============================================================================ */
    .see-diff {
      background: var(--bo-nova-white);
      border-bottom: 1px solid #aed5ee;
      padding: 100px 417px 100px 100px;
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: flex-start;
    }
    .see-diff__body { font-family: var(--bo-font-display); font-weight: 400; font-size: 24px; line-height: 30px; color: var(--bo-text-dark); margin: 0; }
    .see-diff__emphasis { font-family: var(--bo-font-display); font-weight: 700; font-size: 24px; line-height: 30px; color: var(--bo-text-emphasis); margin: 0; }

    /* ============================================================================
       CTA / TWO BUTTON (111:537) "Start Growing" — gradient bg
       Kevin: px-207 py-100, gap-60, gap-30 in header, gap-30 in buttons
       ============================================================================ */
    .cta-two {
      position: relative;
      background:
        url('/assets/starfield.webp') 0 0 / 900px auto repeat,
        var(--bo-brand-gradient);
      background-blend-mode: screen, normal;
      border-bottom: 1px solid var(--bo-light-lunar-grey);
      padding: 100px 207px;
      display: flex;
      flex-direction: column;
      gap: 60px;
      align-items: center;
      overflow: hidden;
    }
    .cta-two__header { display: flex; flex-direction: column; gap: 30px; align-items: center; width: 100%; }
    .cta-two__title { color: var(--bo-nova-white); text-align: center; }
    .cta-two__body { color: var(--bo-nova-white); font-family: var(--bo-font-display); font-weight: 400; font-size: 24px; line-height: 30px; text-align: center; margin: 0; }
    .cta-two__body p { margin: 0 0 30px 0; }
    .cta-two__body p:last-child { margin-bottom: 0; }
    .cta-two__buttons { display: flex; gap: 30px; align-items: center; }
    .cta-two__buttons .btn { width: 260px; flex: 0 0 260px; min-width: 0; }

    /* ============================================================================
       FOOTER (6:354) — Kevin's Single Element, Size=Default
       ============================================================================ */
    .footer { background: var(--bo-deep-night); overflow: hidden; }
    .footer__inner {
      padding: 100px;
      border-bottom: 1px solid var(--bo-nova-white);
      display: flex;
      gap: 30px;
      align-items: flex-start;
    }
    .footer__brand { display: flex; flex-direction: column; gap: 30px; align-items: center; justify-content: center; flex-shrink: 0; }
    .footer__logo { width: 219.649px; height: 84.402px; }
    .footer__logo img { width: 100%; height: 100%; object-fit: contain; }
    .footer__tagline { color: var(--bo-nova-white); font-family: var(--bo-font-body); font-weight: 400; font-size: 15px; line-height: 24px; text-align: center; margin: 0; max-width: 220px; }
    .footer__content {
      flex: 1 0 0;
      max-width: 802px;
      border-left: 1px solid var(--bo-mid-lunar-grey);
      padding-left: 30px;
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: flex-start;
      justify-content: flex-end;
    }
    .footer__col-title { font-family: var(--bo-font-display); font-weight: 500; font-size: 20px; line-height: 24px; text-transform: capitalize; color: var(--bo-nova-white); margin: 0 0 24px 0; }
    .footer__col { display: block; }
    .footer__links { display: flex; flex-direction: column; gap: 0; }
    .footer__link { font-family: var(--bo-font-body); font-weight: 400; font-size: 15px; line-height: 24px; color: var(--bo-nova-white); text-decoration: underline; text-underline-offset: 3px; display: block; padding: 0; margin: 0; }
    .footer__link:hover { color: var(--bo-cosmic-orange); }
    .footer__contact-line { font-family: var(--bo-font-body); font-weight: 400; font-size: 15px; line-height: 24px; color: var(--bo-nova-white); margin: 0; }
    .footer__contact-line a { color: var(--bo-stellar-pink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
    .footer__social { display: flex; gap: 20px; align-items: center; }
    .footer__social a { width: 30px; height: 30px; display: block; }
    .footer__social img { width: 100%; height: 100%; }
    .footer__copyright { font-family: var(--bo-font-body); font-weight: 400; font-size: 12px; line-height: 18px; color: var(--bo-light-lunar-grey); margin: 0; }

    /* ============================================================================
       MOBILE / RESPONSIVE
       ============================================================================ */
    @media (max-width: 1024px) {
      .nav { padding: 20px 40px; }
      .hero, .split, .six-cards, .why-us, .cta-two { padding: 60px 40px; }
      .centered-gradient, .see-diff { padding: 60px 40px; }
      .footer__inner { padding: 60px 40px; }
    }

    @media (max-width: 768px) {
      /* Nav mobile */
      .nav { padding: 15px 20px; height: 60px; }
      .nav__logo { width: 150px; height: 17px; }
      .nav__links { display: none; }
      .nav__toggle { display: block; }
      .nav__links[data-open="true"] {
        display: flex;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bo-deep-night);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 24px;
        z-index: 99;
      }
      .nav__links[data-open="true"] .nav__link { padding: 16px 0; font-size: 20px; line-height: 32px; width: 100%; border-bottom: 1px solid var(--bo-dark-lunar-grey); }
      .nav__links[data-open="true"] .btn--nav { margin-top: 24px; width: 100%; }

      /* Hero mobile */
      .hero { flex-direction: column; padding: 40px 20px; gap: 40px; }
      .hero__title { font-size: 38px; line-height: 42px; }
      .hero__content { text-align: center; align-items: center; }
      .hero__container-text { align-items: center; }

      /* Centered gradient mobile */
      .centered-gradient { padding: 60px 20px; text-align: center; align-items: center; }
      .centered-gradient .section-label { text-align: center; }

      /* Image split mobile */
      .split { flex-direction: column; padding: 40px 20px; gap: 30px; }
      .split__content { text-align: center; align-items: center; }
      .split__inner { align-items: center; }
      .split__title { text-align: center; }

      /* Six cards mobile */
      .six-cards { padding: 40px 20px; gap: 30px; }
      .six-cards__grid { grid-template-columns: 1fr; gap: 16px; }
      .six-cards__title { font-size: 24px; line-height: 30px; }

      /* Why us mobile */
      .why-us { padding: 40px 20px; gap: 40px; }
      .why-us__title { font-size: 24px; line-height: 30px; }
      .why-us__row { flex-direction: column; gap: 30px; }

      /* See diff mobile */
      .see-diff { padding: 40px 20px; }
      .see-diff__body, .see-diff__emphasis { font-size: 15px; line-height: 22px; }

      /* CTA two mobile */
      .cta-two { padding: 40px 20px; gap: 30px; }
      .cta-two__title { font-size: 24px; line-height: 30px; }
      .cta-two__body { font-size: 15px; line-height: 22px; }
      .cta-two__buttons { flex-direction: column; width: 100%; gap: 16px; }
      .cta-two__buttons .btn { width: 100%; max-width: 320px; }

      /* Footer mobile — Kevin's Size=Mobile spec */
      .footer__inner { padding: 60px 20px; flex-direction: column; align-items: center; gap: 40px; }
      .footer__brand { padding-bottom: 30px; border-bottom: 1px solid var(--bo-mid-lunar-grey); width: 100%; }
      .footer__content { border-left: none; padding-left: 0; align-items: center; text-align: center; width: 100%; max-width: none; }
      .footer__col, .footer__col-title, .footer__contact-line { text-align: center; }
      .footer__copyright { text-align: center; }

      /* Section labels adjust on mobile — display block for centering */
      section .section-label { align-self: center; }

      /* Typography scale down */
      .bo-h2 { font-size: 24px; line-height: 30px; }
    }
/* ============================================================================
   BLOCK SET — adobe-style-site-build additions (v14)
   All motion is prefers-reduced-motion aware.
   ============================================================================ */

/* --- Sticky nav white-on-scroll --- */
.nav {
  transition: background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.nav--scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
}
.nav--scrolled .nav__link { color: var(--bo-space-dust); }
.nav--scrolled .nav__link:hover { color: var(--bo-stellar-pink); }
.nav--scrolled .nav__link-arrow { filter: brightness(0); }
.nav--scrolled .nav__toggle img { filter: none; }

/* Trigger for mega-menu is styled as a plain nav link with cursor pointer */
.nav__mega-wrap { position: relative; display: inline-flex; align-items: center; }
.nav__mega-trigger {
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; cursor: pointer;
  color: var(--bo-nova-white);
  display: inline-flex; align-items: center; gap: 4px;
}
.nav--scrolled .nav__mega-trigger { color: var(--bo-space-dust); }
.nav__mega-trigger[aria-expanded="true"] .nav__link-arrow { transform: rotate(180deg); }
.nav__link-arrow { transition: transform 200ms ease; }

/* --- Mega-menu panel --- */
.mega-menu {
  position: fixed;
  top: 64px; /* Below nav; adjusted by JS/CSS below on scroll */
  left: 0;
  right: 0;
  background: var(--bo-nova-white);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 90;
  border-top: 1px solid var(--bo-light-lunar-grey);
}
.mega-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-menu__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 100px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
}
.mega-menu__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mega-menu__tile {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  transition: background 150ms ease;
  text-decoration: none;
  color: var(--bo-space-dust);
  align-items: flex-start;
}
.mega-menu__tile:hover,
.mega-menu__tile:focus-visible {
  background: var(--bo-form-grey);
  outline: none;
}
.mega-menu__tile:focus-visible {
  box-shadow: 0 0 0 2px var(--bo-stellar-pink);
}
.mega-menu__tile-code {
  width: 40px; height: 40px;
  border-radius: 6px;
  background: var(--bo-form-grey);
  color: var(--bo-stellar-pink);
  font-family: var(--bo-font-display);
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mega-menu__tile--flagship .mega-menu__tile-code {
  background: var(--bo-stellar-pink);
  color: var(--bo-nova-white);
}
.mega-menu__tile-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-menu__tile-name {
  font-family: var(--bo-font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--bo-space-dust);
}
.mega-menu__tile-promise {
  font-family: var(--bo-font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--bo-mid-lunar-grey);
}
.mega-menu__side {
  background: var(--bo-form-grey);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mega-menu__side-eyebrow {
  font-family: var(--bo-font-display);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--bo-stellar-pink);
  margin: 0;
}
.mega-menu__side-title {
  font-family: var(--bo-font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: var(--bo-space-dust);
  margin: 0;
}
.mega-menu__side-body {
  font-family: var(--bo-font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--bo-space-dust);
  margin: 0;
}
.mega-menu__side .btn { align-self: flex-start; }

@media (max-width: 1024px) {
  .mega-menu__inner {
    grid-template-columns: 1fr;
    padding: 24px 40px;
    gap: 24px;
  }
  .mega-menu__tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mega-menu { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .mega-menu__inner { padding: 16px 20px; }
  .mega-menu__tiles { grid-template-columns: 1fr; }
}

/* --- Scroll reveal --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
  animation: bo-reveal-fallback 700ms ease 1500ms forwards;
}
@keyframes bo-reveal-fallback {
  to { opacity: 1; transform: none; }
}
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="fade"] { transform: none; }
.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Trusted-by marquee --- */
.trusted {
  background: var(--bo-nova-white);
  padding: 60px 0 80px;
  border-bottom: 1px solid var(--bo-form-grey);
  overflow: hidden;
}
.trusted__title {
  text-align: center;
  font-family: var(--bo-font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--bo-mid-lunar-grey);
  margin: 0 0 40px 0;
}
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 80px, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 80px, black calc(100% - 80px), transparent);
}
.marquee + .marquee { margin-top: 32px; }
.marquee__track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marquee-scroll 50s linear infinite;
  align-items: center;
}
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 45s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  height: 44px;
  width: auto;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 200ms ease;
  flex-shrink: 0;
}
.marquee__item:hover { opacity: 1; }
.marquee__item img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ============================================================================
   PRICING v2 — Pricing Tier Cards (from Figma node 113:5798)
   ============================================================================ */
.pricing-tiers {
  background: var(--bo-form-grey);
  padding: 100px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: stretch;
}
.pricing-tiers__header {
  display: flex; flex-direction: column; gap: 30px; align-items: center;
  text-align: center;
}
.pricing-tiers__title { color: var(--bo-cosmic-orange); }
.pricing-tiers__subtitle {
  font-family: var(--bo-font-body); font-size: 17px; line-height: 27px;
  color: var(--bo-space-dust); margin: 0; max-width: 720px;
}
.pricing-tiers__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  align-items: stretch;
}
.pricing-card {
  background: var(--bo-nova-white);
  border-radius: 5px;
  padding: 30px;
  display: flex; flex-direction: column; gap: 20px;
  height: 100%;
}
.pricing-card--elevated { box-shadow: var(--bo-shadow-sm); }
.pricing-card__head { display: flex; flex-direction: column; gap: 20px; }
.pricing-card__cat {
  font-family: var(--bo-font-body); font-size: 17px; line-height: 27px;
  color: var(--bo-stellar-pink); margin: 0; font-weight: 400;
}
.pricing-card__price { display: flex; align-items: baseline; gap: 4px; margin: 0; }
.pricing-card__amount {
  font-family: var(--bo-font-display); font-size: 30px; line-height: 36px;
  color: var(--bo-space-dust);
}
.pricing-card__per {
  font-family: var(--bo-font-body); font-size: 17px; line-height: 27px;
  color: var(--bo-space-dust);
}
.pricing-card__rule {
  border: 0; border-top: 1px solid var(--bo-light-lunar-grey);
  margin: 0; width: 100%;
}
.pricing-card__desc {
  font-family: var(--bo-font-body); font-size: 15px; line-height: 24px;
  color: var(--bo-space-dust); margin: 0;
}
.pricing-card__desc:first-of-type { opacity: 0.8; }
.pricing-card__focus-title {
  font-family: var(--bo-font-body); font-size: 12px; line-height: 18px;
  font-weight: 700; color: var(--bo-space-dust); margin: 0;
}
.pricing-card__focus {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pricing-card__focus li {
  font-family: var(--bo-font-body); font-size: 12px; line-height: 18px;
  color: var(--bo-space-dust);
}
.pricing-card__cta { width: 100%; margin-top: auto; }

/* Dark six-card variant used on Pricing */
.six-cards--dark {
  background: var(--bo-deep-night);
}
.six-cards--dark .six-cards__title { color: var(--bo-cosmic-orange); }
.six-cards--dark .six-cards__card {
  background: var(--bo-dark-lunar-grey);
}
.six-cards--dark .six-cards__card-title { color: var(--bo-nova-white); }
.six-cards--dark .six-cards__card-body { color: var(--bo-nova-white); }

/* Bullet list — 5 items with heading + body */
.bullet-list {
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; gap: 30px;
}
.bullet-list__item {
  display: flex; flex-direction: column; gap: 12px;
}
.bullet-list__title {
  font-family: var(--bo-font-display); font-weight: 400;
  font-size: 24px; line-height: 30px;
  color: var(--bo-space-dust); margin: 0;
}
.bullet-list__body {
  font-family: var(--bo-font-body); font-size: 15px; line-height: 24px;
  color: var(--bo-space-dust); margin: 0;
}

@media (max-width: 1024px) {
  .pricing-tiers__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-tiers { padding: 60px 40px; }
}
@media (max-width: 640px) {
  .pricing-tiers__grid { grid-template-columns: 1fr; }
  .pricing-tiers { padding: 40px 20px; }
}

/* Contact form */
.contact-form { background: var(--bo-nova-white); padding: 100px; }
.contact-form__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1240px; margin: 0 auto; }
.contact-form__intro { display: flex; flex-direction: column; gap: 24px; }
.contact-form__intro h2 { color: var(--bo-cosmic-orange); }
.contact-form__note { font-family: var(--bo-font-body); font-size: 15px; line-height: 24px; color: var(--bo-space-dust); margin: 0; }
.contact-form__note a { color: var(--bo-stellar-pink); text-decoration: underline; text-underline-offset: 3px; }
.contact-form__form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form__field { display: flex; flex-direction: column; gap: 8px; }
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__label { font-family: var(--bo-font-body); font-size: 13px; line-height: 18px; color: var(--bo-space-dust); font-weight: 500; }
.contact-form__input { padding: 12px 16px; border: 1px solid var(--bo-light-lunar-grey); border-radius: 5px; background: var(--bo-form-grey); font-family: var(--bo-font-body); font-size: 15px; line-height: 24px; color: var(--bo-space-dust); }
.contact-form__input:focus { outline: 2px solid var(--bo-stellar-pink); outline-offset: 2px; border-color: transparent; }
.contact-form__textarea { resize: vertical; min-height: 100px; }
.contact-form__submit { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 1024px) {
  .contact-form { padding: 60px 40px; }
  .contact-form__inner { grid-template-columns: 1fr; gap: 30px; }
  .contact-form__form { grid-template-columns: 1fr; }
}

/* Wide see-diff variant (accessibility page) */
.see-diff--wide { padding: 100px; }

/* Centered hero variant (404, thank-you) */
.hero--centered { justify-content: center; text-align: center; }
.hero__content--centered { align-items: center; max-width: 640px; text-align: center; }
.hero__content--centered .hero__container-text { align-items: center; }
.hero__actions { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

/* 4-col grid variant for how-it-works partnership steps */
.six-cards__grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .six-cards__grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .six-cards__grid--four { grid-template-columns: 1fr; } }

/* ============================================================================
   RATE CARDS — service page pricing tables
   ============================================================================ */
.rates {
  background: var(--bo-form-grey);
  padding: 100px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: stretch;
}
.rates__header {
  display: flex; flex-direction: column; gap: 24px;
  align-items: flex-start;
  max-width: 720px;
}
.rates__title { color: var(--bo-cosmic-orange); }
.rates__subtitle {
  font-family: var(--bo-font-body); font-size: 17px; line-height: 27px;
  color: var(--bo-space-dust); margin: 0;
}
.rates__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rate-card {
  background: var(--bo-nova-white);
  border-radius: 5px;
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  align-items: center;
  box-shadow: var(--bo-shadow-sm);
}
.rate-card__role {
  font-family: var(--bo-font-display); font-weight: 500;
  font-size: 24px; line-height: 30px;
  color: var(--bo-space-dust); margin: 0;
}
.rate-card__prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rate-card__price {
  display: flex; flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.rate-card__from {
  font-family: var(--bo-font-body); font-size: 12px; line-height: 18px;
  color: var(--bo-mid-lunar-grey); text-transform: uppercase; letter-spacing: 0.5px;
}
.rate-card__amount {
  font-family: var(--bo-font-display); font-weight: 500;
  font-size: 30px; line-height: 36px;
  color: var(--bo-stellar-pink);
}
.rate-card__unit {
  font-family: var(--bo-font-body); font-size: 15px; line-height: 24px;
  color: var(--bo-space-dust);
  margin-top: -8px;
}
.rate-card__label {
  font-family: var(--bo-font-body); font-size: 12px; line-height: 18px;
  color: var(--bo-mid-lunar-grey);
  margin-top: 4px;
}
.rates__footnote {
  font-family: var(--bo-font-body); font-size: 13px; line-height: 20px;
  color: var(--bo-mid-lunar-grey);
  margin: 0;
  max-width: 900px;
}

@media (max-width: 1024px) {
  .rates { padding: 60px 40px; gap: 40px; }
  .rate-card { grid-template-columns: 1fr; gap: 20px; }
  .rate-card__prices { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .rates { padding: 40px 20px; gap: 30px; }
  .rate-card { padding: 20px; }
  .rate-card__prices { grid-template-columns: 1fr; gap: 16px; }
  .rate-card__amount { font-size: 24px; line-height: 30px; }
}


/* ============================================================================
   COMPLETE RATE MATRIX — /pricing full 22-role table grouped by discipline
   ============================================================================ */
.rates--full {
  padding: 100px;
  gap: 60px;
}
.rate-category {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rate-category + .rate-category {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--bo-light-lunar-grey);
}
.rate-category__title {
  font-family: var(--bo-font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 36px;
  color: var(--bo-cosmic-orange);
  margin: 0;
}
.rate-category__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rate-category .rate-card {
  padding: 24px 30px;
}
.rate-category .rate-card__role {
  font-size: 20px;
  line-height: 26px;
}
.rate-category .rate-card__amount {
  font-size: 26px;
  line-height: 32px;
}


/* ============================================================================
   PRICING v15.6 — USA strikethrough comparison + top-of-page rate matrix
   ============================================================================ */
.rates--top {
  padding-top: 60px;
}
.rates--top .rate-category:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* USA strikethrough comparison price */
.rate-card__us {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.rate-card__us-strike {
  font-family: var(--bo-font-body);
  font-size: 15px;
  line-height: 20px;
  color: var(--bo-mid-lunar-grey);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--bo-mid-lunar-grey);
}
.rate-card__us-note {
  font-family: var(--bo-font-body);
  font-size: 11px;
  line-height: 16px;
  color: var(--bo-mid-lunar-grey);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


/* ============================================================================
   TRUSTED STATS (homepage) — count-up numbers next to client marquee
   ============================================================================ */
.trusted__stats {
  display: flex; justify-content: center; gap: 120px;
  margin: 20px 0 60px;
  padding: 0 40px;
  flex-wrap: wrap;
}
.trusted__stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.trusted__stat-number {
  font-family: var(--bo-font-display); font-weight: 700;
  font-size: 60px; line-height: 1;
  background: var(--bo-brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.trusted__stat-label {
  font-family: var(--bo-font-body); font-size: 13px; line-height: 20px;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--bo-mid-lunar-grey);
  text-align: center;
}
@media (max-width: 640px) {
  .trusted__stats { gap: 40px; }
  .trusted__stat-number { font-size: 44px; }
}

/* ============================================================================
   TRACK RECORD — case-study cards on Why Bright Owl
   ============================================================================ */
.track-record {
  background: var(--bo-form-grey);
  padding: 100px;
  display: flex; flex-direction: column; gap: 60px;
}
.track-record__header {
  display: flex; flex-direction: column; gap: 24px; max-width: 720px;
}
.track-record__title { color: var(--bo-cosmic-orange); }
.track-record__subtitle {
  font-family: var(--bo-font-body); font-size: 17px; line-height: 27px;
  color: var(--bo-space-dust); margin: 0;
}
.track-record__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
.track-record__grid .case-study:nth-child(4),
.track-record__grid .case-study:nth-child(5) {
  /* Last two cards on a 3-col grid — leave third column blank or reflow */
}
.case-study {
  background: var(--bo-nova-white);
  border-radius: 5px;
  padding: 30px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: var(--bo-shadow-sm);
  height: 100%;
}
.case-study__brand { display: flex; flex-direction: column; gap: 6px; }
.case-study__name {
  font-family: var(--bo-font-display); font-weight: 500;
  font-size: 24px; line-height: 30px;
  color: var(--bo-space-dust); margin: 0;
}
.case-study__scope {
  font-family: var(--bo-font-body); font-size: 13px; line-height: 18px;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--bo-stellar-pink); margin: 0;
}
.case-study__metrics {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--bo-light-lunar-grey); padding-top: 20px;
}
.case-study__metrics li { display: flex; flex-direction: column; gap: 2px; }
.case-study__value {
  font-family: var(--bo-font-display); font-weight: 500;
  font-size: 22px; line-height: 28px;
  color: var(--bo-cosmic-orange);
}
.case-study__label {
  font-family: var(--bo-font-body); font-size: 13px; line-height: 18px;
  color: var(--bo-space-dust);
}
@media (max-width: 1024px) {
  .track-record { padding: 60px 40px; }
  .track-record__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .track-record { padding: 40px 20px; }
  .track-record__grid { grid-template-columns: 1fr; }
}


/* 5-in-a-row grid variant for the 5-step process */
.six-cards__grid--five { grid-template-columns: repeat(5, 1fr); gap: 20px; }
.six-cards__grid--five .six-cards__card { padding: 24px 20px; gap: 16px; }
.six-cards__grid--five .six-cards__card-title { font-size: 20px; line-height: 26px; }
.six-cards__grid--five .six-cards__card-body { font-size: 14px; line-height: 22px; }
@media (max-width: 1024px) { .six-cards__grid--five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .six-cards__grid--five { grid-template-columns: 1fr; } }