/* ============================================================
   lipsmatch.com — site-specific chrome.
   Loaded AFTER the shared studio stylesheets (/css/... are the
   same files insanelyelegant.com ships, aliased onto this vhost),
   so everything here is either a Lipsmatch wordmark or a small
   override. Keep it short; shared components stay single-sourced.
   ============================================================ */

/* ---- Wordmarks ------------------------------------------------ */

/* Header logo. main.css turns .mxd-logo__text into an image-replacement
   slot for the studio wordmark (background svg + hidden text), so undo
   that first and render the Lipsmatch wordmark as real type. */
.lsm-wordmark,
[color-scheme=light] .lsm-wordmark {
  background: none;
}

.lsm-wordmark {
  width: auto;
  height: auto;
  text-indent: 0;
  overflow: visible;
  color: var(--t-bright);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.6rem;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Menu overlay brand (the menu base is dark in both themes) */
.lsm-menu-wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.8rem, 3vw, 3.6rem);
  letter-spacing: 0.01em;
  line-height: 1;
  color: #fff;
}

/* ---- Logo mark ------------------------------------------------
   The colour logo (brand/lipsmatch-logo.svg): the lime waveform on its
   own black tile, locked up ahead of the wordmark in the header and the
   menu. The lime only ever sits on black, so the tile travels with it
   and the mark reads the same in either theme (and matches the tab icon
   and the share card).

   The intro loader is the studio's shared dial (/js/loader-component.js
   + css/loaders/loader.css), which picks up this site's theme vars. */
.lsm-logomark,
.lsm-menu-mark {
  flex: 0 0 auto;
  display: inline-block;
  aspect-ratio: 1; /* the black tile is square; the svg art is centred in it */
  background: #000 url(lipsmatch-logo.svg) center / 118% no-repeat;
  border-radius: 0.6rem;
}

.lsm-logomark {
  height: 2.6rem;
}

.lsm-menu-mark {
  height: clamp(2.5rem, 2.7vw, 3.2rem);
}

/* Lockup spacing. .mxd-logo is already inline-flex/centred in main.css. */
.mxd-logo {
  gap: 1rem;
}

.ie-menu__brand {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}

/* ---- Living wordmark -------------------------------------------
   The brand mark is quietly alive, network-ident style: it settles
   into place as the header fades in, a soft band of light passes
   through the letters right after (then once every 9s), and the
   whole mark breathes on a slow ~9s scale cycle. Hover or focus
   replays the light pass.

   Everything is transform/paint-only (no layout writes, so the top
   nav never shifts) and sits behind @supports + reduced-motion
   gates: without background-clip:text the mark stays plain type,
   and reduced-motion users get a static logo.

   Glint colours are literals, not color-mix() (an unsupported
   color-mix inside background-image would invalidate the gradient
   and, with color:transparent, erase the text):
     dark  = accent #DDF160 at ~50% into white ink  -> #EEF8B0
     light = accent #9F8BE7 at ~50% into #161616    -> #5C5280 */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lsm-wordmark,
  [color-scheme=light] .lsm-wordmark,
  .lsm-menu-wordmark {
    color: transparent;
    /* 102deg leans the band parallel to the italic stems. With the
       image 3x the mark's width, the glint (41-59%) parks off-word
       at rest and background-position 100% -> 0% sweeps it through
       the letters left to right. */
    background-image: linear-gradient(102deg,
        var(--lsm-ink) 41%,
        var(--lsm-glint) 50%,
        var(--lsm-ink) 59%);
    background-size: 300% 100%;
    background-position: 0% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .lsm-wordmark {
    --lsm-ink: var(--t-bright);
    --lsm-glint: #EEF8B0;
  }

  [color-scheme=light] .lsm-wordmark {
    --lsm-glint: #5C5280;
  }

  .lsm-menu-wordmark {
    --lsm-ink: #fff;
    --lsm-glint: #EEF8B0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Rise-in settle: runs under the header's GSAP opacity fade
     (app.js reveals .loading__fade at ~1.8s desktop / ~0.8s touch),
     so the tail of the motion is what reads: the mark drifting the
     last fraction into place as it becomes visible. */
  .lsm-wordmark {
    animation:
      lsm-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards,
      lsm-sheen 9s ease-in-out 3.4s infinite;
  }

  /* Hover/focus: replay the light pass immediately. lsm-settle keeps
     identical timing here so the swap doesn't restart it. */
  .mxd-logo:hover .lsm-wordmark,
  .mxd-logo:focus-visible .lsm-wordmark {
    animation:
      lsm-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards,
      lsm-sheen-fast 1.05s ease-out;
  }

  /* Breathe from the reading anchor of the word. Scale lives on the
     anchor so it never fights the settle transform on the span. */
  .mxd-logo {
    transform-origin: 8% 55%;
    animation: lsm-breathe 4.6s ease-in-out 2.8s infinite alternate;
  }

  .lsm-menu-wordmark {
    animation: lsm-sheen 9s ease-in-out 1.6s infinite;
  }

  .ie-menu__brand:hover .lsm-menu-wordmark,
  .ie-menu__brand:focus-visible .lsm-menu-wordmark {
    animation: lsm-sheen-fast 1.05s ease-out;
  }

  /* The mark settles on the wordmark's timing, so the pair arrives
     together. The light pass stays on the type only: the sheen moves
     background-position, which on the colour tile would slide the
     artwork instead of crossing it. */
  .lsm-logomark {
    animation: lsm-settle 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards;
  }
}

@keyframes lsm-settle {
  from { transform: translateY(0.26em); }
  to   { transform: translateY(0); }
}

@keyframes lsm-sheen {
  0%   { background-position: 100% 0; }
  13%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

@keyframes lsm-sheen-fast {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

@keyframes lsm-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.014); }
}

/* Footer masthead */
.lsm-foot-wordmark {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: lowercase;
}

/* ---- Header top nav (desktop) ---------------------------------
   Visible page links in the header, so visitors reach any page
   without the overlay menu. Hidden on <1200px, where the hamburger
   overlay remains the menu. Markup: partials/topnav.html. */

.lsm-topnav { display: none; }

@media (min-width: 1200px) {
  .lsm-topnav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  /* All destinations are in the top nav (and footer) on desktop,
     so the hamburger only earns its place on smaller screens. */
  .mxd-nav__contain { display: none; }

  /* Sticky header: the top nav stays available while scrolling.
     app.js adds .is-hidden past 10px (the studio header only lives at
     the very top); on this site the header stays put, so undo it. */
  .mxd-header {
    position: fixed;
  }

  .mxd-header.is-hidden {
    transform: none;
    opacity: 1;
  }

  /* Full-bleed backdrop bar once scrolled (the header itself is inset
     from the viewport edges, so the bar lives on a 100vw pseudo).
     Solid-leaning fill: translucent chrome bleeds over this design
     system's white footer masthead, so keep it near-opaque. */
  .mxd-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1.4rem;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: rgba(var(--base-rgb), 0.92);
    border-bottom: 1px solid var(--st-muted);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  .mxd-header.is-stuck { padding-top: 1.8rem; }
  .mxd-header.is-stuck::before { opacity: 1; }
}

.lsm-topnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.7rem;
  border: none;
  border-radius: 10rem;
  background: transparent;
  color: var(--t-medium);
  font-family: var(--_font-default);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.lsm-topnav__link:hover,
.lsm-topnav__item.is-open .lsm-topnav__toggle {
  color: var(--t-bright);
  background: var(--base-tint);
}

.lsm-topnav__link.is-active {
  color: var(--t-bright);
}

.lsm-topnav__link.is-active::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

.lsm-topnav__toggle i {
  font-size: 1.2rem;
  transition: transform 0.25s ease;
}

.lsm-topnav__item { position: relative; }

.lsm-topnav__item.is-open .lsm-topnav__toggle i,
.lsm-topnav__item:hover .lsm-topnav__toggle i { transform: rotate(180deg); }

/* Dropdown: fully opaque card (translucent chrome bleeds over the
   footer masthead elsewhere on this design system; don't repeat it). */
.lsm-topnav__drop {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.8rem;
  min-width: 56rem;
  padding: 1.4rem 0.8rem 0.8rem;
  border: 1px solid var(--st-muted);
  border-radius: 1.8rem;
  background: rgb(var(--base-rgb));
  box-shadow: 0 2.4rem 6rem -2rem rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.8rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  z-index: 120;
}

.lsm-topnav__item:hover .lsm-topnav__drop,
.lsm-topnav__item:focus-within .lsm-topnav__drop,
.lsm-topnav__item.is-open .lsm-topnav__drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* Bridge the hover gap between the toggle and the card. */
.lsm-topnav__drop::before {
  content: "";
  position: absolute;
  top: -1.2rem;
  left: 0;
  right: 0;
  height: 1.2rem;
}

/* Audience columns: film on the left, brand work on the right, kept apart by a
   hairline so neither list reads as a continuation of the other. */
.lsm-topnav__col {
  display: flex;
  flex-direction: column;
}

.lsm-topnav__col + .lsm-topnav__col {
  padding-left: 0.8rem;
  border-left: 1px solid var(--st-muted);
}

.lsm-topnav__grouphead {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1.4rem 0.9rem;
  font-family: var(--_font-default);
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-medium);
  white-space: nowrap;
}

.lsm-topnav__grouphead i {
  font-size: 1.5rem;
  color: var(--accent);
}

.lsm-topnav__drop a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.4rem;
  border-radius: 1.2rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.lsm-topnav__drop a:hover,
.lsm-topnav__drop a.is-active { background: var(--base-tint); }

.lsm-topnav__drop a strong {
  color: var(--t-bright);
  font-family: var(--_font-default);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.lsm-topnav__drop a span {
  color: var(--t-muted);
  font-size: 1.25rem;
  line-height: 1.35;
}

/* ---- Solution-page hero media --------------------------------- */

.lsm-hero-media {
  position: relative;
  max-width: 88rem;
  margin-inline: auto;
  border-radius: 2rem;
  overflow: hidden;
  border: 1px solid var(--st-muted);
  background: #0d0d0d;
}

.lsm-hero-media video {
  display: block;
  width: 100%;
  height: auto;
}

.lsm-hero-media__label {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  background: rgba(13, 13, 13, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* ---- Work page: the reel gallery at every width ---------------
   The shared .ls-reels styles live inside a ≤767px media query
   (phones-only on the studio site). The work page shows the same
   gallery on desktop too, so the styles are re-asserted here,
   scoped under .lsm-reels-all. */

.lsm-reels-all .ls-reels {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}

.lsm-reels-all .ls-reelstage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1.8rem;
  border: 1px solid var(--st-muted);
  background: #0d0d0d;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.lsm-reels-all .ls-reelstage.is-playing {
  border-color: rgba(var(--accent-rgb), .4);
  box-shadow: 0 1.6rem 4rem -1.8rem rgba(var(--accent-rgb), .28);
}

.lsm-reels-all .ls-reelstage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lsm-reels-all .ls-reelstage__toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.4));
  cursor: pointer;
  transition: opacity .3s ease;
}

.lsm-reels-all .ls-reelstage.is-playing .ls-reelstage__toggle { opacity: 0; }
.lsm-reels-all .ls-reelstage.is-playing .ls-reelstage__toggle:focus-visible { opacity: 1; }

.lsm-reels-all .ls-reelstage__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--accent);
  color: #12140a;
  font-size: 2.6rem;
  box-shadow: 0 1rem 2.4rem -0.6rem rgba(var(--accent-rgb), .6);
}

.lsm-reels-all .ls-reelstage__play i { margin-left: 0.2rem; }

.lsm-reels-all .ls-reelstage__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  background: rgba(13, 13, 13, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-family: var(--_font-accent);
  font-size: 1.15rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  line-height: 1;
}

.lsm-reels-all .ls-reelstage__cap { display: none; }

.lsm-reels-all .ls-reelpicker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  padding: 0.2rem;
}

.lsm-reels-all .ls-reelchip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  padding: 0.8rem 0.9rem 0.8rem 0.8rem;
  border-radius: 1.4rem;
  border: 1px solid var(--st-muted);
  background: var(--base-tint);
  color: var(--t-bright);
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.lsm-reels-all .ls-reelchip.is-active {
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .08);
  transform: translateY(-0.1rem);
}

.lsm-reels-all .ls-reelchip__thumb {
  flex: 0 0 auto;
  width: 5.4rem;
  height: 3.2rem;
  border-radius: 0.7rem;
  background: #0d0d0d center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, .12);
}

.lsm-reels-all .ls-reelchip__name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--_font-accent);
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.lsm-reels-all .ls-reelchip__name,
.lsm-reels-all .ls-reelchip__sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lsm-reels-all .ls-reelchip__sub {
  font-family: var(--_font-primary, inherit);
  font-size: 1.15rem;
  font-weight: var(--fw-regular, 400);
  color: var(--t-muted);
  letter-spacing: 0;
}

.lsm-reels-all .ls-reelchip__count {
  flex: 0 0 auto;
  min-width: 1.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .08);
  color: var(--t-muted);
  font-family: var(--_font-accent);
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
}

.lsm-reels-all .ls-reelchip.is-active .ls-reelchip__count {
  background: var(--accent);
  color: #12140a;
}

.lsm-reels-all .ls-reels__note {
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  color: var(--t-muted);
  font-size: 1.4rem;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .lsm-reels-all .ls-reels {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }
  .lsm-reels-all .ls-reelpicker {
    grid-template-columns: 1fr 1fr;
    margin: 1.2rem 0 0;
  }
  .lsm-reels-all .ls-reelchip__thumb {
    width: 4rem;
    height: 2.4rem;
  }
}

/* ============================================================
   Hero byline — parent-brand endorsement
   ------------------------------------------------------------
   "A technology by [Insanely Elegant]" under the home hero
   eyebrow. Rendered as the real IE wordmark rather than grey
   micro-text: on a young product domain the studio behind it is
   the credibility that answers "who are you". Deliberately NOT
   a link — it is a trust badge, not an exit ramp. The clickable
   studio link stays in the footer, where a click-out is free.
   Wordmark assets come from the main webroot via the /img vhost
   alias; light mode swaps to the dark-ink lockup (same pair
   main.css uses for .mxd-logo__text).
   ============================================================ */
/* A hairline + real space separates the endorsement from the Lipsmatch
   eyebrow above it, so the two marks read as two brands rather than one
   cramped stack. It's a link to the studio (new tab, arrow flags it), but
   quiet — never louder than the "Say Hello" CTA. */
.lsm-byline {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  text-decoration: none;
}
[color-scheme=light] .lsm-byline {
  border-top-color: rgba(0, 0, 0, 0.12);
}
.lsm-byline__label {
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-muted);
  transition: color 0.25s ease;
}
/* wordmark + new-tab arrow sit on one baseline; the arrow is the affordance */
.lsm-byline__lockup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 16rem;
}
.lsm-byline__ext {
  flex: none;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--t-muted);
  opacity: 0.7;
  transform: translateY(-0.4rem);   /* ride up near the wordmark's cap height */
  transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease;
}
.lsm-byline:hover .lsm-byline__label,
.lsm-byline:focus-visible .lsm-byline__label { color: var(--t-bright, #fff); }
.lsm-byline:hover .lsm-byline__ext,
.lsm-byline:focus-visible .lsm-byline__ext {
  opacity: 1;
  color: var(--accent);
  transform: translate(0.15rem, -0.55rem);
}
.lsm-byline:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
/* Fill the (narrow) headline sidebar rather than sitting at a token size —
   the whole point is that the studio behind this is legible at a glance.
   `contain` fits inside BOTH axes, so the HEIGHT is what caps the render:
   too short and the mark stays small no matter how wide the column is.
   Give it enough height that the width becomes the limit. */
.lsm-byline__mark {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 3.6rem;
  background: left center / contain no-repeat url(/img/logo_in_white.svg);
  opacity: 1;
}
[color-scheme=light] .lsm-byline__mark {
  background-image: url(/img/logo_dark.png);
}

@media (max-width: 1199px) {
  /* the headline column stacks full-width here — don't let the mark balloon */
  .lsm-byline { margin-top: 1.6rem; padding-top: 1.4rem; }
  .lsm-byline__mark { max-width: 13rem; height: 3rem; }
}

/* Home landing hero sits higher than an inner page — trim the big
   header-clearing top padding so the fold isn't front-loaded with empty
   space. Pulling the hero up also lifts the proof rail + brand marquee
   clear of the fixed scroll cue at the bottom. */
/* NB: this template runs a 10px root (1rem = 10px). The page <main>
   (.inner-page-content) already pads ~9.6rem to clear the fixed header, so
   the inner-headline's own 13.6rem top padding is nearly all dead space on
   the landing hero. Trim it hard: fills the gap up top AND lifts the proof
   rail + brand marquee clear of the fixed scroll cue at the fold bottom. */
.mxd-section-inner-headline.lm-home-hero { padding-top: 2rem; }
@media only screen and (min-width: 768px) {
  .mxd-section-inner-headline.lm-home-hero { padding-top: 2rem; }
}
@media only screen and (min-width: 1200px) {
  .mxd-section-inner-headline.lm-home-hero { padding-top: 2rem; }
}

/* ============================================================
   Home hero scroll cue — a prominent, animated "scroll" nudge
   ------------------------------------------------------------
   JS-built by js/lipsmatch.js (initScrollCue) so no-JS visitors
   never get an undismissable pill. Fixed bottom-centre glass
   chip, like the studio's: appears ~1s after the loader lifts,
   the arrow dips, an accent ring blooms, and it retires on the
   first scroll (>60px) or a click (glides one screen down).
   ============================================================ */
.lm-scrollcue {
  position: fixed;
  left: 50%;
  bottom: 1.3rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 1.2rem 2.5rem;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.95);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1.5rem);
  transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.25s ease, background 0.25s ease;
}
[color-scheme=light] .lm-scrollcue {
  background: rgba(255, 255, 255, 0.96);
  color: #161616;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}
.lm-scrollcue.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.lm-scrollcue:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(22, 22, 22, 0.92);
}
[color-scheme=light] .lm-scrollcue:hover {
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.95);
}
.lm-scrollcue:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lm-scrollcue__arrow {
  font-size: 2.1rem;
  color: var(--accent);
  animation: lm-cue-dip 1.7s ease-in-out infinite;
}
/* accent ring that blooms out of the chip, ~3.4s cadence */
.lm-scrollcue::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: lm-cue-ring 3.4s ease-out infinite;
  pointer-events: none;
}
@keyframes lm-cue-dip {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@keyframes lm-cue-ring {
  0%   { opacity: 0.5; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .lm-scrollcue { transition: opacity 0.4s ease; }
  .lm-scrollcue.is-on { transform: translate(-50%, 0); }
  .lm-scrollcue__arrow { animation: none; }
  .lm-scrollcue::before { animation: none; }
}
/* Phones lead with the scroll gesture and the packed fold leaves no clean
   lane, so the cue is a desktop affordance only. */
@media (max-width: 767px) {
  .lm-scrollcue { display: none !important; }
}

/* Redesigned two-column section headers (big headline + short deck).
   The theme's 5/7 split left-aligned a short deck inside a wide column, so
   it floated mid-width with black to its right; a left-anchored stack left
   the whole top-right empty instead. Fix: a full-width horizontal header
   band — headline left, deck pinned to the RIGHT edge (flush with the cards
   below) as a vertically-centred standfirst. The band now spans the section
   width, so no void opens on the right. */
@media only screen and (min-width: 1200px) {
  .mxd-section-title.pre-grid .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8rem;
  }
  .mxd-section-title.pre-grid .col-xl-5 {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .mxd-section-title.pre-grid .col-xl-7 {
    flex: 0 0 auto;
    width: auto;
    max-width: 40rem;          /* the standfirst, held at the right edge */
  }
  .mxd-section-title.pre-grid .mxd-section-title__hrtitle {
    padding-right: 0;
  }
  .mxd-section-title.pre-grid .mxd-section-title__hrdescr {
    margin-top: 0;
    padding: 0;
  }
  /* short accent lead-in that ties the standfirst to the headline */
  .mxd-section-title.pre-grid .mxd-section-title__hrdescr p::before {
    content: "";
    display: block;
    width: 3.6rem;
    height: 2px;
    margin-bottom: 1.8rem;
    background: var(--accent);
  }
}