/* ============================================================
   LWR Carbon Credits — Design System
   Extracted from lwr_microsite_concept_full.html (Wix source).
   Values are computed-style measurements taken from the live
   page at a 1600px viewport.

   This file is SELF-SUFFICIENT: it carries the tokens, the type
   roles AND the full layout for every widget, so dropping the
   widget markup into a host page with only this stylesheet
   linked renders the component correctly.

   Two rules when adding to this file:
     1. Never style bare elements (p, ul, section) at the top
        level — the host site owns those. Scope to a component.
     2. Never style `body` or `html` here, for the same reason.
   ============================================================ */

/* ---------- Brand webfonts (Wix CDN, same files the site uses) ---------- */
/* Absolute https: — protocol-relative URLs break when the host page is
   previewed from file:// or served over a non-http scheme. */

@font-face {
  font-family: 'avenir-lt-w01_85-heavy1475544';
  font-style: normal; font-weight: 400;
  src: url('https://static.parastorage.com/fonts/v2/74290729-59ae-4129-87d0-2eec3974dce1/v1/avenir-lt-w01_85-heavy1475544.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'univers-lt-std-condensed';
  font-style: normal; font-weight: 700;
  src: url('https://static.parastorage.com/fonts/v2/99ea7e1a-15fc-4335-98ed-0d7d615d4630/v1/univers-lt-std.latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'univers-lt-std';
  font-style: normal; font-weight: 400;
  src: url('https://static.parastorage.com/fonts/v2/3a3f4b3a-ff4b-4dda-82f7-ec45cdcbeaa5/v1/univers-lt-std.latin.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'tusker-grotesk-condensed';
  font-style: normal; font-weight: 700;
  src: url('https://static.parastorage.com/fonts/v2/90980363-bdea-4808-bdc5-5a5de32c96dd/v1/tusker-grotesk-condensed.latin.woff2') format('woff2');
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand palette */
  --lwr-cyan:        #00b3dc;  /* primary button, mesh gradient highlight */
  --lwr-blue:        #027fc1;  /* mesh gradient mid */
  --lwr-blue-dark:   rgb(0, 94, 125);
  --lwr-navy:        #011b54;  /* section headings on light backgrounds */
  --lwr-card:        #232355;  /* dark card surface (measured off card art) */
  --lwr-teal:        #005e7d;  /* eyebrow / kicker text */
  --lwr-slate:       #164056;  /* outline-button label */
  --lwr-hairline:    #d4d0d0;  /* image frame border */
  --lwr-mist:        #f7f9fb;  /* tinted section background */
  --lwr-line:        #dce7ea;  /* card / panel hairline */
  --lwr-royal:       #023063;  /* deep panel gradient mid-stop */
  --lwr-pale:        #c2e8f3;  /* slider track */
  --lwr-gray:        #6d838d;  /* muted / secondary label text */
  --lwr-shadow-sm:   0 2px 10px rgba(18, 51, 63, .06);
  --lwr-shadow-lg:   0 20px 50px rgba(18, 51, 63, .14);
  --lwr-ease:        cubic-bezier(.22, .61, .36, 1);

  /* Map data encoding — these are legend colours, not brand colours */
  --lwr-map-credit:    #0072bc;
  --lwr-map-installed: #8ed4ea;
  --lwr-map-none:      #eef4f6;
  --lwr-map-star:      #99ca43;
  --lwr-sage:        #9ad184;  /* breadcrumb, accent green */
  --lwr-offwhite:    #efeff6;  /* stat numerals, hairline dividers */
  --lwr-ink:         #3e3f41;  /* body copy on light */
  --lwr-white:       #ffffff;

  /* Type families */
  --lwr-font-display:   'avenir-lt-w01_85-heavy1475544', 'Segoe UI', sans-serif;
  --lwr-font-condensed: 'univers-lt-std-condensed', 'Arial', sans-serif;
  /*--lwr-font-body:      'univers-lt-std', sans-serif;*/
  --lwr-font-body:      'Arial', sans-serif;
  --lwr-font-numeral:   'tusker-grotesk-condensed', 'Arial', sans-serif;

  /* Type scale — measured at 1600px viewport */
  --lwr-h1:      90px;    /* hero headline,   line-height .95 */
  --lwr-h2:      45px;    /* section heading, line-height .95 */
  --lwr-numeral: 60px;    /* stat numerals,   line-height .95 */
  --lwr-lead:    25px;    /* hero body / breadcrumb, line-height 1.35 */
  --lwr-eyebrow: 22.5px;  /* kickers + button label, line-height 1.25 */
  --lwr-body:    20px;    /* body copy + stat labels, line-height 1.35 */

  /* Layout */
  --lwr-gutter: 3.7%;     /* 59px at 1600px — page content inset */
  --lwr-pill:   125px;    /* button border-radius */
}

/* ---------- Base ----------
   Every LWR component root opts itself in, so the components work whether
   or not an ancestor carries .lwr. Host resets can't leak in through
   box-sizing this way. */
.lwr,
.lwr-hero,
.lwr-stats,
.lwr-cards,
.lwr-feature,
.lwr-webinar,
.lwr-cta,
.lwr-faq,
.lwr-map,
.lwr-calc,
.lwr-section {
  font-family: var(--lwr-font-body);
}
.lwr, .lwr *, .lwr *::before, .lwr *::after,
.lwr-hero, .lwr-hero *, .lwr-hero *::before, .lwr-hero *::after,
.lwr-stats, .lwr-stats *, .lwr-stats *::before, .lwr-stats *::after,
.lwr-cards, .lwr-cards *, .lwr-cards *::before, .lwr-cards *::after,
.lwr-feature, .lwr-feature *, .lwr-feature *::before, .lwr-feature *::after,
.lwr-webinar, .lwr-webinar *, .lwr-webinar *::before, .lwr-webinar *::after,
.lwr-cta, .lwr-cta *, .lwr-cta *::before, .lwr-cta *::after,
.lwr-faq, .lwr-faq *, .lwr-faq *::before, .lwr-faq *::after,
.lwr-map, .lwr-map *, .lwr-map *::before, .lwr-map *::after,
.lwr-calc, .lwr-calc *, .lwr-calc *::before, .lwr-calc *::after,
.lwr-section, .lwr-section * {
  box-sizing: border-box;
}

/* A host `sub { font-family: … }` rule beats inheritance, so subscripts —
   the "2" in CO2e — would fall back to the host face inside otherwise
   correct copy. Size and baseline stay at the browser default. */
:is(.lwr, .lwr-hero, .lwr-stats, .lwr-cards, .lwr-card, .lwr-feature,
    .lwr-webinar, .lwr-cta, .lwr-faq, .lwr-map, .lwr-calc,
    .lwr-section) :is(sub, sup) {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Host stylesheets routinely put padding/margins on bare `section`, `div`
   and `ul`. Neutralise that on our component roots — each component sets
   its own spacing below. */
.lwr-hero,
.lwr-stats,
.lwr-cards,
.lwr-card,
.lwr-feature,
.lwr-webinar,
.lwr-cta,
.lwr-faq,
.lwr-map,
.lwr-calc {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Optional page wrapper — use instead of styling the host's <body>.
   Transparent by default so the host page owns its background; add
   .lwr-section--light when the component needs the white surface the
   source design assumes (e.g. the navy section headings). */
.lwr-section {
  padding: 64px var(--lwr-gutter);
  text-align: left;
}
.lwr-section--light {
  background: var(--lwr-white);
}
.lwr-section--mist {
  background: var(--lwr-mist);
}

/* ---------- Typographic roles ----------
   `margin: 0` is declared explicitly because the host page's base
   stylesheet will otherwise apply its own paragraph/heading margins. */
.lwr-h1 {
  font-family: var(--lwr-font-condensed);
  font-weight: 700;
  font-size: clamp(44px, 5.63vw, var(--lwr-h1));
  line-height: .95;
  text-align: inherit;
  color: var(--lwr-white);
  margin: 0;
  display: block !important;
}
.lwr-h2 {
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: clamp(30px, 2.81vw, var(--lwr-h2));
  line-height: .95;
  text-align: inherit;
  text-transform: uppercase;
  color: var(--lwr-navy);
  margin: 0;
}
/* Source renders kickers in caps; markup stays sentence case for readability. */
.lwr-eyebrow {
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.41vw, var(--lwr-eyebrow));
  line-height: 1.25;
  text-align: inherit;
  text-transform: uppercase;
  color: var(--lwr-teal);
  margin: 0;
}
.lwr-lead {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.56vw, var(--lwr-lead));
  line-height: 1.35;
  text-align: inherit;
  margin: 0;
}
.lwr-body {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, var(--lwr-body));
  line-height: 1.35;
  text-align: inherit;
  color: var(--lwr-ink);
  margin: 0;
}
.lwr-numeral {
  font-family: var(--lwr-font-numeral);
  font-weight: 700;
  font-size: clamp(40px, 3.75vw, var(--lwr-numeral));
  line-height: .95;
  text-align: inherit;
  color: var(--lwr-offwhite);
  margin: 0;
}

/* ---------- Buttons ---------- */
.lwr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.41vw, var(--lwr-eyebrow));
  line-height: 1.25;
  padding: 12.5px 30px;
  border-radius: var(--lwr-pill);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.lwr-btn--primary {
  background: var(--lwr-cyan);
  color: var(--lwr-white);
  border: 0;
}
.lwr-btn--primary:hover {
  background: var(--lwr-cyan);
  color: var(--lwr-white);
  text-decoration: underline !important;
}

.lwr-btn--ghost {
  background: transparent;
  color: var(--lwr-white);
  border: 2px solid var(--lwr-white);
}
.lwr-btn--ghost:hover {
  background: transparent;
  color: var(--lwr-white);
  text-decoration: underline !important;
}

/* Outline button for light backgrounds: cyan rule, slate label. */
.lwr-btn--outline {
  background: transparent;
  color: var(--lwr-slate);
  border: 2px solid var(--lwr-cyan);
}
.lwr-btn--outline:hover {
  text-decoration: underline !important;
}

/* Solid white button for use on the blue CTA panel. */
.lwr-btn--onblue {
  background: var(--lwr-white);
  color: var(--lwr-teal);
  border: 0;
  letter-spacing: .06em;
}
.lwr-btn--onblue:hover { background: var(--lwr-offwhite); }

/* ---------- Surfaces ---------- */

/* The signature LWR mesh gradient — 6 stacked radial gradients over white.
   Copied verbatim from the source stats band (.comp-msnf6czx::before). */
.lwr-mesh {
  background-image:
    radial-gradient(circle at 93.022% 0.256%, rgb(0,179,220) 0%, 17.5%, rgba(0,179,220,0) 35%),
    radial-gradient(circle at 94% 90%,        rgb(2,127,193) 0%, 20%,   rgba(2,127,193,0) 40%),
    radial-gradient(circle at 7% 88%,         rgba(0,179,220,.99) 0%, 25%, rgba(0,179,220,0) 50%),
    radial-gradient(circle at 6% 13%,         rgb(0,179,220) 0%, 42%,   rgba(0,179,220,0) 70%),
    radial-gradient(circle at 94% 11%,        rgb(2,127,193) 0%, 42%,   rgba(2,127,193,0) 70%),
    radial-gradient(circle at 49% 50%,        rgb(255,255,255) 0%, 100%, rgba(255,255,255,0) 100%);
  background-color: var(--lwr-white);
}

.lwr-rule { background: var(--lwr-offwhite); }


/* ============================================================
   COMPONENT: Hero band
   Source: 1600 x 546, content inset 59px (3.7%).
   The blue gradient is baked into the art — no overlay on desktop.
   ============================================================ */
.lwr-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  background: var(--lwr-blue);
  overflow: hidden;
  /* Hero type is sized from the band's own width (cqi), the same technique
     the case-study cards use, so the whole composition scales as one rather
     than freezing at 1600px. */
  container-type: inline-size;
}
/* Holds the art's ratio (756/2220 = 34.054%) as a MINIMUM height. The copy
   shares this grid cell, so whichever is taller wins — the band matches the
   photo on wide screens and grows for the text on narrow ones, and neither
   is ever clipped. Using aspect-ratio here instead would let the height
   drive the width. */
.lwr-hero::before {
  content: "";
  grid-area: 1 / 1;
  padding-top: 34.054%;
}
.lwr-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}
.lwr-hero__inner {
  grid-area: 1 / 1;
  align-self: center;
  width: 100%;
  padding: 4.25cqi var(--lwr-gutter) 2.94cqi;   /* 68 / 47 at 1600 */
}
/* Each of these restates family/size/leading so the hero survives even if a
   role class (.lwr-lead / .lwr-h1) is dropped from the markup. */
.lwr-hero__breadcrumb {
  font-family: var(--lwr-font-body);
  font-size: max(16px, 1.5625cqi);   /* 25px at 1600 */
  line-height: 1.35;
  font-style: italic;
  text-align: left;
  color: var(--lwr-sage);
  margin: 0 0 .875cqi;
}
.lwr-hero__breadcrumb a { color: inherit; text-decoration: none; }
.lwr-hero__breadcrumb a:hover { text-decoration: underline; }

.lwr-hero__title {
  font-family: var(--lwr-font-condensed);
  font-weight: 700;
  font-size: max(30px, 5.63cqi);     /* 90px at 1600 */
  line-height: .95;
  text-align: left;
  color: var(--lwr-white);
  margin: 0 0 1.375cqi;
}

.lwr-hero__copy {
  font-family: var(--lwr-font-body);
  font-size: max(16px, 1.5625cqi);   /* 25px at 1600 */
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  color: var(--lwr-white);
  max-width: 35.7cqi;                /* 571px at 1600 */
  margin: 0 0 3.125cqi;
}
.lwr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25cqi 4cqi;
}
/* Buttons scale with the band too, so the row keeps its proportion */
.lwr-hero .lwr-btn {
  font-size: max(14px, 1.41cqi);
  padding: .78cqi 1.875cqi;
}

@media (max-width: 760px) {
  /* The ratio floor is already shorter than the copy at this size, so the
     content sets the height on its own. */
  .lwr-hero__inner { padding: 44px 24px; }
  .lwr-hero__breadcrumb { margin-bottom: 12px; }
  .lwr-hero__title { margin-bottom: 16px; }
  .lwr-hero__copy { max-width: none; margin-bottom: 28px; }
  .lwr-hero .lwr-btn { font-size: 15px; padding: 12.5px 24px; }
  /* The art crops toward its lighter middle on phones — add a scrim so the
     white copy keeps contrast. */
  .lwr-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(1,27,84,.62) 0%, rgba(1,27,84,.22) 100%);
  }
  .lwr-hero__actions { gap: 14px; }
  .lwr-hero .lwr-btn { width: 100%; }
}


/* ============================================================
   COMPONENT: Stats band
   Source: 1600 x 210, four equal columns, 1px #efeff6 hairlines
   at 25% / 50% / 75%.
   ============================================================ */
.lwr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 210px;
  align-items: center;
}
.lwr-stats .lwr-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 24px;
  text-align: center;
  height: 100%;
}
/* Hairline sits on the column edge and spans the full band height */
.lwr-stats .lwr-stat + .lwr-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--lwr-offwhite);
}
/* Declares its own size/leading rather than relying on .lwr-body also being
   applied — otherwise it inherits the host page's body type. */
.lwr-stats .lwr-stat__label {
  font-family: var(--lwr-font-body);
  font-size: clamp(16px, 1.25vw, var(--lwr-body));
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--lwr-white);
  text-transform: uppercase;
  max-width: 22ch;
  margin: 0;
}

@media (max-width: 860px) {
  .lwr-stats { grid-template-columns: repeat(2, 1fr); }
  .lwr-stats .lwr-stat + .lwr-stat::before { display: none; }
  .lwr-stats .lwr-stat:nth-child(even)::before {
    content: "";
    display: block;
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 1px;
    background: var(--lwr-offwhite);
  }
}
@media (max-width: 480px) {
  .lwr-stats { grid-template-columns: 1fr; }
  .lwr-stats .lwr-stat:nth-child(even)::before { display: none; }
}


/* ============================================================
   COMPONENT: Case-study cards
   Geometry measured off the source card art (794 x 1042, a 2x
   asset displayed at 397 x 521). Sizes are in cqi (1cqi = 1% of
   card width) so the card is exact at 397px and stays
   proportional at any width.
   ============================================================ */
.lwr-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 397px));
  justify-content: center;
  gap: 24px;
  align-items: stretch;
}

.lwr-card {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  background: var(--lwr-card);
  border-radius: 10px;
  overflow: hidden;
}

/* Photo bleeds from the top and dissolves into the card. In the source the
   fade completes at y=424 of a 794-wide asset → 53.4cqi. The photo itself
   runs to 38cqi; the gradient carries the last of it to navy, so the eyebrow
   at 33cqi lands over live image pixels as it does on the original card. */
.lwr-card__photo {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 53.4cqi;
  overflow: hidden;
  z-index: -1;
}
.lwr-card__photo img {
  display: block;
  width: 100%;
  height: 38cqi;
  object-fit: cover;
  object-position: center top;
}
.lwr-card__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(35,35,85,0)   0%,
    rgba(35,35,85,.15) 30%,
    rgba(35,35,85,.60) 55%,
    var(--lwr-card)    71%,
    var(--lwr-card)    100%);
}

/* 28/794 = 3.53cqi side padding; content starts at y=262 → 33cqi */
.lwr-card__body { padding: 33cqi 3.53cqi 11.6cqi; }

.lwr-card .lwr-card__eyebrow {
  font-family: var(--lwr-font-display);
  font-size: 2.45cqi;
  line-height: 1;
  letter-spacing: .04em;
  text-align: left;
  color: var(--lwr-sage);
  text-transform: uppercase;
  margin: 0 0 3.0cqi;
}
.lwr-card .lwr-card__title {
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: 5.6cqi;
  line-height: 1.15;
  text-align: left;
  color: var(--lwr-white);
  margin: 0 0 3.6cqi;
}
.lwr-card .lwr-card__stat {
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: 14.35cqi;
  line-height: .78;
  text-align: left;
  color: var(--lwr-white);
  margin: 0 0 1.5cqi;
}
.lwr-card .lwr-card__stat-label {
  font-family: var(--lwr-font-display);
  font-size: 3.15cqi;
  line-height: 1.2;
  text-align: left;
  color: var(--lwr-white);
  text-transform: uppercase;
  margin: 0 0 3.9cqi;
}
.lwr-card .lwr-card__rule {
  border: 0;
  border-top: 1px solid rgba(239, 239, 246, .22);
  margin: 0 0 6.1cqi;
}

.lwr-card .lwr-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5cqi;
}
.lwr-card .lwr-benefits li {
  position: relative;
  padding-left: 6.17cqi;          /* 49/794 */
  font-family: var(--lwr-font-body);
  font-size: 3.27cqi;
  line-height: 1.46;
  text-align: left;
  color: var(--lwr-offwhite);
  margin: 0;
}
.lwr-card .lwr-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 2.4cqi;
  height: 2.4cqi;
  border-radius: 50%;
  background: var(--lwr-sage);
}

@media (max-width: 900px) {
  .lwr-cards {
    grid-template-columns: minmax(0, 397px);
    justify-content: center;
    gap: 24px;
  }
}


/* ============================================================
   Section header (eyebrow + H2) used above card groups
   ============================================================ */
.lwr-section-head { margin: 0 0 40px; padding: 0; text-align: left; }
.lwr-section-head .lwr-h2,
.lwr-section-head .lwr-eyebrow { text-align: center; }
.lwr-section-head .lwr-eyebrow { margin: 0 0 12px; }


/* ============================================================
   COMPONENT: Feature split (image + copy)
   Source section: 1600 x 910. Framed product shot 699 x 731 on
   the left, copy column 766 wide starting at x=813 (60px gutter).
   ============================================================ */
.lwr-feature {
  display: grid;
  grid-template-columns: minmax(0, 699fr) minmax(0, 766fr);
  gap: 60px;
  align-items: start;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Framed product shot — 1px #d4d0d0 rule, 5px radius (measured) */
.lwr-feature__media {
  margin: 0;
  padding: 0;
  border: 1px solid var(--lwr-hairline);
  border-radius: 5px;
  overflow: hidden;
  background: var(--lwr-white);
}
.lwr-feature__media img {
  display: block;
  width: 100%;
  height: auto;
}

.lwr-feature__body { padding-top: 32px; }

.lwr-feature__title {
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: clamp(27px, 2.5vw, 40px);
  line-height: .95;
  text-align: left;
  color: var(--lwr-navy);
  margin: 13px 0 33px;
}

/* Pull-quote questions, held by a 6px cyan bar */
.lwr-feature__questions {
  border-left: 6px solid var(--lwr-cyan);
  padding-left: 23px;
  margin: 0 0 37px;
  display: grid;
  gap: 27px;
}
.lwr-feature__questions p {
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.41vw, var(--lwr-eyebrow));
  line-height: 1.25;
  text-align: left;
  color: var(--lwr-teal);
  margin: 0;
}

.lwr-feature__copy {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, var(--lwr-body));
  line-height: 1.35;
  text-align: left;
  color: var(--lwr-ink);
  margin: 0 0 28px;
}

/* Checklist — 40px cyan tick discs, drawn as a background image so each
   item stays a plain <li>. */
.lwr-checklist {
  list-style: none;
  margin: 0 0 29px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.lwr-checklist li {
  position: relative;
  min-height: 40px;
  padding-left: 48px;
  display: flex;
  align-items: center;
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, var(--lwr-body));
  line-height: 1.35;
  text-align: left;
  color: var(--lwr-ink);
  margin: 0;
}
.lwr-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' fill='%2300b3dc'/%3E%3Cpath d='M11.5 20.5l5.8 5.8L28.5 15' fill='none' stroke='%23ffffff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .lwr-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .lwr-feature__body { padding-top: 0; }
  .lwr-feature__questions { padding-left: 18px; }
  .lwr-checklist li { padding-left: 42px; min-height: 34px; }
  .lwr-checklist li::before { width: 34px; height: 34px; background-size: 34px 34px; }
  .lwr-feature .lwr-btn { width: 100%; }
}



/* ============================================================
   COMPONENT: Webinar promo
   Source section: 1600 x 514 on #f7f9fb. Copy column at x=55
   (592 wide), a 6px x 221px cyan rule at x=647, and an 800 x 450
   16:9 video at x=716 with a 17.5px radius.
   ============================================================ */
.lwr-webinar {
  --lwr-webinar-gap: 69px;
  display: grid;
  grid-template-columns: minmax(0, 592fr) minmax(0, 800fr);
  column-gap: var(--lwr-webinar-gap);
  align-items: center;
  /* Self-contained band: 32 + 450 (16:9 video) + 32 = the source's 514px.
     Carries its own surface and inset, so it needs no .lwr-section wrapper. */
  min-height: 514px;
  padding: 32px var(--lwr-gutter);
  background: var(--lwr-mist);
}

.lwr-webinar__body    { min-width: 0; }   /* keeps long words from blowing out the grid */
.lwr-webinar__eyebrow { margin: 0 0 12px; }
.lwr-webinar__title   { margin: 0 0 12px; }

.lwr-webinar__copy {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, var(--lwr-body));
  line-height: 1.35;
  text-align: left;
  color: var(--lwr-ink);
  max-width: 595px;
  margin: 0;
  padding-right: 2rem;
}

/* The cyan rule sits in the column gap, vertically centred. */
.lwr-webinar__media { position: relative; }
.lwr-webinar__media::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--lwr-webinar-gap));
  top: 55%;
  transform: translateY(-50%);
  width: 6px;
  height: 221px;
  background: var(--lwr-cyan);
}

.lwr-webinar__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 17.5px;
  overflow: hidden;
  background: #000;
}
.lwr-webinar__frame iframe,
.lwr-webinar__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

@media (max-width: 900px) {
  .lwr-webinar {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    min-height: 0;
    padding: 40px 24px;
  }
  /* Rule moves above the video and lies flat once stacked */
  .lwr-webinar__media::before {
    left: 0;
    top: -18px;
    transform: none;
    width: 84px;
    height: 6px;
  }
}


/* ============================================================
   COMPONENT: CTA band (photo + blue panel)
   Half-and-half split inside one rounded, clipped band.
   ============================================================ */
.lwr-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 18px;
  overflow: hidden;
  align-items: stretch;
}

.lwr-cta__media { position: relative; min-height: 320px; }
.lwr-cta__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lwr-cta__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 92px 75px;
  background: linear-gradient(120deg,
    var(--lwr-cyan) 0%,
    var(--lwr-blue) 58%,
    #0a5ba8 100%);
}

.lwr-cta__eyebrow {
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: clamp(14px, 1.06vw, 17px);
  line-height: 1.25;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
  color: var(--lwr-white);
  margin: 0 0 24px;
}

.lwr-cta__title {
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: clamp(27px, 2.5vw, 40px);
  line-height: 1.05;
  text-align: left;
  text-transform: uppercase;
  color: var(--lwr-white);
  margin: 0 0 28px;
}

.lwr-cta__copy {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, var(--lwr-body));
  line-height: 1.55;
  text-align: left;
  color: var(--lwr-white);
  max-width: 46ch;
  margin: 0 0 40px;
}

@media (max-width: 900px) {
  .lwr-cta { grid-template-columns: minmax(0, 1fr); }
  .lwr-cta__media { min-height: 260px; }
  .lwr-cta__panel { padding: 40px 28px; }
  .lwr-cta .lwr-btn { width: 100%; }
}


/* ============================================================
   COMPONENT: FAQ accordion
   Source section: 1600 x 971 on white. Centred kicker + H2 over
   an 80 x 6 cyan accent, then a 1074-wide list inset at x=263.
   Rows are 87px apart, divided by a 1px rgba(0,94,125,.32) rule.
   Built on <details>/<summary> so it works without JavaScript.
   ============================================================ */
.lwr-faq {
  padding: var(--lwr-gutter) 100px 73px;
  background: var(--lwr-white);
}

.lwr-faq__head {
  text-align: center;
  /* Source constrains the heading to 840px so it breaks onto two lines */
  max-width: 840px;
  margin: 0 auto 36px;
}
.lwr-faq__kicker { margin: 0 0 9px; }
.lwr-faq__title  { margin: 0 0 24px !important; }

/* Shared cyan accent rule under a centred heading. 80px in the FAQ,
   103px under the map heading — both measured. */
.lwr-accent,
.lwr_accent,
.lwr-faq__accent {
  width: var(--lwr-accent-w, 80px);
  height: 6px;
  background: var(--lwr-cyan);
  margin: 0 auto;
  margin-bottom: 25px;
}
.lwr-accent--wide { --lwr-accent-w: 103px; }

.lwr-faq__list {
  max-width: 1074px;
  margin: 0 auto;
}

.lwr-faq__item {
  /* Host stylesheets often pad/space bare <details> — neutralise it. */
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0, 94, 125, .32);
}

.lwr-faq__q {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 29px 60px 28px 0;
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.25;
  text-align: left;
  color: var(--lwr-blue);
  margin: 0;
}
.lwr-faq__q::-webkit-details-marker { display: none; }
.lwr-faq__q::marker { content: ""; }

/* ⊕ / ⊗ toggle, 36px, pinned to the right edge of the row */
.lwr-faq__q::after {
  content: "";
  position: absolute;
  right: 0;
  top: 29px;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23027fc1' stroke-width='1'/%3E%3Cpath d='M12.5 11.5H16.5V12.5H12.5V16.5H11.5V12.5H7.5V11.5H11.5V7.5H12.5V11.5Z' fill='%23027fc1'/%3E%3C/svg%3E");
}
.lwr-faq__item[open] > .lwr-faq__q::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23027fc1' stroke-width='1'/%3E%3Cpath d='M8.65 8.65L15.35 15.35M15.35 8.65L8.65 15.35' fill='none' stroke='%23027fc1' stroke-width='1'/%3E%3C/svg%3E");
}

.lwr-faq__q:focus-visible {
  outline: 2px solid var(--lwr-cyan);
  outline-offset: 4px;
}

/* Answers pick up the display face in blue — a step lighter than the
   question, which is the same family at 700. */
.lwr-faq__a {
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: clamp(10pt, 1.25vw, var(--lwr-body));
  line-height: 1.5;
  text-align: left;
  color: var(--lwr-blue-dark);
  margin: 0 0 28px;
}
.lwr-faq__a + .lwr-faq__a { margin-top: -12px; }
.lwr-faq__a a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .lwr-faq { padding: 56px 24px 40px; }
  .lwr-faq__q { padding: 22px 48px 22px 0; }
  .lwr-faq__q::after {
    top: 20px;
    width: 28px; height: 28px; background-size: 28px 28px;
  }
}


/* ============================================================
   COMPONENT: Installations map
   Converted from a standalone D3 + topojson widget. Source
   section is 1600 x 978: centred H2 over a 103 x 6 accent, a
   centred 20px lead, then a 1.55fr / .85fr split of map and
   side cards.

   The four map fills live in tokens above and are read back out
   by the script, so the legend and the SVG can't drift apart.
   ============================================================ */
.lwr-map {
  padding: 105px var(--lwr-gutter) 60px;
  background: var(--lwr-white);
}

.lwr-map__head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
}
.lwr-map__title { margin: 0 0 12px; }
.lwr-map__lead {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, var(--lwr-body));
  line-height: 1.35;
  text-align: center;
  color: var(--lwr-ink);
  max-width: 765px;
  margin: 11px auto 0;
}

.lwr-map__shell {
  display: grid;
  grid-template-columns: 1.55fr .85fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

/* --- map panel --- */
.lwr-map__frame {
  position: relative;
  background: var(--lwr-white);
  border: 1px solid var(--lwr-line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--lwr-shadow-sm);
}
.lwr-map__svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.lwr-map__svg path.st { transition: fill .18s var(--lwr-ease); }
.lwr-map__svg path.st.hit { cursor: pointer; }
.lwr-map__svg path.st.hit:hover { fill: var(--lwr-teal); }

/* --- hover tooltip --- */
.lwr-map__tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -130%);
  background: var(--lwr-card);
  color: var(--lwr-white);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--lwr-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(18, 51, 63, .3);
  transition: opacity .14s var(--lwr-ease);
  z-index: 5;
}
.lwr-map__tip em {
  display: block;
  font-style: normal;
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lwr-map-star);
  margin-top: 3px;
}

/* --- side cards --- */
.lwr-map__side { min-width: 0; }

.lwr-map__card {
  background: var(--lwr-white);
  border: 1px solid var(--lwr-line);
  border-radius: 14px;
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow: var(--lwr-shadow-sm);
}
.lwr-map__card + .lwr-map__card { margin-top: 18px; }

.lwr-map__legend {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lwr-map__legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--lwr-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  color: var(--lwr-ink);
  margin: 0;
}
.lwr-map__swatch {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  flex: 0 0 auto;
  border: 1px solid rgba(18, 51, 63, .08);
}
.lwr-map__swatch--credit    { background: var(--lwr-map-credit); }
.lwr-map__swatch--installed { background: var(--lwr-map-installed); }
.lwr-map__swatch--none      { background: var(--lwr-map-none); }
.lwr-map__swatch--star {
  background: none;
  border: 0;
  display: grid;
  place-items: center;
}

.lwr-map__kpi {
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  text-align: left;
  color: var(--lwr-teal);
  margin: 0;
}
.lwr-map__kpi + p, .lwr-map__kpi + div {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.58;
  text-align: left;
  color: var(--lwr-ink);
  margin: 10px 0 0;
}

.lwr-map__note {
  font-family: var(--lwr-font-body);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: left;
  color: var(--lwr-ink);
  margin: 18px 0 0;
}

@media (max-width: 900px) {
  .lwr-map { padding: 56px 24px 40px; }
  .lwr-map__shell { grid-template-columns: 1fr; }
}


/* ============================================================
   COMPONENT: Revenue estimator
   Converted from a standalone slider widget. Source section is
   1600 x 876 on --lwr-mist: centred kicker + H2 over a 103 x 6
   accent and a centred lead, then a two-column card — white
   controls on the left, dark gradient results on the right.
   ============================================================ */
.lwr-calc {
  padding: 69px var(--lwr-gutter) 60px;
  background: var(--lwr-mist);
}

.lwr-calc__head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
}
.lwr-calc__kicker { margin: 0 0 15px; }
.lwr-calc__title  { margin: 0 0 17px; }
.lwr-calc__lead {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, var(--lwr-body));
  line-height: 1.35;
  text-align: center;
  color: var(--lwr-ink);
  max-width: 765px;
  margin: 11px auto 0;
}

.lwr-calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--lwr-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--lwr-shadow-lg);
}

.lwr-calc__controls {
  padding: clamp(26px, 3vw, 44px);
  background: var(--lwr-white);
}

.lwr-calc__output {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 3vw, 44px);
  color: var(--lwr-white);
  background: linear-gradient(135deg,
    var(--lwr-card)  0%,
    var(--lwr-royal) 58%,
    var(--lwr-teal)  100%);
}

/* --- controls --- */
.lwr-calc__field { margin: 0 0 30px; }
.lwr-calc__field:last-child { margin-bottom: 0; }

.lwr-calc__field-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.lwr-calc__label {
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--lwr-gray);
  margin: 0;
}

.lwr-calc__value {
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  text-align: right;
  color: var(--lwr-teal);
  white-space: nowrap;
}

.lwr-calc__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--lwr-font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lwr-gray);
}
/* A host `span { font-family: … }` rule beats inheritance, so the end labels
   have to claim the parent's type explicitly. */
.lwr-calc__scale span { font: inherit; color: inherit; }

/* --- range sliders --- */
.lwr-calc input[type="range"] {
  width: 100%;
  height: 6px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--lwr-pale);
  outline: none;
  cursor: pointer;
  /* Horizontal drags belong to the slider; vertical scrolling stays with
     the page, which matters when this is embedded in a CMS. */
  touch-action: pan-x;
}
.lwr-calc input[type="range"]::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  appearance: none;
  -webkit-appearance: none;
  border: 4px solid var(--lwr-cyan);
  border-radius: 50%;
  background: var(--lwr-white);
  box-shadow: 0 2px 8px rgba(18, 51, 63, .25);
  cursor: grab;
}
.lwr-calc input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 4px solid var(--lwr-cyan);
  border-radius: 50%;
  background: var(--lwr-white);
  box-shadow: 0 2px 8px rgba(18, 51, 63, .25);
  cursor: grab;
}
.lwr-calc input[type="range"]:focus-visible {
  box-shadow: 0 0 0 4px rgba(0, 179, 220, .3);
}

/* --- results panel --- */
.lwr-calc__k {
  font-family: var(--lwr-font-display);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: .16em;
  text-align: left;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
  margin: 0;
}

.lwr-calc__big {
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-align: left;
  color: var(--lwr-white);
  margin: 10px 0 4px;
}

.lwr-calc__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.lwr-calc__figure {
  display: block;
  font-family: var(--lwr-font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  text-align: left;
  color: var(--lwr-white);
  margin-top: 6px;
}

.lwr-calc__note {
  font-family: var(--lwr-font-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.58;
  text-align: left;
  color: rgba(255, 255, 255, .62);
  margin: 24px 0 0;
}

/* CTA reuses .lwr-btn--primary at the widget's smaller size */
.lwr-calc .lwr-btn {
  align-self: flex-start;
  margin-top: 22px;
  padding: 14px 26px;
  font-size: 13.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .lwr-calc { padding: 48px 24px 40px; }
  .lwr-calc__grid { grid-template-columns: 1fr; }
}