#lyzr-ribbon,
#lyzr-ribbon *,
#lyzr-ribbon *::before,
#lyzr-ribbon *::after{box-sizing:border-box;margin:0;padding:0;border:0}

#lyzr-ribbon{
  /* Lyzr 2026 tokens, lifted from the live site */
  --rose:#C96A5A;
  --mahogany:#6B4C4C;   /* the "Talk to Us" fill */
  --mauve:#8A6060;      /* the "Talk to Us" hover fill */
  --ink:#2A1F1A;
  --cream:#F2EDE8;
  --parch:#F9F5F1;
  --espresso:#160F0B;

  /* theme slots, overridden by .rb-mauve below */
  --band:linear-gradient(96deg,var(--parch) 0%,var(--cream) 55%,#EDE7E0 100%);
  --band-solid:var(--cream);
  --on-band:var(--espresso);
  --tag:var(--mahogany);
  --dot:var(--rose);
  --rule:rgba(107,76,76,.24);
  --chip:rgba(22,15,11,.06);
  --chip-hi:rgba(22,15,11,.13);
  --edge:rgba(22,15,11,.10);
  --top-hi:rgba(255,255,255,.75);
  --cta-bg:var(--mahogany);
  --cta-bg-hover:var(--ink);
  --cta-fg:var(--cream);
  --focus:var(--mahogany);

  position:fixed;
  top:0;left:0;right:0;
  z-index:10000;              /* site nav sits at 9990 */
  width:100%;

  background:var(--band);
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--on-band);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
  overflow:hidden;
  will-change:transform;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
#lyzr-ribbon[hidden]{display:none !important}

/* Scrolled out of the way. The nav slides up to meet the viewport top
   and the ribbon returns the moment you scroll back. */
#lyzr-ribbon.rb-up{transform:translateY(-100%)}

/* ── THEME: mauve. The dark band, for louder announcements. ──
   Mahogany's own colour family, lifted to the lightest values that
   still keep white text at AA. Its CTA has to invert: a mahogany pill
   on a mauve band is 2.06:1 and its edge dissolves, so it goes white
   with an espresso label. */
#lyzr-ribbon.rb-mauve{
  --band:linear-gradient(96deg,var(--mauve) 0%,#855C5C 58%,#805B5B 100%);
  --band-solid:#855C5C;
  --on-band:#FFFFFF;
  --tag:#FFFFFF;
  --dot:#FFFFFF;
  --rule:rgba(255,255,255,.30);
  --chip:rgba(255,255,255,.12);
  --chip-hi:rgba(255,255,255,.22);
  --edge:rgba(22,15,11,.28);
  --top-hi:rgba(255,255,255,.16);
  --cta-bg:#FFFFFF;
  --cta-bg-hover:var(--cream);
  --cta-fg:var(--espresso);
  --focus:var(--espresso);
}

/* The band carries no overlay. A gloss or a vignette both cost more
   than they give: on the dark theme a gloss drops white text below AA,
   and a vignette pushes the band into the nav. The 96deg ramp already
   keeps it from reading as flat fill. The only decoration is a 1px top
   highlight, which touches no glyph. */
#lyzr-ribbon::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  pointer-events:none;
  background:var(--top-hi);
}
/* Hairline foot. On the cream theme the nav below supplies the contrast
   on its own, so this stays faint and just closes the band. */
#lyzr-ribbon::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--edge);pointer-events:none;
}

#lyzr-ribbon .rb-inner{
  position:relative;z-index:2;
  max-width:1240px;margin:0 auto;
  padding:4px 56px 4px 24px;
  display:flex;align-items:center;justify-content:center;
  gap:14px;text-align:center;
}

/* ── TAG ──────────────────────────────────────────────
   The site's own eyebrow atom (.slbl): uppercase, 600, wide tracking.
   Bare on the band, no chip behind it. Any chip would have to be a
   lightened patch of brown, which is exactly what white type cannot
   afford. On the band it sits at 5.20-5.91:1. */
#lyzr-ribbon .rb-tag{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  font-size:9.5px;font-weight:600 !important;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--tag);
  white-space:nowrap;
  /* .22em of tracking is added AFTER the final "W" too, so the gap to the
     rule measures ~2px wider than it looks. Pull it back. */
  margin-right:-2px;
}

/* pulse dot */
#lyzr-ribbon .rb-dot{
  position:relative;flex-shrink:0;
  width:6px;height:6px;border-radius:50%;
  background:var(--dot);
}
#lyzr-ribbon .rb-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--dot);
  animation:rb-pulse 2.4s ease-out infinite;
}
@keyframes rb-pulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(3);opacity:0}
  100%{transform:scale(3);opacity:0}
}

/* hairline rules. Structure, not decoration: they separate the three
   jobs of the bar. What it is, what it says, what to do about it. */
#lyzr-ribbon .rb-rule{
  flex-shrink:0;width:1px;height:15px;
  background:var(--rule);
}

/* Message. Full-strength throughout: dimming drops it below AA on this
   background. Hierarchy comes from weight. */
#lyzr-ribbon .rb-msg{
  font-size:13.5px;font-weight:400 !important;
  color:var(--on-band);letter-spacing:.002em;
}
#lyzr-ribbon .rb-msg strong{font-weight:600 !important;color:var(--on-band)}
#lyzr-ribbon .rb-short{display:none}

/* ── CTA ──────────────────────────────────────────────
   On a light band this is not an approximation of the site's "Talk to
   Us" button, it IS that button: .ab-btn-talk's mahogany fill, cream
   label, 1.5px border, pill radius, DM Sans 600, arrow nudge, and its
   real hover, which darkens to --ink rather than lightening. */
#lyzr-ribbon .rb-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex-shrink:0;
  padding:6px 15px;min-height:30px;
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:12.5px;font-weight:600 !important;
  letter-spacing:.01em;line-height:1;
  background:var(--cta-bg);
  border:1.5px solid var(--cta-bg);
  border-radius:9999px;
  color:var(--cta-fg) !important;
  text-decoration:none !important;
  box-shadow:none !important;
  white-space:nowrap;cursor:pointer;
  transition:background .18s cubic-bezier(.32,.72,0,1),
             border-color .18s cubic-bezier(.32,.72,0,1),
             transform .18s cubic-bezier(.32,.72,0,1),
             box-shadow .22s cubic-bezier(.32,.72,0,1);
}
#lyzr-ribbon .rb-cta:hover{
  background:var(--cta-bg-hover);
  border-color:var(--cta-bg-hover);
  color:var(--cta-fg) !important;
  text-decoration:none !important;
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(107,76,76,.32) !important;
}
#lyzr-ribbon .rb-cta svg{
  width:13px;height:13px;flex-shrink:0;
  stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s cubic-bezier(.32,.72,0,1);
}
#lyzr-ribbon .rb-cta:hover svg{transform:translateX(3px)}

/* Announced by screen readers, seen by nobody. The link opens in a new
   tab, and a sighted user learns that from the browser; a screen reader
   user has to be told. */
#lyzr-ribbon .rb-sr{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}
/* The ring reads against both the pill it hugs and the band behind it. */
#lyzr-ribbon .rb-cta:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--band-solid),0 0 0 4px var(--focus) !important;
}

/* Close: right side, popup style */
#lyzr-ribbon .rb-close{
  position:absolute;right:16px;top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--chip);
  color:var(--on-band);
  cursor:pointer;
  box-shadow:none !important;
  transition:background .18s,transform .18s;
}
#lyzr-ribbon .rb-close:hover{background:var(--chip-hi);transform:translateY(-50%) rotate(90deg)}
#lyzr-ribbon .rb-close:focus-visible{
  outline:none;box-shadow:0 0 0 2px rgba(22,15,11,.6) !important;
}
#lyzr-ribbon .rb-close svg{
  width:12px;height:12px;
  stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;
}

/* ── RESPONSIVE ────────────────────────────────────────
   The message is 48 characters. Measured in DM Sans 700 it is 326px at
   13.5px and 304px at 12.5px. The pill is 128px, the tag 42px. Add the
   gaps and the close-button gutter and a single row needs roughly
   560px of viewport. Below that no honest one-line layout exists: at
   390px there is 172px of room for a 284px message. So the bar stacks
   rather than shrinking the type into illegibility or truncating copy
   nobody wrote. Every breakpoint below is one of those measurements. */

@media(max-width:1080px){
  #lyzr-ribbon .rb-inner{gap:12px}
  #lyzr-ribbon .rb-tag{letter-spacing:.18em}
}
@media(max-width:960px){
  #lyzr-ribbon .rb-inner{padding:4px 50px 4px 18px;gap:11px}
  #lyzr-ribbon .rb-msg{font-size:13px}
}

/* Dormant. The message fits on one line at every width once the bar
   stacks, so there is nothing to swap. Left in place because a longer
   announcement may need it: add .rb-full / .rb-short spans and this
   takes over. */
@media(max-width:940px){
  #lyzr-ribbon .rb-full{display:none}
  #lyzr-ribbon .rb-short{display:inline}
}

/* The tag and its rule go first. The bold lead of the message already
   says "this is new", and the dot moves inline to keep the accent. */
@media(max-width:760px){
  #lyzr-ribbon .rb-tag,
  #lyzr-ribbon .rb-rule-tag{display:none}
  #lyzr-ribbon .rb-msg::before{
    content:"";display:inline-block;vertical-align:middle;
    width:6px;height:6px;border-radius:50%;
    background:var(--dot);margin-right:9px;
  }
}
@media(max-width:640px){
  #lyzr-ribbon .rb-inner{padding:4px 46px 4px 16px;gap:10px}
  #lyzr-ribbon .rb-msg{font-size:12.5px}
  #lyzr-ribbon .rb-cta{font-size:12px;padding:6px 13px;gap:6px;min-height:32px}
  #lyzr-ribbon .rb-close{right:10px;width:24px;height:24px}
}

/* ── STACK ────────────────────────────────────────────
   560px is where message + gap + pill + gutters stops fitting. The bar
   becomes two centred rows. The close button leaves the vertical centre
   and pins to the top row, beside the message.

   The inner padding stays symmetric here. Reserving the close gutter on
   .rb-inner would shove BOTH rows 15px left of the bar's true centre,
   and the pill on row two has no close button to make room for. So the
   gutter is reserved on the message alone, on both sides, which keeps
   it centred while holding it clear of the close. */
@media(max-width:560px){
  #lyzr-ribbon .rb-inner{
    flex-direction:column;
    gap:8px;
    padding:8px 14px 9px;
  }
  #lyzr-ribbon .rb-rule{display:none}
  #lyzr-ribbon .rb-msg{
    padding:0 28px;
    line-height:1.35;
    text-align:center;
  }
  #lyzr-ribbon .rb-cta{min-height:34px;padding:7px 18px}

  #lyzr-ribbon .rb-close{
    top:9px;right:10px;
    transform:none;
    width:26px;height:26px;
  }
  #lyzr-ribbon .rb-close:hover{transform:rotate(90deg)}
}

/* The message is 48 characters, and below 760px it also carries the
   inline dot that replaces the tag: 6px plus a 9px margin, 15px the
   width budget has to pay for. These two steps are what keep it on a
   single line down to the narrowest phones in common use. Below ~350px
   it wraps to two, the bar grows, and the nav follows: the offset is
   re-measured on every resize. */
@media(max-width:430px){
  #lyzr-ribbon .rb-msg{font-size:12px}
}
@media(max-width:392px){
  #lyzr-ribbon .rb-inner{padding:8px 12px 9px}
  #lyzr-ribbon .rb-msg{font-size:11.5px;padding:0 30px}
  #lyzr-ribbon .rb-msg::before{margin-right:7px}
  #lyzr-ribbon .rb-cta{font-size:11.5px;padding:7px 16px}
  #lyzr-ribbon .rb-cta svg{width:12px;height:12px}
}

@media(prefers-reduced-motion:reduce){
  #lyzr-ribbon,
  #lyzr-ribbon *,#lyzr-ribbon *::before,#lyzr-ribbon *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* == Lyzr homepage theme override (site tokens) ======================= */
#lyzr-ribbon{
  --rose:#D96354;
  --mahogany:#724B4B;
  --mauve:#8A6060;
  --ink:#160F0A;
  --espresso:#160F0A;
  --cream:#F1EEEB;
  --parch:#FAFAF9;
  --band:linear-gradient(96deg,#FAFAF9 0%,#F1EEEB 55%,#EBE6E0 100%);
  --band-solid:#F1EEEB;
  font-family:'Aeonik','Figtree',system-ui,sans-serif;
}


/* == v2: white ribbon + terracotta CTA in the attached button style == */
#lyzr-ribbon{
  --band:#FFFFFF;
  --band-solid:#FFFFFF;
  --top-hi:rgb(255 255 255 / 0);
  --edge:rgb(22 15 10 / .10);
  --cta-bg:#BD4C3F;
  --cta-bg-hover:#9B392E;
  --cta-fg:#FAFAF9;
  --tag:#724B4B;
  --rule:rgb(22 15 10 / .16);
}
#lyzr-ribbon .rb-cta{border-radius:10px;}


/* == v3: smooth motion pass ============================================ */
#lyzr-ribbon{transition:transform .55s cubic-bezier(.22,1,.36,1);}
#lyzr-ribbon .rb-cta{
  border-radius:40px;
  transition:background .3s cubic-bezier(.32,.72,0,1),
             border-color .3s cubic-bezier(.32,.72,0,1),
             transform .3s cubic-bezier(.32,.72,0,1),
             box-shadow .35s cubic-bezier(.32,.72,0,1);
}
#lyzr-ribbon .rb-close{transition:background .28s ease,transform .28s cubic-bezier(.22,1,.36,1);}
@media (prefers-reduced-motion:reduce){
  #lyzr-ribbon,#lyzr-ribbon .rb-cta,#lyzr-ribbon .rb-close{transition:none !important;}
}


/* == v4: quieter CTA (espresso, not terracotta) ======================== */
#lyzr-ribbon{
  --cta-bg:#160F0A;
  --cta-bg-hover:#724B4B;
  --cta-fg:#FAFAF9;
}

/* unified hover recipe on the ribbon CTA too */
#lyzr-ribbon .rb-cta{transition:background 300ms cubic-bezier(.25,.8,.25,1),
  border-color 300ms cubic-bezier(.25,.8,.25,1),
  transform 300ms cubic-bezier(.25,.8,.25,1),
  box-shadow 300ms cubic-bezier(.25,.8,.25,1);}
#lyzr-ribbon .rb-cta:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgb(22 15 10 / .18) !important;}