/* =====================================================================
   BEAVER: the Digital Beaver character.
   Loaded after the design skins (Aurora / Nova / Studio / Atelier) so the
   character sits correctly in every look.

   It is a mascot, not a logo: the header and footer keep the wordmark. The
   character's home is the call-to-action band at the foot of the page, where
   it stands big alongside the closing pitch. It is always given a baseline to
   stand on, the bottom edge of the CTA card, or a soft ground shadow,
   never left floating mid-air.
   ===================================================================== */

/* ------------------------------------------------------- CTA band, redesigned */
/* Copy on one side, a big beaver on the other, stood with its feet on the
   card's bottom edge. The card already clips (overflow:hidden), so running the
   character off the right-hand edge lets that corner cut it cleanly. */
.lt-cta--beaver {
  /* these two mirror .lt-cta's own padding, so the beaver can cancel it out */
  --lt-cta-pad-b: clamp(44px, 6vw, 72px);
  --lt-cta-pad-x: clamp(24px, 5vw, 60px);
  /* how far the beaver runs past the card's right edge: the padding it has to
     cross first, plus the slice that actually gets cut away */
  --lt-beaver-bleed: calc(var(--lt-cta-pad-x) + clamp(14px, 3vw, 46px));

  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 26%, 300px);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  text-align: left;
}
.lt-cta--beaver .lt-cta__copy {
  position: relative;   /* above the card's noise overlay */
  z-index: 1;
  align-self: center;
  padding: clamp(6px, 2vw, 24px) 0;
}
.lt-cta--beaver .lt-lede {
  margin-left: 0;
  margin-right: 0;
  max-width: 46ch;
}
.lt-cta--beaver .lt-btnrow { justify-content: flex-start; }

.lt-cta__mascot {
  position: relative;
  z-index: 1;
  align-self: end;
  /* cancel the card's bottom padding so the beaver stands on the card edge */
  margin-bottom: calc(-1 * var(--lt-cta-pad-b));
  /* and run it off the right edge: the card clips (overflow:hidden), so its
     far side is cut away and it reads as pushing in from outside the frame */
  margin-right: calc(-1 * var(--lt-beaver-bleed));
}
.lt-cta__mascot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .38));
}

/* Stacked: copy first, then the beaver centred, whole, and still standing on
   the edge, there is no room either side to cut a slice off it. */
@media (max-width: 900px) {
  .lt-cta--beaver {
    grid-template-columns: 1fr;
    gap: clamp(14px, 3vw, 28px);
    text-align: center;
  }
  .lt-cta--beaver .lt-lede { margin-left: auto; margin-right: auto; }
  .lt-cta--beaver .lt-btnrow { justify-content: center; }
  .lt-cta__mascot {
    width: clamp(170px, 46vw, 230px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------- standalone mascot (404 etc.) */
.lt-mascot {
  position: relative;
  display: block;
  width: clamp(150px, 24vw, 220px);
  margin: 0 auto 34px;
}
.lt-mascot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 22px rgba(11, 21, 51, .22));
}
/* Ground shadow: gives the cropped base something to stand on. */
.lt-mascot::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -10px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(11, 21, 51, .26), transparent 76%);
}

/* Atelier is near-black: swap the drop shadow for a warm halo so the character
   lifts off the background instead of disappearing into it. */
body.lt-style-atelier .lt-cta__mascot img,
body.lt-style-atelier .lt-mascot img {
  filter: drop-shadow(0 0 34px rgba(196, 164, 120, .34)) drop-shadow(0 20px 24px rgba(0, 0, 0, .45));
}