/* ============================================================
   Launch Lex — Mobile-first layer
   ------------------------------------------------------------
   Loaded AFTER css/site-overrides.css. Contents:

     1. Friendly tokens for the new mobile chrome (heights,
        z-index, transitions, shadows). Re-uses --ll-* tokens
        defined in site-overrides.css for color + type.

     2. Two-tier mobile navigation (< 768px only):
          - .ll-mnav-top      — sticky logo bar
          - .ll-mnav-bottom   — floating 5-button app bar
          - .ll-mnav-menu     — More overlay menu
          - .ll-mnav-backdrop — tap-out dismiss

     3. Body padding so page content clears the floating nav.

     4. Section-by-section homepage reflow at the new
        breakpoint scale: 480 / 640 / 768 / 900 / 1200.

   Desktop (>= 1200px) gets no overrides from this file —
   all rules are gated behind max-width queries or the
   < 768px mobile-nav block.

   Breakpoints used throughout this file:
     mobile_small  : (max-width: 479px)
     mobile_medium : (min-width: 480px) and (max-width: 639px)
     mobile_large  : (min-width: 640px) and (max-width: 767px)
     tablet_small  : (min-width: 768px) and (max-width: 899px)
     tablet_large  : (min-width: 900px) and (max-width: 1199px)
     desktop       : (min-width: 1200px)
   ============================================================ */

/* ============================================================
   1. MOBILE NAV TOKENS
   ============================================================ */
:root {
  --ll-mnav-top-h:        56px;
  --ll-mnav-bottom-h:     60px;
  /* Floating bar lifts off the viewport edges so it reads as a
     hovering element, not a chrome strip. */
  --ll-mnav-bottom-inset:  12px;
  --ll-mnav-bottom-radius: 24px;
  --ll-mnav-cta-size:      56px;
  --ll-mnav-z-bar:        1000;
  --ll-mnav-z-menu:       1001;
  --ll-mnav-z-backdrop:   999;
  --ll-mnav-promo-h:      36px;
  /* Soft, ambient elevation — Apple-style stacked shadow:
     a tight contact shadow + a wider diffuse one. */
  --ll-mnav-shadow-bar:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 1px 2px rgba(25, 24, 24, 0.06),
      0 12px 32px -8px rgba(25, 24, 24, 0.18);
  --ll-mnav-shadow-cta:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 4px 12px -2px rgba(25, 24, 24, 0.35),
      0 8px 24px -6px rgba(25, 24, 24, 0.25);
  --ll-mnav-shadow-menu:
      0 1px 2px rgba(25, 24, 24, 0.05),
      0 16px 40px -8px rgba(25, 24, 24, 0.22);
  --ll-mnav-tap-scale:    0.94;
  --ll-mnav-anim-in:      280ms cubic-bezier(0.22, 0.9, 0.32, 1.1);
  --ll-mnav-anim-out:     160ms cubic-bezier(0.4, 0, 0.6, 1);
}

/* ============================================================
   2. MOBILE NAV — < 768px ONLY
   ------------------------------------------------------------
   Above 768px the desktop hamburger/horizontal navbar in
   components/header.html takes over. We hide all mobile-nav
   chrome at >= 768px and hide the desktop chrome at < 768px.
   ============================================================ */
.ll-mnav-top,
.ll-mnav-bottom,
.ll-mnav-menu,
.ll-mnav-backdrop {
  display: none;
}

@media (max-width: 767px) {
  /* Hide the existing desktop/Webflow nav on mobile so only the
     new two-tier nav shows. The desktop header still mounts so
     Webflow's nav JS doesn't error out — it's just visually off. */
  [data-desktop-nav] {
    display: none !important;
  }

  /* ---------- TOP BAR (logo only, centered) ------------------ */
  /* Default state on first paint: TRANSPARENT — the page bleeds up
     under the brand mark for a clean magazine-cover impression.
     Once the user scrolls (body.is-scrolled, set by site-chrome.js),
     the bar fills with warm-paper, picks up its hairline border, and
     drops a soft shadow. Same transition runs the slide-up to top:0
     when the promo bar is dismissed or scrolled out of view, so the
     two state changes always feel like one smooth motion. */
  .ll-mnav-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--ll-mnav-promo-h);
    left: 0;
    right: 0;
    height: calc(var(--ll-mnav-top-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-left)) 0
             max(16px, env(safe-area-inset-left));
    background-color: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    z-index: var(--ll-mnav-z-bar);
    /* Match Apple-style chrome: top slides at the spring curve while
       the fill/border/shadow cross-fade in linear time. */
    transition:
      top              280ms cubic-bezier(0.22, 0.9, 0.32, 1.1),
      background-color 220ms ease-out,
      border-color     220ms ease-out,
      box-shadow       220ms ease-out;
    will-change: top, background-color;
  }
  /* Filled state — kicks in once the page has scrolled past the
     trigger threshold (8px, see SCROLL_TRIGGER_PX in site-chrome.js). */
  body.is-scrolled .ll-mnav-top {
    background-color: var(--ll-bg-base);
    border-bottom-color: var(--ll-border-subtle, rgba(25, 24, 24, 0.08));
    box-shadow: 0 4px 20px -8px rgba(25, 24, 24, 0.16);
  }
  /* When promo bar is dismissed or scrolled past, top nav goes flush. */
  body.promo-dismissed .ll-mnav-top,
  body.promo-hidden    .ll-mnav-top {
    top: 0;
  }
  .ll-mnav-top__brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    text-decoration: none;
  }
  /* Favicon icon — centered in the top bar, sized to feel like
     a confident brand mark rather than a tiny corner icon. */
  .ll-mnav-top__brand img,
  .ll-mnav-top__brand .ll-mnav-top__brand-icon {
    height: 48px;
    width: 48px;
    display: block;
    object-fit: contain;
    border-radius: 10px;
  }

  /* ---------- BOTTOM FLOATING BAR ---------------------------- */
  /* Apple-esque floating tab bar: rounded, frosted, hairline-bordered,
     side-inset from the viewport edges so it visually hovers. The
     bar sits above safe-area-inset-bottom rather than absorbing it. */
  .ll-mnav-bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: calc(var(--ll-mnav-bottom-inset) + env(safe-area-inset-bottom));
    left: calc(var(--ll-mnav-bottom-inset) + env(safe-area-inset-left));
    right: calc(var(--ll-mnav-bottom-inset) + env(safe-area-inset-right));
    height: var(--ll-mnav-bottom-h);
    padding: 0 6px;
    /* Translucent paper white + saturation boost = warm frosted glass */
    background-color: rgba(247, 247, 242, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid var(--ll-border-subtle, rgba(25, 24, 24, 0.08));
    border-radius: var(--ll-mnav-bottom-radius);
    box-shadow: var(--ll-mnav-shadow-bar);
    z-index: var(--ll-mnav-z-bar);
    /* Honour iOS overscroll bounce by isolating the bar's stacking
       context from the page. */
    isolation: isolate;
    transform: translateZ(0);
  }
  /* Browsers that don't support backdrop-filter (older Android Chrome)
     get a more opaque background so the bar still reads. */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ll-mnav-bottom {
      background-color: rgba(247, 247, 242, 0.96);
    }
  }

  /* ---------- STANDARD NAV BUTTONS --------------------------- */
  /* Ghost buttons: icon + tiny label + a 4px active dot beneath.
     No vertical dividers — relies on whitespace + the dot indicator. */
  .ll-mnav-btn {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-height: 44px;
    padding: 6px 4px 8px;
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--ll-text-subtle, rgba(25, 24, 24, 0.48));
    font-family: 'IBM Plex Sans Variable', 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms ease, transform 180ms cubic-bezier(0.22, 0.9, 0.32, 1.1);
    -webkit-tap-highlight-color: transparent;
  }
  .ll-mnav-btn:focus-visible {
    outline: 2px solid var(--ll-text-strong, #191818);
    outline-offset: 2px;
    border-radius: 12px;
  }
  .ll-mnav-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 200ms cubic-bezier(0.22, 0.9, 0.32, 1.1);
  }
  .ll-mnav-btn__label {
    display: block;
    font-size: 10px;
    opacity: 0.9;
  }

  /* 4px filled dot under the icon — the only active-state indicator
     for non-CTA buttons. Sits absolutely so it doesn't shift layout. */
  .ll-mnav-btn__dot {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--ll-text-strong, #191818);
    transform: translateX(-50%) scale(0);
    opacity: 0;
    transition: transform 220ms cubic-bezier(0.22, 0.9, 0.32, 1.1),
                opacity 180ms ease;
  }

  .ll-mnav-btn:active {
    transform: scale(var(--ll-mnav-tap-scale));
  }
  .ll-mnav-btn.is-active,
  .ll-mnav-btn[aria-current="page"],
  .ll-mnav-btn[aria-expanded="true"] {
    color: var(--ll-text-strong, #191818);
  }
  .ll-mnav-btn.is-active .ll-mnav-btn__dot,
  .ll-mnav-btn[aria-current="page"] .ll-mnav-btn__dot,
  .ll-mnav-btn[aria-expanded="true"] .ll-mnav-btn__dot {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  .ll-mnav-btn.is-active svg,
  .ll-mnav-btn[aria-current="page"] svg {
    transform: translateY(-1px);
  }

  /* ---------- CENTRE CTA — GET A QUOTE ----------------------- */
  /* Raised, dark-ink circular pill that breaks the bar's rhythm.
     Slot stays the same flex width as the others for symmetry, but
     the inner pill is larger and lifted to draw the eye. */
  .ll-mnav-btn--cta {
    padding: 0;
    flex: 1 1 0;
  }
  .ll-mnav-cta__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ll-mnav-cta-size);
    height: var(--ll-mnav-cta-size);
    border-radius: 50%;
    background: var(--ll-text-strong, #191818);
    color: var(--ll-bg-base, #f7f7f2);
    box-shadow: var(--ll-mnav-shadow-cta);
    /* Lift the pill above the bar plane — the floating-button feel */
    transform: translateY(-10px);
    transition: transform 220ms cubic-bezier(0.22, 0.9, 0.32, 1.1),
                box-shadow 220ms ease,
                background-color 220ms ease;
  }
  .ll-mnav-cta__icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: none;
  }
  .ll-mnav-btn--cta:hover .ll-mnav-cta__pill {
    transform: translateY(-12px);
  }
  .ll-mnav-btn--cta:active {
    /* Override the bar-button scale: scale the pill inside instead */
    transform: none;
  }
  .ll-mnav-btn--cta:active .ll-mnav-cta__pill {
    transform: translateY(-8px) scale(0.94);
  }
  .ll-mnav-btn--cta:focus-visible {
    outline: none;
  }
  .ll-mnav-btn--cta:focus-visible .ll-mnav-cta__pill {
    outline: 2px solid var(--ll-text-strong, #191818);
    outline-offset: 3px;
  }
  /* When the user is on /contact/* the CTA shows a subtle "selected"
     state — a thin ring rather than the dot, since the dot pattern
     wouldn't read on the dark pill. */
  .ll-mnav-btn--cta.is-active .ll-mnav-cta__pill,
  .ll-mnav-btn--cta[aria-current="page"] .ll-mnav-cta__pill {
    box-shadow:
      0 0 0 3px rgba(25, 24, 24, 0.12),
      var(--ll-mnav-shadow-cta);
  }

  /* ---------- BACKDROP --------------------------------------- */
  .ll-mnav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: var(--ll-mnav-z-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ll-mnav-anim-out);
  }
  .ll-mnav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---------- MORE MENU -------------------------------------- */
  /* Anchored to the bottom-right corner so it visually originates
     from the More button on the right edge of the floating bar.
     Glass-morphic card matching the bar's frosted treatment. */
  .ll-mnav-menu {
    display: block;
    position: fixed;
    bottom: calc(var(--ll-mnav-bottom-h)
                 + var(--ll-mnav-bottom-inset)
                 + env(safe-area-inset-bottom)
                 + 8px);
    right: calc(var(--ll-mnav-bottom-inset) + env(safe-area-inset-right));
    left: auto;
    transform-origin: bottom right;
    transform: translateY(8px) scale(0.96);
    min-width: 220px;
    max-width: 280px;
    background-color: rgba(247, 247, 242, 0.86);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid var(--ll-border-subtle, rgba(25, 24, 24, 0.08));
    border-radius: 16px;
    box-shadow: var(--ll-mnav-shadow-menu);
    z-index: var(--ll-mnav-z-menu);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ll-mnav-anim-out),
                transform var(--ll-mnav-anim-out);
    padding: 6px;
  }
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ll-mnav-menu {
      background-color: rgba(247, 247, 242, 0.98);
    }
  }
  .ll-mnav-menu.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity var(--ll-mnav-anim-in),
                transform var(--ll-mnav-anim-in);
  }
  .ll-mnav-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ll-mnav-menu__item + .ll-mnav-menu__item {
    margin-top: 2px;
  }
  .ll-mnav-menu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--ll-text-strong, #191818);
    font-family: 'IBM Plex Sans Variable', 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .ll-mnav-menu__link:hover,
  .ll-mnav-menu__link:focus-visible {
    background-color: rgba(25, 24, 24, 0.06);
    outline: none;
  }
  .ll-mnav-menu__link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--ll-text-strong, #191818);
  }
  .ll-mnav-menu__link[aria-current="page"] {
    background-color: rgba(25, 24, 24, 0.05);
  }
  .ll-mnav-menu__link svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* ---------- BODY CLEARANCE FOR FLOATING NAV ---------------- */
  /* Reserve space at the bottom of every page so footer content
     and last sections aren't covered by the floating bar. The
     bar now floats with side+bottom insets, so add the inset twice
     plus the lifted CTA height (~10px) for visual breathing room. */
  body {
    padding-bottom: max(
      96px,
      calc(var(--ll-mnav-bottom-h)
           + (var(--ll-mnav-bottom-inset) * 2)
           + env(safe-area-inset-bottom)
           + 16px)
    );
  }

  /* When body has padding-bottom for the floating nav, make sure
     the loader and any fixed full-screen overlays still cover
     the entire viewport (not just the padded box). */
  .loader { bottom: 0 !important; }
}

/* Reduced motion: kill the spring/scale, keep the fade. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .ll-mnav-menu,
  .ll-mnav-menu.is-open {
    transition: opacity 80ms linear;
    transform: none;
  }
  .ll-mnav-backdrop {
    transition: opacity 80ms linear;
  }
  .ll-mnav-btn,
  .ll-mnav-btn:active,
  .ll-mnav-btn svg,
  .ll-mnav-btn__dot,
  .ll-mnav-cta__pill,
  .ll-mnav-btn--cta:active .ll-mnav-cta__pill,
  .ll-mnav-btn--cta:hover .ll-mnav-cta__pill {
    transition: none;
    transform: none;
  }
  /* Keep the CTA visually lifted even without the spring transition
     so it still reads as the prominent action. */
  .ll-mnav-cta__pill { transform: translateY(-10px); }
}

/* ============================================================
   3. MOBILE GLOBALS
   ------------------------------------------------------------
   Fluid type scale, tap-state feedback, focus management,
   iOS-zoom guard, selection colour, overflow protection.
   All rules inside @media (max-width: 767px) unless noted.
   ============================================================ */

::selection {
  background: var(--ll-text-strong, #191818);
  color: var(--ll-bg-base, #f7f7f2);
}
::-moz-selection {
  background: var(--ll-text-strong, #191818);
  color: var(--ll-bg-base, #f7f7f2);
}

.ll-copy-mobile { display: none; }

/* ============================================================
   4. CALLOUT (Why It Matters / highest-ROI asset) MOBILE
   ------------------------------------------------------------
   Mobile-only improvements to the dark banner section.
   ============================================================ */
@media (max-width: 767px) {
  .callout-section {
    position: relative !important;
    overflow: hidden !important;
    min-height: 100vh;
    min-height: 100svh;
    padding: 0 !important;
  }
  /* Callout is full-bleed dark photo: kill the 20px container default */
  .callout-section > .main-container,
  .callout-section > .w-layout-blockcontainer,
  .callout-section > .w-container {
    padding: 0 !important;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
  }

  .callout-section .block-callout {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100svh;
    padding: 48px 24px 96px 24px;
  }

  .callout-section .image-wrap-callout {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0;
  }
  .callout-section .image-wrap-callout img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }
  .callout-section .overlay-callout {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      175deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.9) 100%
    ) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .callout-section .content-callout {
    position: relative;
    z-index: 2;
    padding: 0;
  }

  .callout-section .headline-callout .label-master,
  .callout-section .headline-callout .label-small {
    font-family: var(--ll-font-mono-blueprint, 'JetBrains Mono', monospace) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .callout-section .headline-callout h2 {
    font-size: clamp(34px, 9.2vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
    color: #ffffff !important;
    margin-bottom: 16px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
  }

  .callout-section .callout-bottom-tile {
    color: rgba(247, 247, 242, 0.85);
    font-size: 15px;
    line-height: 1.65;
  }
  .callout-section .callout-bottom-tile > div:first-child {
    margin-bottom: 28px;
  }
  .callout-section .callout-bottom-tile a {
    color: rgba(255, 255, 255, 0.9);
  }

  /* Stats row: 3 equal cells with vertical-stacked value+label.
     Larger value (32px), smaller tighter label so the long copy
     wraps cleanly into 2-3 lines without crowding. Each cell is
     same min-height so wrapped labels don't make the row uneven. */
  .callout-section .callout-stats-strip {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 0;
    margin: 32px 0 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 24px;
  }
  .callout-section .callout-stat {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
    padding: 0 12px 0 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: none !important;
    text-align: left;
  }
  .callout-section .callout-stat:first-child {
    padding-left: 0 !important;
  }
  .callout-section .callout-stat:nth-child(n+2) {
    padding-left: 12px !important;
  }
  .callout-section .callout-stat:last-child {
    border-right: none !important;
    padding-right: 0 !important;
  }
  .callout-section .callout-stat-val {
    font-family: var(--ll-font-mono-blueprint, 'JetBrains Mono', monospace) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
  }
  .callout-section .callout-stat-label {
    font-family: 'Inter', var(--ll-font-body, system-ui, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: rgba(255, 255, 255, 0.55) !important;
    max-width: none !important;
    line-height: 1.4 !important;
  }

  /* CTA — larger and bolder, the dominant action in the lower
     portion of the dark banner. */
  .callout-section .callout-bottom-tile .cta-main {
    display: inline-flex !important;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    min-height: 56px !important;
    height: 56px !important;
    border-radius: var(--ll-radius-md, 12px) !important;
    margin-top: 8px;
    box-sizing: border-box;
  }
  .callout-section .callout-bottom-tile .cta-main .button-bg {
    background: #ffffff !important;
    border-color: #ffffff !important;
    border-radius: var(--ll-radius-md, 12px) !important;
  }
  .callout-section .callout-bottom-tile .cta-main .button-text {
    color: var(--ll-text-strong, #191818) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
  }
  .callout-section .callout-bottom-tile .cta-main .icon-button svg {
    stroke: var(--ll-text-strong, #191818) !important;
  }

  .callout-section .callout-study-cite {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    margin-top: 16px;
  }
}

/* ============================================================
   Trust badge — injected by mobile-nav.js into
   .home-a-logo-section .home-a-logo-wrap at ≤767px
   ============================================================ */
@media (max-width: 767px) {
  .ll-mobile-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: var(--ll-bg-lift, #efede7);
    border: 1px solid var(--ll-border-medium, rgba(25,24,24,0.16));
    border-radius: 999px;
    font-family: var(--ll-font-body, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--ll-text-body, rgba(25,24,24,0.88));
    line-height: 1;
    white-space: nowrap;
    width: fit-content;
  }

  /* Gold star */
  .ll-mobile-trust-badge > span:first-child {
    font-size: 11px;
    color: #d4a017;
    line-height: 1;
  }

  /* Separator dots — style the middot chars */
  .ll-mobile-trust-badge > span:last-child {
    color: var(--ll-text-body, rgba(25,24,24,0.88));
  }
}