.elementor-352 .elementor-element.elementor-element-e59a04a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-352 .elementor-element.elementor-element-05b408e{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-352 .elementor-element.elementor-element-05b408e:not(.elementor-motion-effects-element-type-background), .elementor-352 .elementor-element.elementor-element-05b408e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://liwometals.ca/wp-content/uploads/2026/04/on-site-hero.jpg");background-position:bottom center;background-size:cover;}.elementor-352 .elementor-element.elementor-element-3dcfbac{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-352 .elementor-element.elementor-element-4d277b3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-352 .elementor-element.elementor-element-d6cc14c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-352 .elementor-element.elementor-element-641d5de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-352 .elementor-element.elementor-element-9ed20bc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-352 .elementor-element.elementor-element-2b1abe2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-352 .elementor-element.elementor-element-7f0c4b2{width:100%;max-width:100%;}.elementor-352 .elementor-element.elementor-element-0f03170{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group.recaptcha_v3-bottomleft, .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-html{padding-bottom:0px;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-button[type="submit"]{color:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-352 .elementor-element.elementor-element-bd8677e{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}body.elementor-page-352:not(.elementor-motion-effects-element-type-background), body.elementor-page-352 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://liwometals.ca/wp-content/uploads/2026/02/liwo-metal-bg-dark-scaled.jpg");background-position:center center;background-size:cover;}@media(min-width:768px){.elementor-352 .elementor-element.elementor-element-3dcfbac{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-1deaeb6 *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site Hero Content Widget  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste this into the HTML widget's  Custom CSS  field.
   ".elementor-352 .elementor-element.elementor-element-1deaeb6" = the widget's wrapper element.

   IDENTICAL to the home page hero CSS (widgets/hero/hero-CSS.css).
   Same spacing, same typography, same responsive breakpoints.
   The .liwo-btn-primary styles come from global.css —
   no need to redefine them here.

   Spacing values verified against:
     - design-system/spacing-inventory.md (Section 3.1)
     - design-system/typography.md (Hero section)
   ═══════════════════════════════════════════════════════ */

/* ── Widget wrapper: fill the parent section ── */
.elementor-352 .elementor-element.elementor-element-1deaeb6 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
}

/* ── Hero inner wrapper ── */
.elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Top padding clears the fixed navbar (~70-80px).
     Bottom padding pushes content above the floor-fade's
     densest zone. Matches home hero exactly.
     Ref: spacing-inventory.md §3.1 */
  padding: 64px 48px 64px;
  text-align: center;
}

/* ── Content column ── */
.elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Headline ──
   Afacad 4.5rem / 500 / italic
   Ref: typography.md — Hero headline
   Ref: spacing-inventory.md §3.1 — margin-bottom 24px */
.elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__headline {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 4.5rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  color: #F2F5F8;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.50),
    0 1px 4px  rgba(0, 0, 0, 0.35);
  margin-bottom: 24px;
  padding: 0;
}

/* ── Subheadline ──
   Poppins (falls through to system-ui since Poppins isn't loaded)
   1.5rem / 400
   Ref: typography.md — Hero subheadline
   Ref: spacing-inventory.md §3.1 — margin-bottom 32px */
.elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__sub {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.55;
  color: #D7DEE6;
  text-shadow:
    0 1px 8px rgba(0, 0, 0, 0.40),
    0 1px 3px rgba(0, 0, 0, 0.25);
  margin-bottom: 32px;
  padding: 0;
}

/* ── Bottom group (sub + button) ── */
.elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Button positioning ──
   Ref: spacing-inventory.md §3.1 — margin-top 8px */
.elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-btn-primary {
  position: relative;
  z-index: 2;
  margin-top: 8px;
}


/* ━━━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━━━
   Ref: spacing-inventory.md §3.1 — 120px 36px 64px
   Ref: typography.md — Hero tablet: 3.5rem headline  */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero {
    padding: 120px 36px 64px;
  }

  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__headline {
    font-size: 3.5rem;
  }

  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__sub {
    font-size: 17px;
  }
}


/* ━━━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━━━
   Ref: spacing-inventory.md §3.1 — 100px 16px 48px
   Ref: typography.md — Hero mobile: 2.5rem headline,
   left-aligned, space-between layout                 */
@media (max-width: 767px) {
  /* Fill the full viewport height */
  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero {
    min-height: 100vh;
    padding: 25vh 16px 48px;
    align-items: stretch;
  }

  /* Spread headline (top) and bottom group (bottom) apart */
  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__content {
    justify-content: top;
    min-height: 100%;
    flex: 1;
  }

  /* Headline sits near the top, left-aligned on mobile */
  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__headline {
    font-size: 2.5rem;
    margin-bottom: 16px;
    text-align: center;
    align-self: flex-start;
  }

  /* Bottom group anchored to the bottom */
  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__bottom {
    align-items: center;
  }

  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-hero__sub {
    font-size: 1.125rem;
    margin-bottom: 32px;
  }

  .elementor-352 .elementor-element.elementor-element-1deaeb6 .liwo-btn-primary {
    margin-top: 4px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d959651 *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site "Why On-Site" Section  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste this into the HTML widget's  Custom CSS  field.
   ".elementor-352 .elementor-element.elementor-element-d959651" = the widget's wrapper element.

   The Elementor container should be full-width with 0 padding.
   This widget handles its own max-width, centering, and
   section padding internally.

   Reference docs:
     - design-system/typography.md
     - design-system/color-inventory.md
     - design-system/spacing-inventory.md
     - wireframes/final/on-site-why.html
   ═══════════════════════════════════════════════════════ */


/* ── Section wrapper ──────────────────────────────────
   Max-width 1240px, centered, with section padding.
   Ref: spacing-inventory.md §2 — content sections
   Desktop: 64px top/bottom, 40px left/right               */
.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px;
}


/* ── Section heading ──────────────────────────────────
   Matches Elementor heading widget (kit preset 648b148).
   Ref: typography.md — Section headings
   Ref: spacing-inventory.md §6 — heading mb 18px          */
.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__heading {
  font-family: 'Afacad', Sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #F2F5F8;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: -0.16px;
  padding: 0;
}


/* ── Section subheading ───────────────────────────────
   Ref: typography.md — kit preset f552a13
   0.875rem / 600 / Afacad-first                           */
.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__subheading {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: #AAB6C2;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  line-height: 1.6;
  padding: 0;
}


/* ── 3-card grid ──────────────────────────────────────
   Ref: spacing-inventory.md §7 — card grid gap 24px
   Matches panel profile grid gap on desktop                */
.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}


/* ── Card ─────────────────────────────────────────────
   Surface: #383D43 / Border: #454C55 / Radius: 12px
   Ref: color-inventory.md §1 — card surface & border
   Ref: spacing-inventory.md §5 — border-radius 12px       */
.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__card {
  display: flex;
  flex-direction: column;
  background: #383D43;
  border: 1px solid #454C55;
  border-radius: 12px;
  padding: 32px 28px 28px;
  transition: border-color 200ms ease;
}

.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__card:hover {
  border-color: #59636E;
}


/* ── Icon container ───────────────────────────────────
   48×48px with subtle fill + border.
   Ref: on-site-style-audit.md — new token:
   bg rgba(242,245,248,0.06), border rgba(242,245,248,0.08) */
.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(242,245,248,0.06);
  border: 1px solid rgba(242,245,248,0.08);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__icon svg {
  width: 24px;
  height: 24px;
  color: #D7DEE6;
}


/* ── Card title ───────────────────────────────────────
   Afacad 22px / 700 — matches panel profile card title.
   Ref: typography.md — card title                          */
.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__title {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #F2F5F8;
  margin-bottom: 10px;
  line-height: 1.25;
  padding: 0;
}


/* ── Card description ─────────────────────────────────
   Afacad-first 14px / 400 / #AAB6C2 (label-level for
   secondary descriptive text).
   flex-grow: 1 ensures cards align to equal height.        */
.elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__desc {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #AAB6C2;
  line-height: 1.65;
  flex-grow: 1;
  padding: 0;
  margin: 0;
}


/* ━━━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━━━
   Ref: spacing-inventory.md §2 — 72px / 24px
   Ref: spacing-inventory.md §7 — card gap 16px tablet     */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why {
    padding: 72px 24px;
  }

  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__grid {
    gap: 16px;
  }

  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__card {
    padding: 24px 20px 20px;
  }

  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__title {
    font-size: 18px;
  }

  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__desc {
    font-size: 13px;
  }
}


/* ━━━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━━━
   Ref: spacing-inventory.md §2 — 56px / 16px
   Grid goes single-column.                                */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why {
    padding: 56px 16px;
  }

  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__heading {
    font-size: 2rem;
  }

  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__subheading {
    font-size: 0.95rem;
    margin-bottom: 40px;
  }

  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .elementor-352 .elementor-element.elementor-element-d959651 .liwo-why__card {
    padding: 24px 20px 20px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-27bc61e *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site "What We Offer" Section  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste this into the HTML widget's  Custom CSS  field.
   ".elementor-352 .elementor-element.elementor-element-27bc61e" = the widget's wrapper element.

   Card system matches the home page Panel Profiles:
   same surface, border, radius, overline/title/spec patterns.
   Key difference: these are service cards (no CTA strip),
   with a description paragraph replacing the PDF download link.

   Reference docs:
     - design-system/typography.md
     - design-system/color-inventory.md
     - design-system/spacing-inventory.md (§3.2 Panel Profile Cards)
     - widgets/panel-profiles/panel-profiles-CSS.css
     - wireframes/final/on-site-what-we-offer.html
   ═══════════════════════════════════════════════════════ */


/* ── Section wrapper ──────────────────────────────────
   Ref: spacing-inventory.md §2 — content sections
   Desktop: 64px top/bottom, 40px left/right               */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px;
}


/* ── Section heading ──────────────────────────────────
   Ref: typography.md — kit preset 648b148 (3rem / 600)
   Ref: spacing-inventory.md §6 — heading mb 18px          */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__heading {
  font-family: 'Afacad', Sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #F2F5F8;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: -0.16px;
  padding: 0;
}


/* ── Section subheading ───────────────────────────────
   Ref: typography.md — kit preset f552a13 (0.875rem/600)  */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__subheading {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: #AAB6C2;
  text-align: center;
  max-width: 660px;
  margin: 0 auto 56px;
  line-height: 1.6;
  padding: 0;
}


/* ── 3-card grid ──────────────────────────────────────
   Ref: spacing-inventory.md §7 — card grid gap 24px       */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}


/* ── Card ─────────────────────────────────────────────
   Ref: color-inventory.md §1 — #383D43 / #454C55
   Ref: spacing-inventory.md §5 — radius 12px              */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__card {
  display: flex;
  flex-direction: column;
  background: #383D43;
  border: 1px solid #454C55;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 200ms ease;
}

.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__card:hover {
  border-color: #59636E;
}


/* ── Card image area ──────────────────────────────────
   16:10 aspect ratio (slightly taller than 16:9 product
   cards — gives service photos more breathing room).
   Ref: panel-profiles-CSS.css — same fade pattern          */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #32363B, #2E3137);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Photo — edge-to-edge fill (same as pp-card__photo) */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom fade into card surface
   Ref: color-inventory.md — rgba(56,61,67,0.45)
   Matches panel profile card image fade exactly            */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(56, 61, 67, 0) 0%,
    rgba(56, 61, 67, 0.45) 100%
  );
  pointer-events: none;
}

/* Photo placeholder tag (remove when real photos are added) */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__photo-tag {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.4);
  border: 1px dashed #59636E;
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #7F8B98;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ── Card content area ────────────────────────────────
   Ref: spacing-inventory.md §3.2 — pp-card__content
   padding 28px 24px 24px. Service cards use slightly
   different padding (24px 24px 28px) to accommodate
   the description paragraph replacing the drawing link.    */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px 24px 28px;
}


/* ── Overline ─────────────────────────────────────────
   Ref: typography.md — overline 12px / 600 / 0.15em
   Ref: spacing-inventory.md §3.3 — overline mb 10px       */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__overline {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #AAB6C2;
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}


/* ── Card title ───────────────────────────────────────
   Ref: typography.md — card title 22px / 700
   Ref: spacing-inventory.md §3.3 — title mb 18px          */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__title {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #F2F5F8;
  line-height: 1.25;
  margin-bottom: 12px;
  padding: 0;
}


/* ── Card description ─────────────────────────────────
   Afacad-first 14px / 400 / #AAB6C2.
   flex-grow: 1 pushes specs to the bottom for alignment.   */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__desc {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #AAB6C2;
  line-height: 1.65;
  flex-grow: 1;
  margin-bottom: 16px;
  padding: 0;
}


/* ── Spec rows ────────────────────────────────────────
   Ref: spacing-inventory.md §3.2 — specs border-top
   padding-top 16px, spec row padding 6px 0
   Ref: typography.md — spec label 11px/600/0.12em/#7F8B98,
   spec value 14px/500/#D7DEE6                              */
.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__specs {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #40464E;
  padding-top: 16px;
}

.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}

.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__spec-row:first-child {
  padding-top: 0;
}

.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__spec-row:last-child {
  padding-bottom: 0;
}

.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__spec-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7F8B98;
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__spec-value {
  color: #D7DEE6;
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}


/* ━━━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━━━
   Ref: spacing-inventory.md §2 — 72px / 24px
   Ref: spacing-inventory.md §7 — gap 16px tablet          */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer {
    padding: 72px 24px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__grid {
    gap: 16px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__content {
    padding: 20px 20px 24px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__title {
    font-size: 20px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__desc {
    font-size: 13px;
  }
}


/* ━━━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━━━
   Ref: spacing-inventory.md §2 — 56px / 16px
   Ref: spacing-inventory.md §7 — gap 20px mobile
   Grid goes single-column. Image switches to 16:9.        */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer {
    padding: 56px 16px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__heading {
    font-size: 2rem;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__subheading {
    font-size: 0.95rem;
    margin-bottom: 40px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__image {
    aspect-ratio: 16 / 9;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__content {
    padding: 20px 20px 24px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__spec-label {
    font-size: 10px;
  }

  .elementor-352 .elementor-element.elementor-element-27bc61e .liwo-offer__spec-value {
    font-size: 13px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cfb786d *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site "Powered by NTM SSQ II"  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste this into the HTML widget's  Custom CSS  field.
   ".elementor-352 .elementor-element.elementor-element-cfb786d" = the widget's wrapper element.

   This section deliberately breaks the 3-card grid rhythm
   of Sections 2 & 3 with a single large 2-column card.
   The asymmetry signals "featured equipment / credibility."

   Reference docs:
     - design-system/typography.md
     - design-system/color-inventory.md
     - design-system/spacing-inventory.md
     - tasks/on-site-style-audit.md (new tokens: stat value, stat container)
     - wireframes/final/on-site-ssq2.html
   ═══════════════════════════════════════════════════════ */


/* ── Section wrapper ──────────────────────────────────
   Ref: spacing-inventory.md §2 — content sections         */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px;
}


/* ── Section heading ──────────────────────────────────
   Ref: typography.md — kit preset 648b148 (3rem / 600)    */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__heading {
  font-family: 'Afacad', Sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #F2F5F8;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: -0.16px;
  padding: 0;
}


/* ── Section subheading ───────────────────────────────
   Ref: typography.md — kit preset f552a13 (0.875rem/600)  */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__subheading {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: #AAB6C2;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
  line-height: 1.6;
  padding: 0;
}


/* ═══════════════════════════════════════════════════════
   EQUIPMENT SHOWCASE CARD — 2-column layout
   Image left, specs right. Single card, not a grid.
   ═══════════════════════════════════════════════════════ */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: #383D43;
  border: 1px solid #454C55;
  border-radius: 12px;
  overflow: hidden;
}


/* ── Left: Machine image ──────────────────────────────  */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__image {
  position: relative;
  background: linear-gradient(135deg, #32363B, #2A2D31);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
  overflow: hidden;
}

/* Photo — edge-to-edge fill */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right-edge fade into card surface */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__image::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30%;
  background: linear-gradient(
    to right,
    rgba(56, 61, 67, 0) 0%,
    rgba(56, 61, 67, 0.3) 100%
  );
  pointer-events: none;
}

/* Photo placeholder tag (remove when real photo is added) */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__photo-tag {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.4);
  border: 1px dashed #59636E;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #7F8B98;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.6;
}


/* ── Right: Specs panel ───────────────────────────────  */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__specs {
  padding: 40px 36px 40px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ── Overline ─────────────────────────────────────────
   Ref: typography.md — 12px / 600 / 0.15em / #AAB6C2
   Ref: spacing-inventory.md §3.3 — overline mb 10px       */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__overline {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #AAB6C2;
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}


/* ── Equipment title ──────────────────────────────────
   28px / 700 — intentionally larger than card title (22px)
   to give the machine a "featured" feel.
   Ref: on-site-style-audit.md — documented as intentional
   Ref: spacing-inventory.md §3.3 — title mb 18px          */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__title {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #F2F5F8;
  line-height: 1.2;
  margin-bottom: 18px;
  padding: 0;
}


/* ── Description ──────────────────────────────────────
   Ref: typography.md — Afacad-first 14px / 400             */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__desc {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #AAB6C2;
  line-height: 1.65;
  margin-bottom: 28px;
  padding: 0;
}


/* ── Stat highlights row ──────────────────────────────
   3 key numbers in a row: 75 ft/min, 16 profiles, 45 min.
   Ref: on-site-style-audit.md — new tokens:
   stat container bg rgba(242,245,248,0.03),
   stat value 26px/700/#F2F5F8,
   stat label 11px/600/0.12em/#7F8B98                       */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stat {
  text-align: center;
  padding: 16px 8px;
  background: rgba(242,245,248,0.03);
  border: 1px solid #40464E;
  border-radius: 8px;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stat-value {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #F2F5F8;
  line-height: 1;
  margin-bottom: 4px;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stat-label {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #7F8B98;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}


/* ── Detail spec rows ─────────────────────────────────
   Same pattern as panel profile spec rows.
   Ref: spacing-inventory.md §3.2 — border-top,
   padding-top 16px, row padding 6px 0                     */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__detail-rows {
  border-top: 1px solid #40464E;
  padding-top: 16px;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__detail-row:first-child {
  padding-top: 0;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__detail-row:last-child {
  padding-bottom: 0;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__detail-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7F8B98;
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__detail-value {
  color: #D7DEE6;
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}


/* ── External link ────────────────────────────────────
   Matches tech-specs drawing link pattern.
   Ref: typography.md — 12px / 500 / 0.03em                */
.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: #AAB6C2;
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color 200ms ease;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__link:hover {
  color: #F2F5F8;
}

.elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* ━━━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━━━  */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2 {
    padding: 72px 24px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__card {
    gap: 24px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__image {
    min-height: 380px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__specs {
    padding: 32px 28px 32px 4px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__title {
    font-size: 24px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stat-value {
    font-size: 22px;
  }
}


/* ━━━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━━━
   2-column stacks to single column: image on top (16:9),
   specs panel below with full padding.                    */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2 {
    padding: 56px 16px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__heading {
    font-size: 2rem;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__subheading {
    font-size: 0.95rem;
    margin-bottom: 40px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__card {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__image {
    min-height: 220px;
    aspect-ratio: 16 / 9;
  }

  /* On mobile, fade goes bottom (not right) */
  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__image::after {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(
      to bottom,
      rgba(56, 61, 67, 0) 0%,
      rgba(56, 61, 67, 0.4) 100%
    );
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__specs {
    padding: 24px 20px 28px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stat {
    padding: 12px 6px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stat-value {
    font-size: 20px;
  }

  .elementor-352 .elementor-element.elementor-element-cfb786d .liwo-ssq2__stat-label {
    font-size: 9px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d8db9c9 *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site "Ideal For" Section  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste this into the HTML widget's  Custom CSS  field.
   ".elementor-352 .elementor-element.elementor-element-d8db9c9" = the widget's wrapper element.

   Single unified card with 3 internal columns separated
   by vertical dividers. Text-only section — intentionally
   no photos to give the eye a rest between Sections 3/4
   (photo-heavy) and Section 6 (gallery).

   Reference docs:
     - design-system/typography.md
     - design-system/color-inventory.md
     - design-system/spacing-inventory.md
     - tasks/on-site-style-audit.md (icon container tokens)
     - wireframes/final/on-site-ideal-for.html
   ═══════════════════════════════════════════════════════ */


/* ── Section wrapper ──────────────────────────────────
   Ref: spacing-inventory.md §2 — content sections         */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px;
}


/* ── Section heading ──────────────────────────────────
   Ref: typography.md — kit preset 648b148 (3rem / 600)    */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__heading {
  font-family: 'Afacad', Sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #F2F5F8;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: -0.16px;
  padding: 0;
}


/* ── Section subheading ───────────────────────────────
   Ref: typography.md — kit preset f552a13 (0.875rem/600)  */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__subheading {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: #AAB6C2;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
  line-height: 1.6;
  padding: 0;
}


/* ═══════════════════════════════════════════════════════
   UNIFIED CARD — 3-column grid, no gap
   Single card surface with vertical dividers between items.
   ═══════════════════════════════════════════════════════ */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #383D43;
  border: 1px solid #454C55;
  border-radius: 12px;
  overflow: hidden;
}


/* ── Item (each column) ──────────────────────────────  */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 36px 32px;
  position: relative;
}

/* Vertical dividers between columns */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  right: 0;
  width: 1px;
  background: #40464E;
}


/* ── Icon container ──────────────────────────────────
   Ref: on-site-style-audit.md — new tokens:
   icon bg rgba(242,245,248,0.04),
   icon border rgba(242,245,248,0.07)                      */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(242,245,248,0.04);
  border: 1px solid rgba(242,245,248,0.07);
  margin-top: 2px;
}

.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__icon svg {
  width: 22px;
  height: 22px;
  color: #D7DEE6;
}


/* ── Item title ──────────────────────────────────────
   Ref: typography.md — card title 22px / 700              */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__title {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #F2F5F8;
  margin-bottom: 6px;
  line-height: 1.3;
  padding: 0;
}


/* ── Item description ────────────────────────────────
   Ref: typography.md — Afacad-first 14px / 400            */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__desc {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #AAB6C2;
  line-height: 1.6;
  padding: 0;
}


/* ═══════════════════════════════════════════════════════
   MINIMUM PROJECT CALLOUT — below the grid
   ═══════════════════════════════════════════════════════ */
.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__minimum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 24px;
  background: rgba(242,245,248,0.03);
  border: 1px solid #40464E;
  border-radius: 8px;
}

.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__minimum-icon {
  width: 18px;
  height: 18px;
  color: #7F8B98;
  flex-shrink: 0;
}

.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__minimum-text {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #7F8B98;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

.elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__minimum-text strong {
  color: #D7DEE6;
  font-weight: 600;
}


/* ━━━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━━━  */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal {
    padding: 72px 24px;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__item {
    padding: 28px 24px;
    gap: 14px;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__title {
    font-size: 20px;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__desc {
    font-size: 13px;
  }
}


/* ━━━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━━━
   Grid goes single-column. Vertical dividers become
   horizontal dividers. Unified card stays as one card.    */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal {
    padding: 56px 16px;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__heading {
    font-size: 2rem;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__subheading {
    font-size: 0.95rem;
    margin-bottom: 40px;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__grid {
    grid-template-columns: 1fr;
  }

  /* Dividers switch from vertical to horizontal */
  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__item:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 28px;
    right: 28px;
    width: auto;
    height: 1px;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__item {
    padding: 24px 20px;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__minimum {
    margin-top: 16px;
    padding: 12px 16px;
  }

  .elementor-352 .elementor-element.elementor-element-d8db9c9 .liwo-ideal__minimum-text {
    font-size: 1rem;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e5f9712 *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site "Our Work" Gallery  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste this into the HTML widget's  Custom CSS  field.
   ".elementor-352 .elementor-element.elementor-element-e5f9712" = the widget's wrapper element.

   3-column masonry-style photo grid with varied spans.
   Hover reveals expand icon; click opens a lightweight
   lightbox with keyboard and touch navigation.

   Reference docs:
     - design-system/typography.md
     - design-system/color-inventory.md
     - design-system/spacing-inventory.md
     - tasks/on-site-style-audit.md (gallery expand icon token)
     - wireframes/final/on-site-gallery.html
   ═══════════════════════════════════════════════════════ */


/* ── Section wrapper ──────────────────────────────────
   Ref: spacing-inventory.md §2 — content sections         */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 40px;
}


/* ── Section heading ──────────────────────────────────
   Ref: typography.md — kit preset 648b148 (3rem / 600)    */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__heading {
  font-family: 'Afacad', Sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #F2F5F8;
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: -0.16px;
  padding: 0;
}


/* ── Section subheading ───────────────────────────────
   Ref: typography.md — kit preset f552a13 (0.875rem/600)  */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__subheading {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: #AAB6C2;
  text-align: center;
  max-width: 580px;
  margin: 0 auto 48px;
  line-height: 1.6;
  padding: 0;
}


/* ═══════════════════════════════════════════════════════
   PHOTO GRID — 3-column masonry-like layout
   Ref: wireframe — 180px rows, 12px gap, 8px radius
   ═══════════════════════════════════════════════════════ */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 180px;
  gap: 12px;
}


/* ── Grid item ───────────────────────────────────────  */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item {
  position: relative;
  background: #32363B;
  border: 1px solid #454C55;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item:hover {
  border-color: #59636E;
}

/* Hover overlay */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(44,47,51,0);
  transition: background 200ms ease;
  pointer-events: none;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item:hover::after {
  background: rgba(44,47,51,0.15);
}


/* ── Span modifiers ──────────────────────────────────  */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item--tall {
  grid-row: span 2;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item--wide {
  grid-column: span 2;
}


/* ── Photo (when real images are added) ──────────────  */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Item inner (placeholder layout) ─────────────────  */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

/* Diagonal texture hint for placeholders */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 30px,
    rgba(100,100,100,0.04) 30px,
    rgba(100,100,100,0.04) 31px
  );
}

/* Photo placeholder tag */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__photo-tag {
  position: relative;
  z-index: 1;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #5F6A75;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
}


/* ── Expand icon (hover reveal) ──────────────────────
   Ref: on-site-style-audit.md — gallery expand icon
   bg rgba(0,0,0,0.45), radius 6px                        */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__expand {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 200ms ease, transform 200ms ease;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item:hover .liwo-gallery__expand {
  opacity: 1;
  transform: scale(1);
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__expand svg {
  width: 16px;
  height: 16px;
  color: #D7DEE6;
}


/* ═══════════════════════════════════════════════════════
   LIGHTBOX — Full-screen overlay
   Ref: wireframe annotation — #2C2F33 @ 95% opacity,
   centered image, arrow nav, close button, keyboard
   + touch support via JS.
   ═══════════════════════════════════════════════════════ */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(44,47,51,0.95);
  align-items: center;
  justify-content: center;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox--active {
  display: flex;
}

/* Close button */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid #454C55;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__close:hover {
  border-color: #59636E;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__close svg {
  width: 20px;
  height: 20px;
  color: #D7DEE6;
}

/* Navigation arrows */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid #454C55;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__nav:hover {
  border-color: #59636E;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__nav svg {
  width: 20px;
  height: 20px;
  color: #D7DEE6;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__nav--prev {
  left: 20px;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__nav--next {
  right: 20px;
}

/* Content area */
.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__content {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
}

.elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__caption {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #AAB6C2;
  text-align: center;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}


/* ━━━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━━━  */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery {
    padding: 72px 24px;
  }

  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__grid {
    grid-auto-rows: 150px;
    gap: 10px;
  }
}


/* ━━━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━━━
   Grid drops to 2 columns, uniform cells (no spans).
   Ref: wireframe — 140px rows, 8px gap.                  */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery {
    padding: 56px 16px;
  }

  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__heading {
    font-size: 2rem;
  }

  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__subheading {
    font-size: 0.95rem;
    margin-bottom: 36px;
  }

  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: 8px;
  }

  /* No tall/wide spans on mobile — keep it uniform */
  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item--tall {
    grid-row: span 1;
  }

  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-gallery__item--wide {
    grid-column: span 1;
  }

  /* Lightbox nav arrows move closer on mobile */
  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__nav--prev {
    left: 10px;
  }

  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__nav--next {
    right: 10px;
  }

  .elementor-352 .elementor-element.elementor-element-e5f9712 .liwo-lightbox__close {
    top: 12px;
    right: 12px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ed20bc */.elementor-352 .elementor-element.elementor-element-9ed20bc {
    display: none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7f0c4b2 *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site CTA Left Side  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste into the HTML widget's  Custom CSS  field.
   ".elementor-352 .elementor-element.elementor-element-7f0c4b2" = the widget's wrapper element.

   This widget lives inside the LEFT container of the CTA
   parent section. The Elementor container handles layout
   (side-by-side with the form card). This CSS only styles
   the copy + phone/email content.

   Reference docs:
     - design-system/typography.md
     - design-system/color-inventory.md
     - design-system/spacing-inventory.md
     - tasks/on-site-style-audit.md (phone number token)
   ═══════════════════════════════════════════════════════ */


/* ── Content wrapper ─────────────────────────────────
   Padding for breathing room inside the container.
   No max-width or centering — container handles that.  */
.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left {
  padding: 24px 0 24px 0;
}


/* ═══════════════════════════════════════════════════════
   COPY ELEMENTS
   ═══════════════════════════════════════════════════════ */

/* ── Overline ─────────────────────────────────────────
   Ref: typography.md — 12px / 600 / 0.15em / #AAB6C2     */
.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__overline {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #AAB6C2;
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
}


/* ── Section heading ──────────────────────────────────
   Ref: wireframe — 2.25rem / 600 / #F2F5F8               */
.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__heading {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 600;
  color: #F2F5F8;
  line-height: 1.272;
  margin-bottom: 12px;
  letter-spacing: -0.16px;
  padding: 0;
}


/* ── Description ──────────────────────────────────────  */
.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__desc {
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #AAB6C2;
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 460px;
  padding: 0;
}


/* ── Phone block ─────────────────────────────────────
   Ref: on-site-style-audit.md — phone number token
   20px/600/0.02em/#F2F5F8                                 */
.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__phone-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: rgba(242,245,248,0.03);
  border: 1px solid #40464E;
  border-radius: 10px;
  margin-bottom: 16px;
  max-width: 340px;
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__phone-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(242,245,248,0.06);
  border: 1px solid rgba(242,245,248,0.08);
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__phone-icon svg {
  width: 20px;
  height: 20px;
  color: #D7DEE6;
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__phone-label {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #7F8B98;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2px;
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__phone-number {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #F2F5F8;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__phone-number:hover {
  color: #FFFFFF;
}


/* ── Email block ─────────────────────────────────────  */
.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__email-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  max-width: 340px;
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__email-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(242,245,248,0.06);
  border: 1px solid rgba(242,245,248,0.08);
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__email-icon svg {
  width: 20px;
  height: 20px;
  color: #D7DEE6;
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__email-label {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #7F8B98;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2px;
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__email-address {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #D7DEE6;
  text-decoration: none;
}

.elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__email-address:hover {
  color: #F2F5F8;
}


/* ━━━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━━━  */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left {
    padding: 16px 0;
  }

  .elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__heading {
    font-size: 1.85rem;
  }
}


/* ━━━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━━━
   Phone/email blocks go full width for tap targets.      */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left {
    padding: 8px 0;
  }

  .elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__heading {
    font-size: 2rem;
  }

  .elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__phone-block,
  .elementor-352 .elementor-element.elementor-element-7f0c4b2 .liwo-cta-left__email-block {
    max-width: 100%;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-adc7d03 *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site CTA Form Header  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste into the HTML widget's Custom CSS field.
   ".elementor-352 .elementor-element.elementor-element-adc7d03" = the widget's wrapper element.
   ═══════════════════════════════════════════════════════ */
 
.elementor-352 .elementor-element.elementor-element-adc7d03 .liwo-form-header {
  padding: 0;
}
 
.elementor-352 .elementor-element.elementor-element-adc7d03 .liwo-form-header__title {
  font-family: 'Afacad', 'Poppins', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #F2F5F8;
  margin: 0 0 12px 0;
  padding: 0;
  line-height: 1.2;
}
 
.elementor-352 .elementor-element.elementor-element-adc7d03 .liwo-form-header__desc {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #AAB6C2;
  margin: 0;
  padding: 0;
}
 
 
/* ━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-adc7d03 .liwo-form-header__title {
    font-size: 1.75rem;
  }
 
  .elementor-352 .elementor-element.elementor-element-adc7d03 .liwo-form-header__desc {
    font-size: 14px;
  }
}
 
 
/* ━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-adc7d03 .liwo-form-header__title {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }
 
  .elementor-352 .elementor-element.elementor-element-adc7d03 .liwo-form-header__desc {
    font-size: 13px;
  }
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-bd8677e *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site CTA Form Widget  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste into the FORM WIDGET's Custom CSS field
   (Advanced → Custom CSS).
 
   FIELD LAYOUT:
     Desktop/Tablet — 2 columns for the first 4 fields,
     message textarea spans both columns underneath.
     Mobile — single column stack.
 
   ELEMENTOR FIELD CONFIG:
     Fields 1–4 (Name, Email, Phone, Company): 50% width
     Field 5 (Message/textarea):               100% width
     Submit:                                    100% width
 
   The parent container handles the card styling.
   ═══════════════════════════════════════════════════════ */
 
/* ── Form wrapper — transparent, no card ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
 
/* Flex wrapper — enable wrapping for 2-col grid */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-form-fields-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}
 
/* ── Field group spacing ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group {
  padding: 0 10px;
  margin-bottom: 22px;
  box-sizing: border-box;
}
 
/* ── 2-column layout: first 4 fields at 50% ──
   Elementor sets column width via .elementor-col-XX
   classes, but we enforce it here as a safety net. */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group.elementor-col-50 {
  width: 50% !important;
  flex-basis: 50% !important;
  max-width: 50% !important;
}
 
/* ── Full-width fields (message + submit) ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group.elementor-col-100 {
  width: 100% !important;
  flex-basis: 100% !important;
  max-width: 100% !important;
}
 
/* ── Labels ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #AAB6C2;
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}
 
/* ── Required asterisk ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-mark-required .elementor-field-label::after {
  color: #EF4444;
  padding-left: 3px;
}
 
/* ── Text inputs, tel, email, number ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-textual {
  background-color: #26292D !important;
  border: 1px solid #454C55 !important;
  color: #F2F5F8 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
 
/* ── Placeholder ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-textual::placeholder {
  color: #7F8B98 !important;
  opacity: 1;
}
 
/* ── Hover state ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-textual:hover {
  border-color: #59636E !important;
}
 
/* ── Focus state ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-textual:focus {
  border-color: #59636E !important;
  box-shadow: 0 0 0 3px rgba(238, 241, 244, 0.18) !important;
  outline: none !important;
}
 
/* ── Select wrapper ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper {
  width: 100%;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select {
  background-color: #26292D !important;
  border: 1px solid #454C55 !important;
  color: #F2F5F8 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
 
/* Select placeholder (first disabled option) */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select option[value=""] {
  color: #7F8B98;
}
 
/* Select showing placeholder text — muted color */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select.liwo-placeholder-active {
  color: #7F8B98 !important;
}
 
/* Once a real option is picked, restore full text color */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select:not(.liwo-placeholder-active) {
  color: #F2F5F8 !important;
}
 
/* Select option styling */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select option {
  background-color: #26292D;
  color: #F2F5F8;
  padding: 10px;
}
 
/* Optgroup dividers (SMP / PVDF section headers) */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select optgroup {
  background-color: #1E2024;
  color: #AAB6C2;
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 10px;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select optgroup option {
  font-weight: 400;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: #F2F5F8;
  background-color: #26292D;
  padding: 10px 16px;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select:hover {
  border-color: #59636E !important;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select:focus {
  border-color: #59636E !important;
  box-shadow: 0 0 0 3px rgba(238, 241, 244, 0.18) !important;
  outline: none !important;
}
 
/* ── Select dropdown arrow (use Elementor's native arrow only) ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper::before {
  display: none !important;
}
 
/* ── Textarea ── */
.elementor-352 .elementor-element.elementor-element-bd8677e textarea.elementor-field-textual {
  min-height: 140px;
  resize: vertical;
}
 
/* ── Submit button container ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit {
  padding: 0 10px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}
 
/* ── Submit button — CTA style ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit .elementor-button {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 14px 18px !important;
  background: #F2F5F8 !important;
  color: #111827 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  font-family: 'Afacad', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  cursor: pointer;
  width: auto !important;
  text-decoration: none !important;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit .elementor-button:hover {
  background: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit .elementor-button:active {
  background: #D7DEE6 !important;
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22) !important;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit .elementor-button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(242, 245, 248, 0.16), 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}
 
/* Button text + icon */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-button-text {
  color: #111827 !important;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-button-icon {
  font-size: 14px;
  color: #111827 !important;
  opacity: 0.95;
  transition: transform 160ms ease;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit .elementor-button:hover .elementor-button-icon {
  transform: translateX(2px);
}
 
/* ── Validation / error ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-message-danger {
  color: #EF4444 !important;
  font-size: 12px;
  margin-top: 6px;
}
 
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-error .elementor-field-textual,
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-error .elementor-select-wrapper select {
  border-color: #EF4444 !important;
}
 
/* ── Success message ── */
.elementor-352 .elementor-element.elementor-element-bd8677e .elementor-message-success {
  color: #D7DEE6 !important;
  font-family: 'Afacad', 'Poppins', 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  padding: 24px 20px !important;
}
 
 
/* ═══════════════════════════════════════════════════════
   TABLET  (≤ 1024px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group {
    padding: 0 8px;
    margin-bottom: 18px;
  }
 
  /* Keep 2-column layout on tablet */
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group.elementor-col-50 {
    width: 50% !important;
    flex-basis: 50% !important;
    max-width: 50% !important;
  }
 
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit {
    padding: 0 8px !important;
    margin-top: 8px !important;
  }
}
 
 
/* ═══════════════════════════════════════════════════════
   MOBILE  (≤ 767px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Every field group EXCEPT submit gets side padding */
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group:not(.elementor-field-type-submit) {
    padding: 0 4px;
    margin-bottom: 16px;
  }
 
  /* Stack ALL fields to full width on mobile */
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-group {
    width: 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
 
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-textual {
    padding: 12px 14px !important;
    font-size: 14px;
  }
 
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-select-wrapper select {
    padding: 12px 14px !important;
    font-size: 14px;
  }
 
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-label {
    font-size: 11px;
    margin-bottom: 8px;
  }
 
  .elementor-352 .elementor-element.elementor-element-bd8677e textarea.elementor-field-textual {
    min-height: 120px;
  }
 
  /* Submit — inline CTA button on mobile */
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit {
    padding: 0 4px !important;
    margin-top: 6px !important;
    text-align: center;
  }
 
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-field-type-submit .elementor-button {
    padding: 12px 16px !important;
    font-size: 14px;
  }
 
  /* Success — mobile */
  .elementor-352 .elementor-element.elementor-element-bd8677e .elementor-message-success {
    padding: 20px 16px !important;
    font-size: 14px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f03170 *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site CTA Right Container  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste into the RIGHT-SIDE CONTAINER's Custom CSS field
   in Elementor (Advanced → Custom CSS). This is the
   container that wraps the HTML header widget + the Form
   widget together as a single card.
   ═══════════════════════════════════════════════════════ */

/* ── Card surface ── */
.elementor-352 .elementor-element.elementor-element-0f03170 {
  background: #383D43 !important;
  border: 1px solid #454C55 !important;
  border-radius: 16px !important;
  padding: 40px 30px !important;
  overflow: visible;
}


/* ━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-0f03170 {
    padding: 30px 20px !important;
  }
}


/* ━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-0f03170 {
    padding: 24px 16px !important;
    border-radius: 12px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2b1abe2 *//* ═══════════════════════════════════════════════════════
   LiWo Metals — On-Site CTA Parent Section  ·  Custom CSS
   ═══════════════════════════════════════════════════════
   Paste into the CTA PARENT SECTION's Custom CSS field
   in Elementor (Advanced → Custom CSS).

   ACTUAL DOM STRUCTURE (from page source):
     Parent section (2b1abe2) — e-parent, e-con-full, e-flex
       ├── HTML Widget (7f0c4b2) — direct child widget (left copy)
       └── Container (0f03170) — e-child, e-con-boxed (form card)

   The left side is an HTML widget sitting directly in the
   parent — NOT wrapped in a child container. So we target
   the widget element and the child container as siblings.
   ═══════════════════════════════════════════════════════ */


/* ── Parent section — flex row, 50/50 split ── */
.elementor-352 .elementor-element.elementor-element-2b1abe2 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 48px !important;
  padding: 64px 40px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

/* ── Left side: HTML widget (direct child) — 50% ── */
.elementor-352 .elementor-element.elementor-element-2b1abe2 > .elementor-widget {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}

/* ── Right side: child container (form card) — 50% ── */
.elementor-352 .elementor-element.elementor-element-2b1abe2 > .e-con {
  flex: 0 0 calc(50% - 48px) !important;
  max-width: calc(50% - 48px) !important;
  width: calc(50% - 48px) !important;
  min-width: 0 !important;
}


/* ━━━━━━━━━━━━━━━  Tablet  ≤ 1024px  ━━━━━━━━━━━━━━━ */
@media (max-width: 1024px) {
  .elementor-352 .elementor-element.elementor-element-2b1abe2 {
    padding: 56px 24px !important;
    gap: 32px !important;
  }

  .elementor-352 .elementor-element.elementor-element-2b1abe2 > .elementor-widget {
    flex: 0 0 45% !important;
    max-width: 45% !important;
    width: 45% !important;
  }

  .elementor-352 .elementor-element.elementor-element-2b1abe2 > .e-con {
    flex: 0 0 calc(55% - 32px) !important;
    max-width: calc(55% - 32px) !important;
    width: calc(55% - 32px) !important;
  }
}


/* ━━━━━━━━━━━━━━━  Mobile  ≤ 767px  ━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .elementor-352 .elementor-element.elementor-element-2b1abe2 {
    flex-direction: column !important;
    padding: 48px 16px !important;
    gap: 32px !important;
  }

  .elementor-352 .elementor-element.elementor-element-2b1abe2 > .elementor-widget,
  .elementor-352 .elementor-element.elementor-element-2b1abe2 > .e-con {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}/* End custom CSS */