/* Reusable Lead Magnet section + slide-in drawer form. Self-contained tokens (no dependency
   on any page-specific stylesheet) so this can be dropped into any template. */
.lm-cta-banner {
  --lm-navy: #1E2E4C;
  --lm-text: #16233F;
  --lm-border: #D9DEE7;
  --lm-accent: #E74C3C;
  background: var(--lm-navy);
  position: relative;
  overflow: visible;
  padding: 0 4vw;
  isolation: isolate;
}

.lm-cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='510' viewBox='0 0 900 510' preserveAspectRatio='xMaxYMid slice'><polygon points='250,0 900,0 900,510 100,510' fill='white' fill-opacity='0.03'/><g fill='none' stroke='white' stroke-opacity='0.06' stroke-width='2'><path d='M380,0 L640,255 L380,510'/><path d='M300,0 L560,255 L300,510'/></g></svg>") no-repeat right center;
  background-size: cover;
}

.lm-cta-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 32px;
  min-height: 360px;
}

.lm-cta-copy { position: relative; z-index: 1; padding: 0; }
/* !important: this component must render correctly on any host page, regardless of
   that page's own ambient "h1,h2,h3,h4" heading-color rules (equal-specificity clashes
   are otherwise a coin flip decided by unrelated stylesheet load order). */
.lm-cta-banner .lm-cta-copy h2 { color: #fff !important; font-size: 40px; font-weight: 700; margin: 0 0 16px; line-height: 1.15; }
.lm-cta-copy p { color: rgba(255, 255, 255, 0.85); margin: 0 0 28px !important; max-width: 560px; line-height: 1.55; }

.lm-btn {
  display: inline-block;
  background: #fff;
  border: none;
  color: var(--lm-navy);
  border-radius: 4px;
  padding: 16px 24px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.lm-btn:hover { opacity: 0.92; }

/* Photo anchored bottom-right, overflowing above the section's own top edge. */
.lm-cta-photo {
  position: absolute;
  z-index: 2;
  right: 6%;
  bottom: 0;
  top: -60px;
  width: clamp(180px,30vw,500px);
  pointer-events: none;
}
/* !important on height: a bare single-class selector on an <img> loses an equal-ish specificity
   tie to an ambient host-page "img{height:auto}" reset rule (class+element beats a bare class) —
   found while sizing .lm-drawer-image-img below; the same reset silently affected this photo too. */
.lm-cta-photo-img { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: top center; }

@media (max-width: 900px) {
  /* Below this width the photo drops into normal document flow, stacked after the copy —
     the position:absolute bottom-anchored overflow trick only works when the grid has a
     fixed/predictable height; on mobile the copy's own height varies with content length,
     so absolute positioning risked the photo overlapping the button (found in testing). */
  .lm-cta-inner { grid-template-columns: 1fr; align-items: center; min-height: 0; padding-bottom: 0; }
  /* Image above copy on small screens (source order stays copy-then-photo in the HTML —
     only the visual order flips, so reading order for assistive tech is unaffected). */
  .lm-cta-copy { padding: 0; order: 2; }
  .lm-cta-photo {
    position: static;
    order: 1;
    margin: 0 auto;
    width: clamp(160px, 65vw, 260px);
    height: 260px;
  }
  .eet-page section.lm-cta-banner{
    padding: 56px 20px !important;
  }
}

/* ---------------------------------------------------------------------
   Slide-in drawer
   ------------------------------------------------------------------- */
.lm-drawer { position: fixed; inset: 0; z-index: 100000; visibility: hidden; }
.lm-drawer.is-open { visibility: visible; }

.lm-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lm-drawer.is-open .lm-drawer-overlay { opacity: 1; }

.lm-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(480px, 92vw);
  background: #fff;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.lm-drawer.is-open .lm-drawer-panel { transform: translateX(0); }

.lm-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  font-size: 22px;
  line-height: 1;
  color: #333;
  cursor: pointer;
  padding: 0;
}

/* No padding on the body itself — the image spans edge-to-edge (full sidebar width, flush
   with the panel's top/left/right); .lm-form/.lm-success carry their own inset instead. */
.lm-drawer-body { padding: 0; }

.lm-drawer-image { position: relative; margin: 0 0 24px; overflow: hidden; }
/* Full sidebar width, but capped well under a third of the viewport height regardless of
   how tall the browser window is — min() picks whichever bound is smaller. !important on
   height for the same ambient "img{height:auto}" reason as .lm-cta-photo-img above. */
.lm-drawer-image-img { display: block; width: 100%; height: min(220px, 32vh) !important; object-fit: cover; }

/* Scrim behind the bottom-left title so it stays legible over any photo. */
.lm-drawer-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 65%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  pointer-events: none;
}

/* !important on both color AND margin: a bare single-class selector on an h1-h6 tag loses an
   equal-specificity tie to an ambient host-page "h1,h2,h3,h4{margin:0;...}" rule (which also
   targets the element itself, giving it one extra specificity point) — margin:0 winning here is
   exactly what caused the heading to visually collide with the first field's floating label. */
.lm-drawer-heading {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 32px !important;
}

/* Overlaid bottom-left on the drawer image when one is configured. */
.lm-drawer-heading--overlay {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 16px;
  color: #fff !important;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Standalone (no drawer image configured): normal in-flow heading, needs its own inset
   since .lm-drawer-body no longer provides any padding. */
.lm-drawer-heading--standalone {
  color: #16233F !important;
  padding: 32px 32px 0;
}

/* .lm-form/.lm-success both set an explicit "display" below, which — being an author-stylesheet
   rule — beats the UA stylesheet's [hidden]{display:none} at equal specificity. Restate it here
   with higher specificity so toggling the `hidden` attribute in JS actually hides the element. */
.lm-form[hidden], .lm-success[hidden] { display: none; }

.lm-form { display: flex; flex-direction: column; gap: 22px; padding: 24px 32px 40px; }
.lm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.lm-field { position: relative; }
.lm-field label {
  position: absolute;
  top: -9px;
  left: 14px;
  background: #fff;
  padding: 0 6px;
  font-size: 13px;
  color: #333;
  z-index: 1;
}
.lm-field.req label::after { content: " *"; color: #E74C3C; }
.lm-field input,
.lm-field textarea {
  width: 100%;
  border: 1px solid #D9DEE7;
  border-radius: 8px;
  padding: 16px 14px 10px;
  font-size: 15px;
  font-family: inherit;
  color: #16233F;
  box-sizing: border-box;
}
.lm-field textarea { resize: vertical; min-height: 90px; padding-top: 16px; }
.lm-field input:focus,
.lm-field textarea:focus { outline: none; border-color: #1E2E4C; }

.lm-form-error { color: #E74C3C; font-size: 14px; margin: 0; min-height: 1em; }

.lm-submit {
  align-self: flex-start;
  background: #1E2E4C;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 16px 40px;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 15px;
  cursor: pointer;
}
.lm-submit:disabled { opacity: 0.6; cursor: default; }
.lm-submit:not(:disabled):hover { opacity: 0.92; }

.lm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.lm-success {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #EAFBF0;
  color: #1B5E33;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 24px 32px 40px;
  font-size: 15px;
}
.lm-success-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2ECC71;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

@media (max-width: 560px) {
  .lm-field-row { grid-template-columns: 1fr; }
  .lm-form { padding: 20px 20px 32px; }
  .lm-success { margin: 20px 20px 32px; }
  .lm-drawer-heading--standalone { padding: 64px 20px 0; }
}