/**
 * LynTec brand utilities — globalized classes that match Figma tokens.
 *
 * Use these via the `class` prop on YT elements in template JSON, OR via the
 * YT Builder UI's "Class" field on any element. NO per-template CSS files.
 *
 * Add more utility classes here when a Figma token shows up in 2+ sections.
 * Stick to single-purpose, semantic names (color/size/role, not section).
 *
 * Brand palette ref: memory/project_lyntec_brand_palette.md
 *   navy        #06013D
 *   link blue   #1F5D9F
 *   body        #424242
 *   stripe      #F7F7F8
 *   section bg  #F2F2F2
 */

/* ---------- Backgrounds ----------
   `!important` mirrors UIkit's own `.uk-background-*` utility pattern —
   needed to beat `.uk-section-default` / `.uk-section-muted` which set
   their own backgrounds at equal specificity. */
.lt-bg-gray  { background: #F2F2F2 !important; }
.lt-bg-navy  { background: #06013D !important; color: #fff; }
.lt-bg-white { background: #fff     !important; }
.lt-bg-gradient-gray {
    background: linear-gradient(0deg, #f2f2f2, #fff);
}

/* ---------- Text colors ---------- */
.lt-text-navy       { color: #06013D !important; }
.lt-text-link       { color: #1F5D9F !important; }
.lt-text-body       { color: #424242 !important; }
.lt-text-white      { color: #fff    !important; }
/* Muted body text used on navy backgrounds (e.g. footer CTA body). */
.lt-text-soft-navy  { color: #B8C2DE !important; }

/* Inline brand/cross-link on a navy surface (e.g. House-of-Brands table).
   Reads white, underlines, brightens to link-blue on hover. */
.lt-brand-link,
.lt-brand-link:link,
.lt-brand-link:visited {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}
.lt-brand-link:hover,
.lt-brand-link:focus {
    color: #7BB7FF !important;
    text-decoration-color: #7BB7FF;
}

/* ---------- Eyebrow ---------- */
.lt-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #1F5D9F!important;
    line-height: 1;
}
.lt-eyebrow-dark,
.lt-eyebrow-dark a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #7BB7FF!important;
    line-height: 1;
}
.lt-eyebrow-white { color: #fff; }
.lt-eyebrow-navy  { color: #06013D; }

/* ---------- Display headings ---------- */
.lt-h-display {
    font-family: 'Bitter', Georgia, serif;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    color: #06013D;
}

.lt-h-section {
    font-family: 'Bitter', Georgia, serif;
    font-size: 36px;
    line-height: 46px;
    font-weight: 700;
    color: #06013D;
}

/* Card-sized heading (inside `.lt-card-*` panels). */
.lt-h-card {
    font-family: 'Bitter', Georgia, serif;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: #06013D;
}

/* ---------- Body text ---------- */
.lt-text-lead {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 28px;
    color: #424242;
}
.lt-text-lead p,
.lt-text-lead {
    margin-top: 0;
}

/* Card-sized body text — smaller and lighter than `.lt-text-lead`. */
.lt-text-card {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #737380;
}
.lt-text-card p { margin: 0; }

/* ---------- Eyebrow size variants ---------- */
.lt-eyebrow-sm {
    font-size: 11px;     /* used inside cards; base `.lt-eyebrow` is 14px */
}

/* ---------- Buttons ---------- */
/* `lt-btn-*` classes go on the YT `button_item` element (or any anchor).
   Use them in pairs (one filled + one ghost) on dark CTA strips. The
   trailing `→` arrow is added via ::after so editors don't need to type
   it into the source data. */

.lt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem!important;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1!important;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lt-btn::after {
    content: " \2192";     /* → arrow */
    margin-left: 0.5rem;
}

.lt-btn-primary,
a.lt-btn-primary {
    background:   #fff               !important;
    color:        #06013D            !important;
    border:       1px solid #fff     !important;
}
.lt-btn-primary:hover,
a.lt-btn-primary:hover {
    background:   transparent        !important;
    color:        #fff               !important;
    border:       1px solid #fff     !important;
}

.lt-btn-ghost,
a.lt-btn-ghost {
    background:   transparent        !important;
    color:        #fff               !important;
    border:       1px solid #fff     !important;
}
.lt-btn-ghost:hover,
a.lt-btn-ghost:hover {
    background:   #fff               !important;
    color:        #06013D            !important;
    border:       1px solid #fff     !important;
}

/* Remove button styling for badges */
.lt-no-button {
    padding: 0!important;
    margin: 0!important;
    line-height: 1!important;
    border: none!important;
    text-transform: uppercase!important;
    font-family: "Inter", sans-serif!important;
}
.lt-no-button:hover {
    background: none!important;
}
/* ---------- Card panels ---------- */
.lt-card-muted {
    background: #F2F2F2;
    border-radius: 6px;
    padding: 28px;
}
/* When the card is rendered via YT grid_item, style its inner slots so
   editors don't need to set each text class individually. The grid_item
   renders `.el-meta` (above title), `.el-title`, and `.el-content`. */
.lt-card-muted .el-meta {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #1F5D9F;
    line-height: 1;
    margin: 0 0 8px;
}
.lt-card-muted .el-title {
    font-family: 'Bitter', Georgia, serif;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: #06013D;
    margin: 0 0 12px;
}
.lt-card-muted .el-content,
.lt-card-muted .el-content p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #737380;
    margin: 0;
}

/* White card with a link-blue accent bar + bottom divider before its footer
   link (Figma "14 Support" category / feed / lifecycle cards). Put `.lt-card`
   on the YT column; children keep their own lt-* classes. `.lt-card-foot` on
   the footer link element draws the divider. */
.lt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #E0E0EB;
    border-radius: 6px;
    padding: 32px 31px;
    overflow: hidden;
}
.lt-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #1F5D9F;
}
/* Pin the footer link to the bottom of the (now equal-height) card so footer
   links align across a row regardless of body length. `margin-top:auto` works
   because `.lt-card` is a flex column; auto absorbs the leftover space. */
.lt-card-foot {
    border-top: 1px solid #E5E5ED;
    padding-top: 18px;
}
/* Two-class specificity (0,2,0) + !important to beat UIkit's `.uk-margin-top` /
   `.uk-margin` (also on this element) regardless of stylesheet load order. */
.lt-card > .lt-card-foot {
    margin-top: auto !important;
}

/* Card grids: `.lt-card` is placed on the YT grid column, but UIkit builds its
   gutter from column padding + a negative container margin — a filled card
   paints over that gutter, so adjacent cards touch (gapX: 0) and never match
   height. Convert any `.uk-grid` whose direct children are `.lt-card`s into a
   real CSS grid with explicit gaps and stretch (equal-height) cells. Scoped via
   :has() so only card grids are affected, never the 2-col hero/overview rows. */
.uk-grid:has(> .lt-card) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; /* matches Figma 24px card gutter (3×384 + 2×24 = 1200) */
    margin: 0 !important;
    align-items: stretch;
}
.uk-grid:has(> .lt-card) > * {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    /* NB: do NOT reset padding here — the grid child IS `.lt-card`, whose own
       32px padding must survive. UIkit's gutter padding is irrelevant in grid
       mode (the negative container margin is removed above). */
}
@media (max-width: 959px) {
    .uk-grid:has(> .lt-card) { grid-template-columns: 1fr; gap: 24px; }
}
/* Figma "Browse resources by category" cards are 280px tall (taller than the
   content needs); the extra space drops the footer link toward the bottom. */
#support-categories .lt-card { min-height: 280px; }
@media (max-width: 959px) {
    #support-categories .lt-card { min-height: 0; }
}
/* Support Categories custom element (builder/support_categories) — the same card
   grid as the .lt-card uk-grid above, but on clean native markup (no UIkit row /
   :has() trickery). Default 3-up, collapses to 1 column at ≤959 to match. */
.lt-support-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;   /* Figma card gutter */
    row-gap: 40px;      /* more breathing room between the two card rows */
    align-items: stretch;
}
.lt-support-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lt-support-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The global `.lt-card { height: 100% }` is meant for a YT column track; on a real
   grid item a percentage height fights `align-items: stretch` (resolves against the
   whole grid, not the row). Reset to auto so stretch alone equalizes row heights. */
.lt-support-cards > .lt-card { height: auto; }
@media (max-width: 959px) {
    .lt-support-cards,
    .lt-support-cards--2,
    .lt-support-cards--4 { grid-template-columns: 1fr; }
}
/* Figma card rhythm: ~16px eyebrow→heading (was a tight flat 10px). The heading
   already carries a 20px bottom margin, so heading→description is left alone. */
.lt-card .lt-h-card { margin-top: 16px !important; }

/* Translucent "glass" card for a hero/contact panel sitting on a navy section
   (Figma Support Contact Card). Text inside stays white; same link-blue accent
   bar as `.lt-card`. */
.lt-card-glass {
    position: relative;
    background: #011244; /* Figma: solid lighter-navy panel, not a translucent glass */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 32px;
    overflow: hidden;
    max-width: 450px !important;   /* Figma card width (beats UIkit .uk-width-1-2 max-width:100%) */
    margin-left: auto !important;  /* right-align within the hero's right half-column */
}
/* Support Contact Card refinements (Figma "14 Support"): full-width CTA, squarer
   radius, and muted slate labels (CALL / hours) — the `.lt-eyebrow` base color
   was otherwise overriding `.lt-text-soft-navy` on the CALL label. */
.lt-card-glass .lt-btn--primary {
    width: 100% !important;
    border-radius: 2px !important;
}
.lt-card-glass .lt-text-soft-navy {
    color: #B8C2DE !important;
}

/* On-navy text link (hero "Browse all support resources ↓") — Figma light blue,
   bold, 14px. `.lt-text-link` forces the darker #1F5D9F, so this overrides it. */
.lt-link-onnavy {
    color: #7AB8FF !important;
    font-weight: 700;
    font-size: 14px;
}
.lt-card-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #1F5D9F;
}

/* =======================================================================
   03 — Documents (Product Detail YT template, u4Tg1lzP)
   Three-column listing of downloads grouped by `download_type` taxonomy.
   Powered by the `chauvet_product_documents` source + `product_documents`
   custom builder element. Matches Figma "03 — Documents" wireframe.
   ======================================================================= */
.lt-documents {
    --lt-docs-text:    #06013D;   /* navy */
    --lt-docs-accent:  #1F5D9F;   /* link blue */
    --lt-docs-divider: #CCCCD9;
    --lt-docs-badge-bg: rgba(31, 93, 159, 0.08);
}
.lt-documents__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--lt-docs-accent);
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0 0 16px;
    text-transform: none;
}
.lt-documents__heading {
    font-family: 'Bitter', Georgia, serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--lt-docs-text);
    line-height: 1.2;
    margin: 0 0 56px;
}
.lt-documents__columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px;
}
@media (max-width: 959px) {
    .lt-documents__columns { grid-template-columns: 1fr; gap: 40px; }
}
.lt-documents__column-heading {
    font-family: 'Bitter', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--lt-docs-text);
    line-height: 1.2;
    margin: 0 0 12px;
}
.lt-documents__column-divider {
    height: 1px;
    background: var(--lt-docs-divider);
    margin: 0 0 8px;
}
.lt-documents__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lt-documents__row {
    margin: 0;
    border-bottom: 1px solid transparent;
}
.lt-documents__link {
    display: grid;
    grid-template-columns: 56px 1fr 24px;
    align-items: center;
    gap: 0;
    padding: 16px 0;
    color: var(--lt-docs-accent);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s ease, background 0.15s ease;
}
.lt-documents__link:hover,
.lt-documents__link:focus {
    color: #06013D;
    text-decoration: none;
}
.lt-documents__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    border-radius: 3px;
    background: var(--lt-docs-badge-bg);
    color: var(--lt-docs-accent);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.lt-documents__title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: inherit;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lt-documents__arrow {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--lt-docs-accent);
    text-align: right;
    line-height: 1;
}

/* ---------- Features Spotlight (lt-spotlight) ----------
 * ONE section in u4Tg1lzP bound to `chauvet_highlights` — YT auto-iterates
 * the section once per highlight (sections only render when the bound
 * source returns a multi-item list; single-item sources skip rendering).
 *
 * Alternation handled here in CSS since all iteration siblings share the
 * same compiled section template.
 *
 *   :nth-of-type(even)  →  white bg + image swapped to right side
 *   :only-child column  →  no image at all → text col expands to full width
 */

/* Alternation: even iterations get default (white) bg + image on the right */
.lt-spotlight:nth-of-type(even) { background: #fff !important; }
.lt-spotlight:nth-of-type(even) .uk-grid { flex-direction: row-reverse; }

/* No-image case: YT removes the image column entirely when has_media + no
   external_url. The text column ends up as `:only-child` of the grid.
   Promote it to full-width (capped at 800px so it reads naturally). */
.lt-spotlight .uk-grid > [class*="uk-width"]:only-child {
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.lt-slider .uk-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  padding: 6px 0 24px !important;
  overflow-x: auto !important;
  gap: .5rem !important;
  scroll-snap-type: x proximity !important;
  scroll-padding-left: 0 !important;
  scrollbar-color: #1F5D9F #F7F7F8 !important;
  scrollbar-width: thin !important;
}
.lt-slider .uk-grid > * {
  flex: 0 0 290px !important;
  max-width: 290px !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
  scroll-snap-align: start !important;
}

/* Mobile-only variant of .lt-slider — grid behaves normally on desktop
   (≥960px), turns into a full-bleed paged horizontal scroller below.
   Each tile fills 100% of its row so exactly one is visible per scroll
   page; snap-mandatory keeps the swipe paged. The strip itself goes
   flush by zeroing the YT `uk-container` gutter on mobile so there's
   no awkward dead space beside a partial-width tile. */
@media (max-width: 959px) {
  /* Cancel the YT section container's horizontal gutter so the strip
     spans the full viewport. Section background already extends
     edge-to-edge — this just removes the inner padding that constrains
     content. */
  .lt-slider-mobile .uk-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lt-slider-mobile .uk-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    gap: 0 !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  .lt-slider-mobile .uk-grid::-webkit-scrollbar { display: none !important; }
  /* Tile = 100% of container width → exactly one per scroll page.
     box-sizing border-box so the inner padding eats INTO the 100% (text
     gets breathing room without breaking the snap-page math). */
  .lt-slider-mobile .uk-grid > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 24px !important;
    margin-top: 0 !important;
    scroll-snap-align: start !important;
  }
  /* Kill UIkit's vertical divider between items — irrelevant when each
     tile occupies its own scroll page. */
  .lt-slider-mobile .uk-grid-divider > :not(.uk-first-column)::before { display: none !important; }
}

/* ---------------------------------------------------------------------
   GLOBAL CTA BUTTONS — used in dark hero / footer sections across the
   site (Installations Archive, Video Library, future pages). Applied
   via the `class` prop on YT button_item elements:
     .lt-btn--primary  → solid white bg, navy text, 4px radius
     .lt-btn--secondary → 1.5px white outline, transparent bg, 8px radius
   Per Figma: 56px tall, ~210px wide, Inter Bold 16px.
   `!important` is required because UIkit's `.uk-button-default` ships
   color/border declarations at the same specificity level.
   The original `.lt-installations__btn--*` class names are kept as
   aliases so the existing installations template doesn't need a rewrite.
   --------------------------------------------------------------------- */
.lt-btn--primary,
.lt-btn--navy,
.lt-installations__btn--primary {
  background: #fff !important;
  color: #06013D !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 0 28px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  min-height: 56px !important;
  min-width: 210px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.lt-btn--primary:hover,
.lt-btn--primary:focus,
.lt-installations__btn--primary:hover,
.lt-installations__btn--primary:focus {
  background: #f0f0f5 !important;
  color: #06013D !important;
}
/* Navy-filled CTA — same sizing as `.lt-btn--primary`, for use on LIGHT
   sections (e.g. the RA-process band) where a white button would vanish. */
.lt-btn--navy {
  background: #06013D !important;
  color: #fff !important;
}
.lt-btn--navy:hover,
.lt-btn--navy:focus {
  background: #1F5D9F !important;
  color: #fff !important;
}
/* Compact white CTA (Figma "Talk to a Spec Engineer": 43px tall, 13px Semi Bold,
   hugs its content) — modifier on top of `.lt-btn--primary`. */
.lt-btn--compact {
    min-height: 43px !important;
    min-width: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 22px !important;
}

.lt-btn--secondary,
.lt-installations__btn--secondary {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid #fff !important;
  border-radius: 8px !important;
  padding: 0 28px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  min-height: 56px !important;
  min-width: 220px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}
.lt-btn--secondary:hover,
.lt-btn--secondary:focus,
.lt-installations__btn--secondary:hover,
.lt-installations__btn--secondary:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* =======================================================================
   Policy pages (Returns & Exchanges #18, Warranty, …) — reusable building
   blocks. Page layouts live in post_content; these are the shared tokens.
   ======================================================================= */

/* Notice / callout box with a 4px left accent bar. */
.lt-note { position: relative; border-radius: 4px; padding: 15px 22px 15px 26px;
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; }
.lt-note p { margin: 0; }
.lt-note::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 4px 0 0 4px; }
.lt-note--warn { background: #FBF4E5; color: #8A6D1B; }
.lt-note--warn::before { background: #E0A92E; }
.lt-note--tip  { background: #ECF3FB; color: #1A4D99; }
.lt-note--tip::before  { background: #1F5D9F; }

/* Blue-marker bullet list for policy points. */
.lt-list { list-style: none; margin: 0; padding: 0; }
.lt-list li { position: relative; padding: 0 0 0 16px; margin: 0 0 11px;
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.5; color: #424242; }
.lt-list li:last-child { margin-bottom: 0; }
/* Figma marker: a thin 2px vertical bar (first-line height), not a dot. */
.lt-list li::before { content: ''; position: absolute; left: 0; top: 4px;
  width: 2px; height: 15px; border-radius: 1px; background: #1F5D9F; }

/* Data table — navy header, zebra body. Wrap in `.lt-table-wrap` for mobile scroll. */
.lt-table-wrap { overflow-x: auto; }
.lt-table { width: 100%; border-collapse: collapse; background: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px; }
.lt-table thead th { background: #06013D !important; color: #fff !important;
  text-align: left; padding: 14px 20px !important; font-weight: 600; font-size: 13px;
  letter-spacing: .3px; }
.lt-table tbody td { padding: 14px 20px !important; border-bottom: 1px solid #E5E5ED;
  color: #424242; vertical-align: top; }
.lt-table tbody tr:last-child td { border-bottom: 0; }
.lt-table tbody td:first-child { font-weight: 600; color: #06013D; }
.lt-table tbody td:nth-child(2) { font-weight: 700; color: #1F5D9F; white-space: nowrap; }

/* Navy stat-band item (4-up feature row on a dark section). */
.lt-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; padding: 22px 24px !important; height: 100%; }
.lt-stat__title { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 20px;
  line-height: 1.2; color: #fff; margin: 0; }
.lt-stat__desc { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5;
  color: #B8C2DE; margin: 8px 0 0; }

/* Numbered step card (process flows). Distinct class from `.lt-card` so it does
   NOT trigger the 3-col card-grid rule — step rows are 5-up. */
.lt-step { position: relative; background: #fff; border: 1px solid #E0E0EB;
  border-radius: 6px; padding: 24px 20px !important; height: 100%; }
.lt-step__num { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: #06013D; color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.lt-step__title { font-family: 'Bitter', Georgia, serif; font-weight: 700; font-size: 17px;
  line-height: 1.25; color: #06013D; margin: 0 0 8px; }
.lt-step__desc { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5;
  color: #424242; margin: 0; }

/* FAQ accordion — native <details>, no JS dependency. */
.lt-faq__item { background: #F7F7F8; border: 1px solid #E5E5ED; border-radius: 6px;
  margin: 0 0 12px; }
.lt-faq__item:last-child { margin-bottom: 0; }
.lt-faq__item > summary { list-style: none; cursor: pointer; padding: 18px 22px;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: #06013D;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lt-faq__item > summary::-webkit-details-marker { display: none; }
.lt-faq__item > summary::after { content: '+'; font-size: 22px; font-weight: 400;
  color: #1F5D9F; line-height: 1; flex: 0 0 auto; }
.lt-faq__item[open] > summary::after { content: '\2013'; }
.lt-faq__item > div { padding: 0 22px 20px; font-family: 'Inter', sans-serif;
  font-size: 14.5px; line-height: 1.6; color: #424242; }
.lt-faq__item > div p { margin: 0; }
/* FAQ accordion spans the full container (Figma 1200px) — override the inline
   860px cap on its wrapper. `!important` beats the inline style. */
div:has(> .lt-faq__item) { max-width: 100% !important; }

/* ---- Stat band + step rows: exact Figma gaps via real CSS grid -------- */
/* (UIkit column gutters can't hit 20px/12px cleanly; convert the grid like the
   .lt-card grids do. Scoped via :has() so only these rows are affected.) */
.uk-grid:has(> .lt-stat) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;                 /* Figma: 4×285 + 3×20 = 1200 */
  margin: 0 !important;
  align-items: stretch;
}
.uk-grid:has(> .lt-step) {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;                 /* Figma: 5×216 + 4×12 = 1200 */
  margin: 32px 0 0 !important;   /* gap from the heading row above (margin:0 jammed it to 0) */
  align-items: stretch;
}
.uk-grid:has(> .lt-stat) > *,
.uk-grid:has(> .lt-step) > * {
  width: auto !important; max-width: none !important; margin: 0 !important;
  /* NB: do NOT reset padding — the grid child IS the .lt-stat / .lt-step card,
     whose own padding must survive (same gotcha as the .lt-card grid). */
}

/* Hero sits directly above the navy stat band; its 'large' bottom padding left
   a 140px gap over the cards (Figma ≈100). Trim it on desktop only. Scoped to
   the hero (only section carrying .lt-h-display). */
@media (min-width: 960px) {
  body.page-id-48333 .uk-section:has(.lt-h-display) { padding-bottom: 100px !important; }
}

/* `›` connector between step cards (sits in the 12px gutter). */
.lt-step { position: relative; }
.lt-step:not(:last-child)::after {
  content: '\203A';
  position: absolute; top: 50%; right: -9px; transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-size: 20px; line-height: 1; font-weight: 400;
  color: #9AA3BE; z-index: 2;
}

/* =======================================================================
   Mobile responsiveness (policy pages). UIkit breakpoints: s=640, m=960.
   YT width_medium columns already stack below 960; these handle the
   CSS-grid rows + the data table.
   ======================================================================= */
@media (max-width: 959px) {
  .uk-grid:has(> .lt-stat) { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .uk-grid:has(> .lt-step) { grid-template-columns: 1fr; gap: 12px; }
  .lt-step:not(:last-child)::after { display: none; }   /* no connectors when stacked */
}
@media (max-width: 639px) {
  .uk-grid:has(> .lt-stat) { grid-template-columns: 1fr; gap: 12px; }
  /* Table keeps its columns readable and scrolls horizontally instead of squishing. */
  .lt-table { min-width: 620px; }
  body.page-id-48333 .lt-h-display,
  body.page-id-35889 .lt-h-display { font-size: 32px !important; line-height: 40px !important; }
}

/* =======================================================================
   Warranty page extras (#19) — coverage callout cards + a plain table variant.
   ======================================================================= */

/* Plain table variant — neutral 2nd column (base .lt-table colors col 2 blue
   for the fee/metric column; coverage + downloads tables don't want that). */
.lt-table--plain tbody td:nth-child(2) { color: #424242 !important; font-weight: 400 !important; white-space: normal !important; }

/* Covered / Not-covered callout cards. Padding is !important so the grid
   gutter can't override the card's own inset (the .lt-stat/.lt-step gotcha). */
.uk-grid:has(> .lt-cover) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px; margin: 0 !important; align-items: stretch;
}
.uk-grid:has(> .lt-cover) > * { width: auto !important; max-width: none !important; margin: 0 !important; }
.lt-cover { border-radius: 6px; padding: 26px 28px !important; height: 100%; border: 1px solid; }
.lt-cover--ok { background: #F1F8F3; border-color: #CFE8D7; }
.lt-cover--no { background: #FCF2F2; border-color: #F2D5D5; }
.lt-cover__title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .5px; text-transform: uppercase; margin: 0 0 18px; }
.lt-cover--ok .lt-cover__title { color: #1E7A45; }
.lt-cover--no .lt-cover__title { color: #B23B3B; }
.lt-cover__list { list-style: none; margin: 0; padding: 0; }
.lt-cover__list li { position: relative; padding: 0 0 0 30px; margin: 0 0 13px;
  font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.5; color: #424242; }
.lt-cover__list li:last-child { margin-bottom: 0; }
.lt-cover__list li::before { position: absolute; left: 0; top: 0; font-weight: 700; font-size: 15px; }
.lt-cover--ok .lt-cover__list li::before { content: '\2713'; color: #2E9E5B; }  /* ✓ */
.lt-cover--no .lt-cover__list li::before { content: '\2715'; color: #CC4B4B; }  /* ✕ */
/* Cover cards stack on tablet/phone. Must come AFTER the 2-col base above so it
   wins on source order (an earlier @media block would be overridden). */
@media (max-width: 959px) {
  .uk-grid:has(> .lt-cover) { grid-template-columns: 1fr !important; gap: 16px; }
}

/* =======================================================================
   Contact page (/contact-us/) — obfuscated email triggers + toast.
   See js/lyntec-contact.js. The address is assembled by JS into .lt-eml.
   ======================================================================= */
.lt-contact-trigger {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  color: #1F5D9F; text-decoration: none;
}
.lt-contact-trigger:hover,
.lt-contact-trigger:focus { color: #06013D; }
.lt-contact-trigger .lt-arrow { transition: transform .15s ease; }
.lt-contact-trigger:hover .lt-arrow { transform: translateX(3px); }
/* Push the trigger element to the card bottom so links align across cards
   (the old button used margin_top:auto). `.lt-trigger-el` is set on the YT
   text element's wrapper (the card's flex child). */
.lt-trigger-el { margin-top: auto; }

/* Brief highlight on the preselected GF department field. */
#input_16_5.lt-flash {
  animation: lt-flash 1.6s ease;
  border-color: #1F5D9F !important;
}
@keyframes lt-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,93,159,0); }
  20%      { box-shadow: 0 0 0 3px rgba(31,93,159,.35); }
}

/* Confirmation toast. */
.lt-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: #06013D; color: #fff; border-radius: 8px; padding: 14px 20px;
  max-width: 380px; box-shadow: 0 10px 34px rgba(6,1,61,.30);
  opacity: 0; transition: opacity .35s ease, transform .35s ease;
  z-index: 99999; display: flex; flex-direction: column; gap: 3px; pointer-events: none;
}
.lt-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.lt-toast strong { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; }
.lt-toast span   { font-family: 'Inter', sans-serif; font-size: 12.5px; color: #B8C2DE; line-height: 1.4; }

/* =======================================================================
   Products mega-menu — `nav_term_column` builder element (one column of
   taxonomy links). Colours assume a NAVY dropdown background (set on the
   menu-item Builder dropdown). `.lt-mm-tabs` styles the Category/Series
   Switcher nav if you add the optional helper class to it.
   ======================================================================= */
/* Figma: heading Inter Bold 14px; links Inter SemiBold 14px white@50%, ~15px gap, tight leading. */
.lt-mm-col__head { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 0; line-height: 1.2; color: #fff; margin: 0 0 16px; }
.lt-mm-col__head a { color: #fff; text-decoration: none; }
.lt-mm-col__head a:hover { color: #7BB7FF; }
.lt-mm-col__list { list-style: none; margin: 0; padding: 0; }
.lt-mm-col__list li { margin: 0 0 13px; }
.lt-mm-col__list li:last-child { margin-bottom: 0; }
.lt-mm-col__list a { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.2;
  color: rgba(255,255,255,.55); text-decoration: none; transition: color .12s ease; }
.lt-mm-col__list a:hover { color: #fff; }

/* Category/Series tab nav (UIkit subnav). Figma: Inter Bold 16px, #7BB7FF active underline. */
.lt-mm-tabs.uk-subnav { gap: 28px; margin: 0; }
.lt-mm-tabs.uk-subnav > * { padding-left: 0; }
.lt-mm-tabs.uk-subnav > * > a { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px;
  text-transform: none; color: rgba(255,255,255,.4); padding-bottom: 10px; border-bottom: 3px solid transparent; }
.lt-mm-tabs.uk-subnav > * > a:hover { color: #fff; }
.lt-mm-tabs.uk-subnav > .uk-active > a { color: #fff; border-bottom-color: #7BB7FF; }

/* ---- Mega-menu container (products_megamenu element) ---- */
/* Navy panel; full-width navy band behind a container-aligned content area. */
/* Navy panel. The dropdown is already sized/aligned to `.tm-page` (the YooTheme
   wrapper, max-width 1500) via stretch:navbar-container, so its own background IS
   the navy — no full-bleed band (which would break out of .tm-page). */
.uk-navbar-dropdown:has(.lt-mm) {
  background: #06013D !important;
  padding: 28px 40px 36px !important;
  box-shadow: 0 24px 40px rgba(6,1,61,.25);
  overflow: hidden !important;   /* contain everything inside the panel */
}
.lt-mm__top {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 28px; padding-bottom: 4px;
}
.lt-mm-viewall { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  color: #fff; text-decoration: none; }
.lt-mm-viewall:hover { color: #7BB7FF; }
.lt-mm__panels { margin: 0; }
.lt-mm__cols { display: flex; gap: 0; }
.lt-mm__cols > .lt-mm-col { flex: 1 1 0; min-width: 0; padding: 0 36px; }
.lt-mm__cols > .lt-mm-col:first-child { padding-left: 0; }
/* Vertical divider between columns (Figma). */
.lt-mm__cols > .lt-mm-col + .lt-mm-col { border-left: 1px solid rgba(255,255,255,.12); }
/* Series tab: series grouped by product category — rows with a category label
   (+ count) on the left and series chips flowing right; zebra rows for tracking. */
.lt-mm-series { margin: 0; }
.lt-mm-series-row { display: flex; align-items: flex-start; gap: 24px;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.lt-mm-series-row.is-alt { background: rgba(255,255,255,.028); }
.lt-mm-series-row:last-child { border-bottom: 0; }
.lt-mm-series-label { flex: 0 0 250px; max-width: 250px; }
.lt-mm-series-cat { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  line-height: 1.25; color: #fff; }
.lt-mm-series-count { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px;
  line-height: 1.2; color: #7BB7FF; opacity: .75; margin-top: 3px; }
.lt-mm-series-row.is-muted .lt-mm-series-cat { color: rgba(255,255,255,.5); }
.lt-mm-series-row.is-muted .lt-mm-series-count { opacity: .4; }
.lt-mm-series-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.lt-mm-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 6px;
  background: rgba(255,255,255,.10); font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 13px; line-height: 1; color: rgba(255,255,255,.92); white-space: nowrap;
  transition: background-color .15s ease, color .15s ease; }
.lt-mm-chip:hover { background: rgba(123,183,255,.22); color: #fff; }
.lt-mm-series-row.is-muted .lt-mm-chip { background: rgba(255,255,255,.05); color: rgba(255,255,255,.55); }

/* ---- Mobile off-canvas menu — navy, matching the Products menu design ---- */
#tm-dialog-mobile .uk-offcanvas-bar { background: #06013D !important; }
#tm-dialog-mobile .uk-offcanvas-close { color: #fff; }
/* Top-level nav items (Home, Products, Support, …) */
#tm-dialog-mobile .uk-nav > li > a { font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 18px; color: #fff; }
#tm-dialog-mobile .uk-nav > li > a:hover { color: #7BB7FF; }
/* Group headers (2nd level, e.g. Ecosystem / Type) */
#tm-dialog-mobile .uk-nav .uk-nav-header { font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 14px; color: #fff; text-transform: none; letter-spacing: 0; }
/* Sub-links (the term links) */
#tm-dialog-mobile .uk-nav-sub a { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
  color: rgba(255,255,255,.55); }
#tm-dialog-mobile .uk-nav-sub a:hover { color: #fff; }
/* Dividers + chevrons */
#tm-dialog-mobile .uk-nav.uk-nav-divider > li:nth-child(n+2) { border-top-color: rgba(255,255,255,.1); }
#tm-dialog-mobile .uk-nav-parent-icon > .uk-parent > a::after,
#tm-dialog-mobile [uk-nav-parent-icon] { color: #7BB7FF; }
/* Contact Us button (last item, menu-item class `lt-mm-cta`). */
#tm-dialog-mobile .uk-nav > li.lt-mm-cta { margin-top: 28px; border-top: 0 !important; }
#tm-dialog-mobile .uk-nav > li.lt-mm-cta > a {
  background: #fff !important; color: #06013D !important; border-radius: 4px;
  text-align: center; font-weight: 700 !important; font-size: 16px; padding: 16px !important;
  display: block;
}
#tm-dialog-mobile .uk-nav > li.lt-mm-cta > a:hover { background: #f0f0f5 !important; color: #06013D !important; }

/* Logo in the mobile off-canvas — match design (~28px tall, not 58px). */
#tm-dialog-mobile .uk-logo img { height: 28px; width: auto; }

/* Mobile Products: Category/Series switcher + collapsible group accordions (lyntec-mobile-menu.js). */
/* Move the drawer's horizontal gutter OFF the container and ONTO the rows/content, so the
   expanded Products panel AND the item dividers run full-bleed to the drawer edges (the Figma
   dividers are full-width). The off-canvas bar keeps only its vertical padding; UIkit's grid
   gutter (net-zero, but it offsets content 30px) is neutralised. The gutter is re-applied where
   it belongs — the menu rows, the logo, the CTA, and our panel content — at 20px (<640) / 30px
   (>=640); mobile nav only runs <960. No negative margins, so the panel is naturally full-bleed. */
#tm-dialog-mobile .uk-offcanvas-bar { padding-left: 0; padding-right: 0; }
#tm-dialog-mobile .uk-offcanvas-bar .uk-grid-stack { margin-left: 0; }
#tm-dialog-mobile .uk-offcanvas-bar .uk-grid-stack > .uk-first-column { padding-left: 0; }
#tm-dialog-mobile .uk-offcanvas-close { right: 20px; }
#tm-dialog-mobile .uk-logo,
#tm-dialog-mobile .uk-nav > li:not(.lt-mm-cta) > a,
#tm-dialog-mobile .uk-nav-sub:not([data-lt-mnav]) > li > a,
#tm-dialog-mobile .lt-mm-cta { padding-left: 20px; padding-right: 20px; }

/* Expanded-Products panel: lighter navy, now naturally full-bleed (its container is full-width).
   Content inset + vertical rhythm live on our own .lt-mnav, which UIkit never touches. */
#tm-dialog-mobile ul.uk-nav-sub[data-lt-mnav] { background: #0C0750; padding: 0; margin: 0; }
#tm-dialog-mobile .lt-mnav { padding: 8px 20px 14px; }

@media (min-width: 640px) {
  #tm-dialog-mobile .uk-offcanvas-close { right: 30px; }
  #tm-dialog-mobile .uk-logo,
  #tm-dialog-mobile .uk-nav > li:not(.lt-mm-cta) > a,
  #tm-dialog-mobile .uk-nav-sub:not([data-lt-mnav]) > li > a,
  #tm-dialog-mobile .lt-mm-cta,
  #tm-dialog-mobile .lt-mnav { padding-left: 30px; padding-right: 30px; }
}
#tm-dialog-mobile .lt-mnav-tabs { display:flex; gap:26px; margin:0 0 4px; padding:0; list-style:none; }
#tm-dialog-mobile .lt-mnav-tabs > li { padding:0; margin:0; }
#tm-dialog-mobile .lt-mnav-tabs > li > a { display:inline-block; font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  color:rgba(255,255,255,.35); padding-bottom:8px; border-bottom:2px solid transparent; text-transform:none; }
#tm-dialog-mobile .lt-mnav-tabs > li > a:hover { color:#fff; }
#tm-dialog-mobile .lt-mnav-tabs > li.lt-active > a { color:#fff; border-bottom-color:#7BB7FF; }
#tm-dialog-mobile .lt-mnav-panels { margin:0; padding:0; list-style:none; }
#tm-dialog-mobile .lt-mnav-panels > li { display:none; }
#tm-dialog-mobile .lt-mnav-panels > li.lt-active { display:block; }
#tm-dialog-mobile .lt-mnav-acc { margin:0; padding:0; list-style:none; }
#tm-dialog-mobile .lt-mnav-acc > li { margin:0; border-top:1px solid rgba(255,255,255,.10); }
#tm-dialog-mobile .lt-mnav-acc > li:first-child { border-top:0; }
#tm-dialog-mobile .lt-mnav-acc .uk-accordion-title { font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  color:#fff; padding:13px 0; margin:0; display:flex; justify-content:space-between; align-items:center; }
#tm-dialog-mobile .lt-mnav-acc .uk-accordion-title::before { display:none; }
#tm-dialog-mobile .lt-mnav-acc .uk-accordion-title::after { content:'+'; color:#7BB7FF; font-size:19px; font-weight:400; line-height:1; }
#tm-dialog-mobile .lt-mnav-acc > .uk-open > .uk-accordion-title::after { content:'\2212'; }
#tm-dialog-mobile .lt-mnav-acc .uk-accordion-content { margin:0; padding:0 0 8px; }
#tm-dialog-mobile .lt-mnav-links { list-style:none; margin:0; padding:0; }
#tm-dialog-mobile .lt-mnav-links li { margin:0; }
#tm-dialog-mobile .lt-mnav-links a { font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  color:rgba(255,255,255,.55); display:block; padding:7px 0; }
#tm-dialog-mobile .lt-mnav-links a:hover { color:#fff; }

/* Series tab: series grouped by product category — full-bleed zebra blocks (heading +
   blue count + chips). Blocks negative-margin out of .lt-mnav's 20/30px padding so the
   zebra reaches the drawer edges; their own padding re-insets the content to align.
   The bar clips horizontal overflow so the full-width blocks can't spill under a
   classic vertical scrollbar (which would show as white space inside the drawer). */
#tm-dialog-mobile .uk-offcanvas-bar { overflow-x: hidden; }
#tm-dialog-mobile .lt-mnav-series { margin: 0; }

/* When the off-canvas opens, UIkit's JS adds `uk-offcanvas-page` to <html> and locks page
   scroll while reserving the scrollbar gutter (scrollbar-gutter: stable). With the scrollbar
   gone that leaves an empty white strip down the right of the screen — force the gutter off
   while the drawer is open. */
html.uk-offcanvas-page { scrollbar-gutter: auto !important; }
#tm-dialog-mobile .lt-mnav-sblock { margin: 0 -20px; padding: 13px 20px; }
#tm-dialog-mobile .lt-mnav-sblock:nth-child(odd) { background: rgba(255,255,255,.03); }
#tm-dialog-mobile .lt-mnav-sblock__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 9px; }
#tm-dialog-mobile .lt-mnav-sblock__cat { font-family:'Inter',sans-serif; font-weight:700; font-size:14px; line-height:1.25; color:#fff; }
#tm-dialog-mobile .lt-mnav-sblock__count { flex:0 0 auto; font-family:'Inter',sans-serif; font-weight:400; font-size:12px; line-height:1.3; color:#7BB7FF; opacity:.75; white-space:nowrap; }
#tm-dialog-mobile .lt-mnav-sblock.is-muted .lt-mnav-sblock__cat { color:rgba(255,255,255,.5); }
#tm-dialog-mobile .lt-mnav-sblock.is-muted .lt-mnav-sblock__count { opacity:.4; }
#tm-dialog-mobile .lt-mnav-chips { display:flex; flex-wrap:wrap; gap:8px; }
#tm-dialog-mobile .lt-mnav-chip { display:inline-flex; align-items:center; padding:6px 12px; border-radius:6px;
  background:rgba(255,255,255,.10); font-family:'Inter',sans-serif; font-weight:600; font-size:13px; line-height:1;
  color:rgba(255,255,255,.92); white-space:nowrap; }
#tm-dialog-mobile .lt-mnav-chip:hover { background:rgba(123,183,255,.22); color:#fff; }
#tm-dialog-mobile .lt-mnav-sblock.is-muted .lt-mnav-chip { background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); }
@media (min-width:640px) {
  #tm-dialog-mobile .lt-mnav-sblock { margin-left:-30px; margin-right:-30px; padding-left:30px; padding-right:30px; }
}

/* View All Products → (bottom of the Products panel, per design). */
#tm-dialog-mobile .lt-mnav-viewall { display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:'Inter',sans-serif; font-weight:700; font-size:14px; color:#fff;
  padding:14px 0 2px; margin-top:4px; border-top:1px solid rgba(255,255,255,.10); }
#tm-dialog-mobile .lt-mnav-viewall:hover { color:#fff; }
#tm-dialog-mobile .lt-mnav-viewall .lt-mnav-arrow { color:#7BB7FF; font-size:16px; line-height:1; }
/* =====================================================================
   Blog post (single) template — v2 light design.
   Used by the YOOtheme "US Blog single post" template (1XNLYcmg).
   Tokens: navy #06013D · link #1F5D9F · body #424242 · stripe #F7F7F8
   ===================================================================== */

/* Category chip (hero) — self-hugging centered pill (bound to category_label) */
.lt-chip { display:block; width:fit-content; max-width:100%; font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:#7BB7FF !important; background:rgba(31,93,159,.10);
  border-radius:100px; padding:7px 14px; line-height:1; }
.lt-chip a { color:#1F5D9F !important; text-decoration:none; }

/* Deck / standfirst */
.lt-deck { font-family:'Inter',sans-serif; font-size:20px; line-height:1.5; color:#424242 !important; }

/* Byline */
.lt-byline { display:inline-flex; align-items:center; gap:12px; font-family:'Inter',sans-serif; font-size:15px; }
.lt-byline__avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.lt-byline__meta { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; }
.lt-byline__author { color:#fff; font-weight:600; }
.lt-byline__date, .lt-byline__read { color:#767680; }
.lt-byline__sep { color:#b8b8c2; }

/* Featured image band */
.lt-featured img, .lt-featured .el-image { border-radius:14px; }

/* Article body typography (rendered post_content) */
.lt-article { font-family:'Inter',sans-serif; font-size:17px; line-height:1.7; color:#424242; }
.lt-article h2 { font-family:'Bitter',serif; font-weight:700; font-size:30px; line-height:1.25; color:#06013D; margin:1.6em 0 .5em; scroll-margin-top:120px; }
.lt-article h3 { font-family:'Bitter',serif; font-weight:700; font-size:22px; color:#06013D; margin:1.4em 0 .4em; }
.lt-article p { margin:0 0 1.2em; }
.lt-article a { color:#1F5D9F; }
.lt-article ul, .lt-article ol { margin:0 0 1.2em 1.1em; }
.lt-article li { margin:.4em 0; }
.lt-article img { border-radius:10px; }
.lt-article blockquote { border-left:4px solid #1F5D9F; margin:1.4em 0; padding:.2em 0 .2em 24px;
  font-family:'Bitter',serif; font-style:italic; font-size:24px; line-height:1.45; color:#06013D; }

/* Sidebar cards */
.lt-scard { background:#fff; border:1px solid #E4E4E8; border-radius:12px; padding:22px 24px 24px; }
.lt-scard + .lt-scard { margin-top:24px; }
.lt-scard__label { font-family:'Inter',sans-serif; font-weight:600; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#767680; margin:0 0 14px; }
/* On This Page */
.lt-toc ul { list-style:none; margin:0; padding:0; }
.lt-toc li { margin:0 0 10px; }
.lt-toc__link { font-family:'Inter',sans-serif; font-size:15px; line-height:1.4; color:#1F5D9F; text-decoration:none; display:block; }
.lt-toc__link.is-active { color:#06013D; font-weight:600; }
/* Newsletter (navy variant inside sidebar) */
.lt-scard--navy { background:#06013D; border-color:#06013D; }
.lt-scard--navy .lt-scard__label { color:rgba(255,255,255,.6); }
.lt-scard--navy h2, .lt-scard--navy h3, .lt-scard--navy .uk-heading-small { color:#fff; }
.lt-scard--navy p { color:rgba(255,255,255,.78); }

/* About LynTec end-of-article trust card */
.lt-about { background:#06013D; border-radius:14px; padding:36px 40px; color:#fff; }
.lt-about .lt-eyebrow { color:rgba(255,255,255,.55); }
.lt-about h2, .lt-about h3 { color:#fff !important; font-family:'Bitter',serif; }
.lt-about p { color:rgba(255,255,255,.8); }

/* About card buttons */
.lt-about__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.lt-about .lt-eyebrow { font-family:'Inter',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 12px; }
.lt-about h3 { font-size:25px; line-height:1.25; margin:0 0 10px; }
.lt-about p { font-size:15px; line-height:1.6; margin:0; }
/* About card reuses the global .lt-btn-primary / .lt-btn-ghost (white + ghost on navy). */

/* Share buttons (sidebar) */
.lt-share { display:flex; gap:10px; }
.lt-share__btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background:#EDEDF2; color:#06013D !important; transition:.15s; }
.lt-share__btn:hover { background:#1F5D9F; color:#fff !important; }

/* Newsletter — Gravity Form #1 in the navy sidebar card.
   Overrides the GF "Orbital" theme (GF 2.7+), which injects high-specificity
   id-scoped styles + CSS vars — so we beat it with `!important` AND re-point
   its own `--gf-color-*` variables to the LynTec palette. */
.lt-scard--navy h3 { font-family:'Bitter',serif; font-weight:700; font-size:19px; line-height:1.3; margin:0 0 6px; color:#fff; }
.lt-scard--navy p  { font-size:13px; line-height:1.5; margin:0 0 14px; }
.lt-scard--navy .gform-theme {
  --gf-color-primary:#1F5D9F; --gf-color-primary-rgb:31,93,159;
  --gf-color-primary-contrast:#ffffff; --gf-color-primary-darker:#184c84;
  --gf-color-out-ctrl-light:rgba(255,255,255,.25);
}
.lt-scard--navy .gform_wrapper { margin:0 !important; }
.lt-scard--navy .gform_wrapper .gfield_label,
.lt-scard--navy .gform_wrapper .gform_required_legend { display:none !important; }
/* single-column stacked layout in the narrow sidebar */
/* Orbital renders the submit as a .gfield--type-submit INSIDE .gform_fields
   (sibling of the email field) — so the input↔button gap lives here. */
.lt-scard--navy .gform_wrapper .gform_fields {
  display:flex !important; flex-direction:column !important; gap:10px !important; }
.lt-scard--navy .gform_wrapper .gfield { width:100% !important; max-width:100% !important; padding:0 !important; margin:0 !important; }
.lt-scard--navy .gform_wrapper .ginput_container { margin:0 !important; }
/* email input */
.lt-scard--navy .gform_wrapper input[type=email],
.lt-scard--navy .gform_wrapper input[type=text] {
  width:100% !important; box-sizing:border-box !important;
  height:46px !important; line-height:normal !important;
  background:#fff !important; border:0 !important; box-shadow:none !important;
  border-radius:6px !important; padding:0 14px !important;
  font-family:'Inter',sans-serif !important; font-size:14px !important; color:#06013D !important; }
.lt-scard--navy .gform_wrapper input[type=email]:focus,
.lt-scard--navy .gform_wrapper input[type=text]:focus {
  outline:none !important; box-shadow:0 0 0 2px rgba(255,255,255,.5) !important; }
.lt-scard--navy .gform_wrapper input::placeholder { color:#9a9aa6 !important; opacity:1; }
/* submit button — Orbital renders dash-class names (gform-footer / gform-button),
   not the legacy underscore ones; target both. Match input height + radius. */
.lt-scard--navy .gform_wrapper .gform_footer,
.lt-scard--navy .gform_wrapper .gform-footer { display:block !important; width:100% !important; margin:0 !important; padding:0 !important; }
.lt-scard--navy .gform_wrapper input[type=submit],
.lt-scard--navy .gform_wrapper button[type=submit],
.lt-scard--navy .gform_wrapper .gform-button,
.lt-scard--navy .gform_wrapper .gform_button {
  width:100% !important; display:block !important; height:46px !important; border:0 !important;
  border-radius:6px !important; padding:0 16px !important;
  background:#1F5D9F !important; color:#fff !important;
  font-family:'Inter',sans-serif !important; font-weight:600 !important; font-size:14px !important;
  line-height:1 !important; cursor:pointer; transition:background .15s ease; }
.lt-scard--navy .gform_wrapper input[type=submit]:hover,
.lt-scard--navy .gform_wrapper button[type=submit]:hover,
.lt-scard--navy .gform_wrapper .gform-button:hover,
.lt-scard--navy .gform_wrapper .gform_button:hover { background:#2b6fb8 !important; }
/* validation / confirmation */
.lt-scard--navy .gform_wrapper .gform_validation_errors,
.lt-scard--navy .gform_wrapper .validation_message { font-size:12px; }
.lt-scard--navy .gform_confirmation_message { color:#fff !important; font-size:14px; }

/* Newsletter card (.lt-news) Gravity Form — styled HERE (head-loaded) rather than
   only in the element's inline <style> (which renders AFTER the form, so the form
   painted tall/stacked then snapped compact → high CLS in the hero). Loading from
   <head> means the form is laid out (one row, labels hidden) from first paint, and
   `.lt-news__form` min-height reserves the space so nothing below shifts. */
.lt-news__form { min-height: 46px; }
.lt-news .gform_wrapper { margin: 0 !important; }
.lt-news .gform_wrapper .gfield_label,
.lt-news .gform_wrapper .gform_required_legend { display: none !important; }
.lt-news .gform_wrapper form { margin: 0 !important; }
.lt-news .gform_wrapper .gform_fields { display: flex !important; flex-direction: row !important; gap: 10px !important; grid-template-columns: none !important; }
.lt-news .gform_wrapper .gfield { padding: 0 !important; margin: 0 !important; flex: 1 1 auto; min-width: 0; }
.lt-news .gform_wrapper .gfield--type-submit { flex: 0 0 auto; }
.lt-news .gform_wrapper .ginput_container { margin: 0 !important; }
.lt-news .gform_wrapper input[type=email],
.lt-news .gform_wrapper input[type=text] { height: 44px !important; box-sizing: border-box !important; width: 100% !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 4px !important; background: #fff !important; color: #424242 !important; padding: 0 14px !important; font: 400 14px Inter, sans-serif !important; box-shadow: none !important; }
.lt-news .gform_wrapper .gform_footer,
.lt-news .gform_wrapper .gform-footer { display: block !important; margin: 0 !important; padding: 0 !important; }
.lt-news .gform_wrapper input[type=submit],
.lt-news .gform_wrapper button[type=submit],
.lt-news .gform_wrapper .gform-button { height: 44px !important; padding: 0 22px !important; border: 0 !important; border-radius: 4px !important; background: #1F5D9F !important; color: #fff !important; font: 600 14px Inter, sans-serif !important; line-height: 1 !important; cursor: pointer; white-space: nowrap; }
.lt-news .gform_wrapper input[type=submit]:hover,
.lt-news .gform_wrapper button[type=submit]:hover,
.lt-news .gform_wrapper .gform-button:hover { background: #1a5089 !important; }
.lt-news .gform_confirmation_message { color: #fff !important; font-size: 14px; }
@media (max-width: 639px) {
  .lt-news .gform_wrapper .gform_fields { flex-direction: column !important; }
  .lt-news .gform_wrapper input[type=submit],
  .lt-news .gform_wrapper .gform-button { width: 100% !important; }
  .lt-news__form { min-height: 98px; }
}

/* ---------------------------------------------------------------------
   Gravity Forms — GLOBAL LynTec styling (contact form, subscribe, and any
   embedded form that is NOT inside a signup card). Single-class `.gform_wrapper`
   selectors, so the card contexts (`.lt-news` / `.lt-scard--navy`, two-class)
   keep their own compact styling and win by specificity. !important beats GF's
   Orbital theme defaults.
   --------------------------------------------------------------------- */
.gform_wrapper .gform_required_legend { display: none; }
.gform_wrapper .gform_heading { display: none; }
.gform_wrapper .gfield_label { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; color: #06013D !important; margin: 0 0 6px !important; }
.gform_wrapper .gfield_required { color: #C0392B !important; font-weight: 600; font-size: 12px; margin-left: 4px; }
.gform_wrapper .ginput_container { margin-top: 0 !important; }
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100% !important; box-sizing: border-box !important; min-height: 50px !important;
  border: 1px solid #D5D5E0 !important; border-radius: 6px !important; background: #fff !important;
  padding: 0 14px !important; font-family: 'Inter', sans-serif !important; font-size: 15px !important;
  color: #06013D !important; box-shadow: none !important; line-height: normal !important; }
.gform_wrapper textarea { min-height: 140px !important; padding: 12px 14px !important; line-height: 1.5 !important; }
.gform_wrapper input[type=text]:focus,
.gform_wrapper input[type=email]:focus,
.gform_wrapper input[type=tel]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus { outline: none !important; border-color: #1F5D9F !important; box-shadow: 0 0 0 2px rgba(31,93,159,.15) !important; }
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: #9A9AA6 !important; opacity: 1; }
/* submit button — match .lt-btn--navy (navy fill, white text, Inter Bold 16px). */
.gform_wrapper input[type=submit],
.gform_wrapper button[type=submit],
.gform_wrapper .gform-button {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 52px !important; padding: 0 28px !important; border: 0 !important; border-radius: 4px !important;
  background: #06013D !important; color: #fff !important; font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important; font-size: 16px !important; line-height: 1.2 !important; text-transform: none !important;
  letter-spacing: 0 !important; cursor: pointer; transition: background .15s ease; width: auto !important; }
.gform_wrapper input[type=submit]:hover,
.gform_wrapper button[type=submit]:hover,
.gform_wrapper .gform-button:hover { background: #1F5D9F !important; color: #fff !important; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message { font-size: 13px !important; color: #C0392B !important; background: none !important; border: 0 !important; padding: 4px 0 0 !important; }
.gform_wrapper .gform_validation_errors { border-radius: 6px !important; }

/* Article lead-in: emphasise only the FIRST SENTENCE, not the whole first
   paragraph. js/lyntec-blog-post.js wraps it in .lt-lead-sentence. Fixed
   line-height keeps leading even where the larger sentence meets body text. */
.lt-lead-sentence { font-size:20px; line-height:29px; color:#06013D; font-weight:500; }

/* Hero byline (bound to chauvet_blog_post_meta.byline) */
.lt-byline-wrap { font-family:'Inter',sans-serif; font-size:15px; color:#767680; }

/* Related Articles sidebar list (chauvet_related_articles → .lt-artlist grid).
   Bordered card matching .lt-scard; label via ::before; compact stacked rows.
   Host-level styling lives here (NOT the grid's css prop, which YT auto-scopes
   under the host id and so can't target the host class itself). */
.lt-artlist { background:#fff; border:1px solid #E4E4E8; border-radius:12px; padding:4px 24px 16px; }
.lt-artlist::before { content:"Related articles"; display:block; font-family:'Inter',sans-serif;
  font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#767680; padding:18px 0 2px; }
.lt-artlist .el-item { padding:14px 0; border-top:1px solid #ECECF1; }
.lt-artlist .el-title { font-family:'Bitter',serif !important; font-weight:700 !important; font-size:14px !important;
  line-height:1.3 !important; color:#06013D !important; margin:0 !important; }
.lt-artlist .el-meta { font-size:12px !important; color:#767680 !important; margin:4px 0 0 !important; }
.lt-artlist a:hover .el-title, .lt-artlist .el-item:hover .el-title { color:#1F5D9F !important; }

/* Related Articles card hover (section grid lifts; sidebar row shifts color) */
.lt-artgrid .el-item, .lt-artgrid .uk-card { transition:box-shadow .15s ease, transform .15s ease; }
.lt-artgrid .el-item:hover a, .lt-artgrid .uk-card:hover a {
  box-shadow:0 10px 26px rgba(6,1,61,.13) !important; transform:translateY(-3px); }
.lt-artgrid .el-item:hover .el-title { color:#1F5D9F !important; }
.lt-artlist .el-item .el-title { transition:color .15s ease; }
.lt-artlist .el-item:hover .el-title, .lt-artlist a:hover .el-title { color:#1F5D9F !important; }

/* Inline editorial images (figures) within article bodies (.lt-article).
   Migrated from production with their original captions via lyntec_content_images.py. */
.lt-article .lt-content-figure, .lt-article figure { margin:28px 0; }
.lt-article .lt-content-figure img, .lt-article figure img { width:100%; height:auto; border-radius:10px; display:block; }
.lt-article figcaption { margin-top:10px; font-family:'Inter',sans-serif; font-size:13px; line-height:1.5;
  color:#767680; text-align:center; font-style:italic; }

/* ---------- Home: Major Installs marquee (Trusted by 13,000+) ----------
   Infinite single-line scroll. Two identical rows sit in a flex track; the
   track animates translateX(0 → -50%), so each loop advances exactly one row
   width and seams perfectly. The trailing gap lives as padding-right on each
   row so the row→row spacing equals the in-row gap. Always one line (nowrap),
   so it never stacks on mobile. Pauses on hover; reduced-motion falls back to
   a static centered wrap. */
.lt-marquee {
    --lt-marquee-gap: 48px;
    --lt-marquee-duration: 36s;
    overflow: hidden;
    width: 100%;
    /* soft fade at both edges so names ease in/out instead of hard-clipping */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lt-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: lt-marquee-scroll var(--lt-marquee-duration) linear infinite;
    will-change: transform;
}
.lt-marquee:hover .lt-marquee__track { animation-play-state: paused; }
.lt-marquee__row {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--lt-marquee-gap);
    padding-right: var(--lt-marquee-gap);
}
.lt-marquee__name {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
}
@keyframes lt-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 639px) {
    .lt-marquee { --lt-marquee-gap: 30px; --lt-marquee-duration: 22s; }
    .lt-marquee__name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .lt-marquee { -webkit-mask-image: none; mask-image: none; }
    .lt-marquee__track {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .lt-marquee__row {
        flex-wrap: wrap;
        justify-content: center;
        padding-right: 0;
    }
    .lt-marquee__row[aria-hidden="true"] { display: none; }
}

/* Eyebrow on dark/navy surfaces (e.g. installs marquee) — light, not link-blue. */
.lt-eyebrow-light {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #B8C2DE !important;
    line-height: 1;
}

/* ---------- Home: Juice Goose "Same products. New home." band ---------- */
.lt-jg {
    display: flex;
    flex-wrap: nowrap;
    background: #06013D;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    max-width: 1100px;
    margin: 0 auto;
}
.lt-jg__brand {
    flex: 0 0 360px;
    min-width: 240px;
    background: linear-gradient(135deg, #0A0552 0%, #06013D 70%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    position: relative;
}
.lt-jg__monogram {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 120px;
    line-height: .9;
    letter-spacing: -2px;
    color: #fff;
}
.lt-jg__wordmark {
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 5px;
    color: #B8C2DE;
}
.lt-jg__content {
    flex: 1 1 50%;
    min-width: 300px;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
}
.lt-jg__badge {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #7BB7FF;
    border: 1px solid rgba(123,183,255,.4);
    border-radius: 999px;
    padding: 5px 12px;
}
.lt-jg__title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    color: #fff;
    margin: 0;
}
.lt-jg__body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #B8C2DE;
    margin: 0;
    max-width: 460px;
}
.lt-jg__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.lt-jg__btn {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 13px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lt-jg__btn--solid { background: #fff; color: #06013D; }
.lt-jg__btn--solid:hover { background: #E6ECF7; color: #06013D; }
.lt-jg__btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.lt-jg__btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
@media (max-width: 767px) {
    .lt-jg { flex-wrap: wrap; }
    .lt-jg__brand { flex: 1 1 100%; padding: 32px; }
    .lt-jg__monogram { font-size: 84px; }
    .lt-jg__content { padding: 32px; }
    .lt-jg__title { font-size: 28px; }
}

/* ---------- Home: Where We Work — market stats ---------- */
.lt-stat-total {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1;
    color: #06013D;
    margin: 4px 0 0;
}
.lt-stat-caption {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #424242;
}
.lt-stats { list-style: none; margin: 0; padding: 0; }
.lt-stats__row { border-bottom: 1px solid #E2E2E6; }
.lt-stats__row:first-child { border-top: 1px solid #E2E2E6; }
.lt-stats__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 4px;
    text-decoration: none;
    transition: padding-left .15s ease;
}
.lt-stats__link:hover { padding-left: 10px; }
.lt-stats__label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #06013D;
}
.lt-stats__value {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1F5D9F;
    white-space: nowrap;
}
.lt-stats__link:hover .lt-stats__value { color: #06013D; }

/* ---------- Home: Request a Quote band (Free Project Consultation) ---------- */
.lt-rfq {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: #06013D;
    border-radius: 14px;
    padding: 40px 48px;
    color: #fff;
}
.lt-rfq__main { flex: 1 1 540px; }
.lt-rfq__eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #7BB7FF; margin-bottom: 10px;
}
.lt-rfq__title {
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.2;
    color: #fff; margin: 0 0 16px;
}
.lt-rfq__checks { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 0; padding: 0; }
.lt-rfq__checks li {
    font-family: 'Inter', sans-serif; font-size: 14px; color: #B8C2DE;
    display: flex; align-items: center; gap: 8px;
}
.lt-rfq__checks li::before { content: "✓"; color: #7BB7FF; font-weight: 800; }
.lt-rfq__aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lt-rfq__btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #06013D;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    padding: 14px 26px; border-radius: 6px; text-decoration: none;
    transition: background .15s ease;
}
.lt-rfq__btn:hover { background: #E6ECF7; color: #06013D; }
.lt-rfq__note { font-family: 'Inter', sans-serif; font-size: 12px; color: #8A93B5; }
@media (max-width: 767px) { .lt-rfq { padding: 32px; } .lt-rfq__title { font-size: 23px; } }

/* ---------- Home: About Strip (light, image + text) ---------- */
.lt-about-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.lt-about-strip__media {
    flex: 1 1 380px;
    min-height: 300px;
    border-radius: 14px;
    background: linear-gradient(135deg, #06013D 0%, #1F5D9F 120%);
    background-size: cover; background-position: center;
}
.lt-about-strip__body { flex: 1 1 420px; }
.lt-about-strip__title {
    font-family: 'Bitter', serif; font-weight: 700; font-size: 34px; line-height: 1.2;
    color: #06013D; margin: 0 0 18px;
}
.lt-about-strip__text { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7; color: #424242; margin: 0 0 24px; }
.lt-about-strip__btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #06013D; color: #fff;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    padding: 14px 26px; border-radius: 6px; text-decoration: none;
    transition: background .15s ease;
}
.lt-about-strip__btn:hover { background: #120a63; color: #fff; }

/* ---------- Home: House of Brands ---------- */
.lt-brands__tabs {
    display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 28px; padding: 0;
}
.lt-brands__tabs > li > a {
    display: inline-block;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    color: #B8C2DE; text-decoration: none;
    padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lt-brands__tabs > li > a:hover { color: #fff; border-color: rgba(255,255,255,.6); }
.lt-brands__tabs > li.uk-active > a { background: #fff; color: #06013D; border-color: #fff; }
.lt-brand-card {
    display: flex; flex-direction: column; height: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px; padding: 26px 24px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.lt-brand-card:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); transform: translateY(-3px); }
.lt-brand-card__name { font-family: 'Inter', sans-serif; font-size: 19px; font-weight: 700; color: #fff; }
.lt-brand-card__cat {
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: #7BB7FF; margin: 6px 0 14px;
}
.lt-brand-card__desc { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6; color: #B8C2DE; flex: 1 1 auto; }
.lt-brand-card__more { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; color: #fff; margin-top: 18px; }
/* All brand cards on one line — horizontal scroll strip with scroll-snap + a
   styled thin scrollbar (sits on the dark navy brands section).
   overflow-y is set EXPLICITLY: a lone `overflow-x: auto` would force overflow-y
   to `auto` and clip the cards' bottoms. Equal-height cards come from flex stretch
   (li is a flex box, card fills it) — NOT height:100%, which mis-measures inside a
   scroll container. */
.lt-brands__grid {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 24px;
    list-style: none; margin: 0; padding: 8px 2px 22px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) rgba(255,255,255,.10);
}
.lt-brands__grid > li {
    flex: 0 0 auto; width: 320px; max-width: 82vw;
    display: flex; scroll-snap-align: start;
}
.lt-brands__grid > li > .lt-brand-card { width: 100%; height: auto; }
.lt-brands__grid::-webkit-scrollbar { height: 8px; }
.lt-brands__grid::-webkit-scrollbar-track { background: rgba(255,255,255,.10); border-radius: 999px; }
.lt-brands__grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.38); border-radius: 999px; }
.lt-brands__grid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.6); }
@media (max-width: 639px) { .lt-brands__grid > li { width: 300px; } }

/* ---------- Home: Brand Promise proof badges (non-interactive) ---------- */
.lt-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.lt-badge {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #06013D;
    border: 1px solid #D7D9E0; border-radius: 999px; padding: 9px 18px;
}
.lt-badge::before {
    content: ""; flex: 0 0 auto;
    width: 13px; height: 13px; border-radius: 50%;
    border: 3px solid #1F5D9F; background: #06013D; box-sizing: border-box;
}

/* ====================================================================
   Home: Power Ecosystem grid (ecosystem_grid element)
   ==================================================================== */
.lt-eco-head { margin-bottom: 48px; }
.lt-eco-head__title { font-family: 'Bitter', serif; font-weight: 700; font-size: 38px; line-height: 1.15; color: #06013D; margin: 6px 0 10px; }
.lt-eco-head__sub { font-family: 'Inter', sans-serif; font-size: 16px; color: #424242; margin: 0; }

.lt-eco { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.lt-eco__main { flex: 1 1 540px; min-width: 300px; }
.lt-eco__nav { flex: 0 0 350px; }
@media (max-width: 959px) {
    .lt-eco { flex-direction: column-reverse; gap: 28px; }
    .lt-eco__nav, .lt-eco__main { flex: 1 1 100%; width: 100%; }
}

/* --- Menu (right) --- */
.lt-eco-menu { list-style: none; margin: 0; padding: 0; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; }
.lt-eco-menu > li + li { border-top: 1px solid #E5E7EB; }
.lt-eco-menu > li > a {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; text-decoration: none;
    font-family: 'Inter', sans-serif; transition: background .15s ease, color .15s ease;
}
.lt-eco-menu__num { font-size: 13px; font-weight: 600; color: #9AA0AE; min-width: 20px; }
.lt-eco-menu__label { font-size: 15px; font-weight: 700; color: #06013D; flex: 1 1 auto; }
.lt-eco-menu__arrow { font-size: 20px; color: #9AA0AE; }
.lt-eco-menu > li > a:hover { background: #F7F7F8; }
.lt-eco-menu > li.uk-active > a { background: #06013D; }
.lt-eco-menu > li.uk-active .lt-eco-menu__num,
.lt-eco-menu > li.uk-active .lt-eco-menu__label,
.lt-eco-menu > li.uk-active .lt-eco-menu__arrow { color: #fff; }
.lt-eco-menu > li.uk-active .lt-eco-menu__arrow { transform: rotate(0); }

/* --- Card (left) --- */
.lt-eco-card { padding: 4px 0; }
.lt-eco-card__title { font-family: 'Bitter', serif; font-weight: 700; font-size: 30px; line-height: 1.2; color: #06013D; margin: 0 0 14px; }
.lt-eco-card__desc { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7; color: #424242; margin: 0 0 22px; max-width: 560px; }
.lt-eco-card__eyebrow { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: #1F5D9F; margin-bottom: 12px; }
.lt-eco-feats { list-style: none; margin: 0 0 24px; padding: 0; }
.lt-eco-feats > li { border-left: 3px solid #1F5D9F; padding: 4px 0 4px 16px; margin-bottom: 16px; }
.lt-eco-feats__t { display: block; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: #06013D; }
.lt-eco-feats__s { display: block; font-family: 'Inter', sans-serif; font-size: 14px; color: #767680; margin-top: 2px; }

.lt-eco-series { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.lt-eco-series__label { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #9AA0AE; margin-right: 4px; }
.lt-eco-series__pill {
    display: inline-flex; align-items: center;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #06013D;
    border: 1px solid #D7D9E0; border-radius: 6px; padding: 6px 12px; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lt-eco-series__pill:hover { background: #06013D; border-color: #06013D; color: #fff; }

.lt-eco-card__btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #06013D; color: #fff;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
    padding: 13px 24px; border-radius: 6px; text-decoration: none;
    transition: background .15s ease;
}
.lt-eco-card__btn:hover { background: #120a63; color: #fff; }

/* ====================================================================
   Search results — navy hero + LIGHT results, right-hand filter card
   (matches /videos/). The search BAR + suggestions live in the navy hero
   (keep dark vars); the RESULTS element sits on a white section (light vars).
   ==================================================================== */
/* Search bar + suggestions = navy hero */
.cpro-live-search-bar.cpro-live-search-bar,
.cpro-live-search-suggestions.cpro-live-search-suggestions {
    --cpro-search-bg: rgba(255, 255, 255, 0.05);
    --cpro-search-border: rgba(255, 255, 255, 0.16);
    --cpro-search-border-hover: rgba(255, 255, 255, 0.42);
    --cpro-search-border-strong: rgba(255, 255, 255, 0.28);
    --cpro-search-text: #ffffff;
    --cpro-search-muted: #B8C2DE;
    --cpro-search-chip-bg: rgba(255, 255, 255, 0.05);
    --cpro-search-chip-border: rgba(255, 255, 255, 0.18);
    --cpro-search-chip-hover: rgba(255, 255, 255, 0.12);
    --cpro-search-panel: #0A0540;
    --cpro-search-panel-strong: #0E0A49;
}
/* Results element = light theme on white */
.cpro-live-search-results.cpro-live-search-results {
    --cpro-search-bg: #ffffff;
    --cpro-search-border: #E5E7EB;
    --cpro-search-border-hover: #C9CDD6;
    --cpro-search-border-strong: #D7D9E0;
    --cpro-search-text: #424242;
    --cpro-search-muted: #767680;
    --cpro-search-chip-bg: #F2F2F2;
    --cpro-search-chip-border: #E6E6EA;
    --cpro-search-chip-hover: #ECECEF;
    --cpro-search-panel: #F7F7F8;
    --cpro-search-panel-strong: #F2F2F2;
    --cpro-search-scrollbar-track: #ECECEF;
    --cpro-search-scrollbar-thumb: #C9CDD6;
    --cpro-search-scrollbar-thumb-hover: #B0B4BE;
}
/* result rows — light theme */
.cpro-search-results .cpro-search-results__summary { color: #424242; }
.cpro-live-search-results .cpro-live-search-card { border-color: #E5E7EB !important; }
.cpro-live-search-results .cpro-live-search-card__title,
.cpro-live-search-results .cpro-live-search-card__title-link,
.cpro-live-search-results .cpro-live-search-card__link { color: #06013D; }
.cpro-live-search-results .cpro-live-search-card__title-link:hover,
.cpro-live-search-results .cpro-live-search-card__title-link:focus,
.cpro-live-search-results .cpro-live-search-card__download-link { color: #1F5D9F; }
.cpro-live-search-results .cpro-live-search-card__badge,
.cpro-live-search-results .cpro-live-search-card__type {
    background: #06013D !important; color: #fff !important;
}
.cpro-live-search-results .cpro-live-search-card__meta,
.cpro-live-search-results .cpro-live-search-card__date,
.cpro-live-search-results .cpro-live-search-card__excerpt { color: #767680 !important; }

/* ---- layout: results LEFT, filter card RIGHT (like /videos/) ---- */
body.search .cpro-live-search-scope { display: none !important; }
body.search .cpro-live-search-bar__inner,
body.search .cpro-live-search-form { width: 100%; }

.cpro-search-results__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 44px;
    align-items: start;
    margin-top: 4px;
}
.cpro-search-results__main { min-width: 0; }
.cpro-search-results__sidebar { position: sticky; top: 110px; }

/* right-hand filter card */
.cpro-search-results__facetcard {
    background: #F2F2F2;
    border: 1px solid #E6E6EA;
    border-radius: 8px;
    padding: 22px 24px;
}
.cpro-search-results .cpro-search-results__filters {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 2px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.cpro-search-results .cpro-search-results__filters { align-items: stretch !important; }
.cpro-search-results .cpro-search-results__filters-label {
    display: block; width: 100%; align-self: stretch;
    font-family: 'Inter', sans-serif;
    font-size: 16px; font-weight: 700; color: #06013D !important;
    text-align: left; padding-left: 10px;
    margin: 0 0 10px;
}
/* search-anything input at the top of the filter card */
.cpro-search-results__searchform { position: relative; margin: 0 0 16px; }
.cpro-search-results__searchinput {
    width: 100%; box-sizing: border-box;
    height: 42px; padding: 0 40px 0 14px;
    background: #fff; border: 1px solid #CCCCCC; border-radius: 4px;
    font-family: 'Inter', sans-serif; font-size: 13px; color: #06013D;
    -webkit-appearance: none; appearance: none;
}
.cpro-search-results__searchinput::placeholder { color: #767680; opacity: 1; }
.cpro-search-results__searchinput:focus { outline: none; border-color: #1F5D9F; }
.cpro-search-results__searchinput::-webkit-search-cancel-button { -webkit-appearance: none; }
.cpro-search-results__searchbtn {
    position: absolute; top: 0; right: 0; height: 42px; width: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; color: #666;
}
.cpro-search-results__searchbtn:hover { color: #1F5D9F; }
.cpro-search-results__facetdivider { border: 0; border-top: 1px solid #E0E0EB; margin: 0 0 14px; }
/* tidy the fallback/placeholder thumbnail so it doesn't dominate the row */
.cpro-live-search-results .cpro-live-search-card__media,
.cpro-live-search-results .cpro-live-search-card__image {
    width: 200px !important; max-width: 200px !important;
    height: 120px !important; flex: 0 0 200px !important;
    object-fit: cover; border-radius: 6px; overflow: hidden;
}
.cpro-search-results .cpro-search-results__filter {
    display: flex !important; align-items: center; gap: 10px;
    width: 100%; margin: 0; padding: 8px 10px;
    border: 0 !important; background: transparent !important; border-radius: 6px;
    color: #06013D; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.3;
    cursor: pointer; transition: background .15s ease;
}
.cpro-search-results .cpro-search-results__filter:hover { background: rgba(6,1,61,0.05) !important; }
.cpro-search-results__filter input { accent-color: #1F5D9F; width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.cpro-search-results__filter:has(input:checked) { background: rgba(31,93,159,0.10) !important; }
.cpro-search-results__filter:has(input:checked) span { font-weight: 700; }
.cpro-search-results__filters-clear {
    margin: 16px 0 0; align-self: flex-start;
    background: transparent !important; border: 0 !important; padding: 4px 10px;
    color: #1F5D9F !important; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
}

@media (max-width: 959px) {
    .cpro-search-results__layout { grid-template-columns: 1fr; gap: 22px; }
    .cpro-search-results__sidebar { position: static; order: -1; }  /* filters above results on mobile */
}

/* Search results — pagination (light theme, navy pills) */
.cpro-search-results__pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.cpro-search-results__pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 14px; box-sizing: border-box;
    border: 1px solid #E5E7EB !important; border-radius: 6px;
    background: #fff !important; color: #06013D !important;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cpro-search-results__pagination a.page-numbers:hover,
.cpro-search-results__pagination a.page-numbers:focus {
    border-color: #06013D !important; background: #06013D !important; color: #fff !important;
}
.cpro-search-results__pagination .page-numbers.current {
    background: #06013D !important; border-color: #06013D !important; color: #fff !important;
}
.cpro-search-results__pagination .page-numbers.dots {
    border-color: transparent !important; background: transparent !important; color: #767680 !important;
}

/* ====================================================================
   Live search MODAL — navy compact list (Figma "Search Modal 2")
   Scoped to the header search modal so it doesn't touch the results page.
   ==================================================================== */
.uk-modal[id^="search-container"] .uk-modal-dialog {
    background: #06013D !important;
    border-radius: 12px;
}
.uk-modal[id^="search-container"] .uk-modal-close-default { color: #fff; }
/* hide the redundant "Search" heading + subtitle inside the modal */
.uk-modal[id^="search-container"] h1,
.uk-modal[id^="search-container"] .uk-panel.uk-margin { display: none !important; }

/* navy theme for the live results inside the modal */
.uk-modal[id^="search-container"] .cpro-live-search-results {
    --cpro-search-text: #ffffff;
    --cpro-search-muted: #B8C2DE;
    --cpro-search-border: rgba(255,255,255,0.12);
    --cpro-search-bg: transparent;
}
/* compact vertical list instead of the horizontal 350px card grid */
.uk-modal[id^="search-container"] .cpro-live-search-results__grid {
    display: flex !important; 
    flex-direction: column !important; 
    gap: 2px !important;
    grid-template-columns: none !important; 
    grid-auto-columns: unset !important;
    overflow: visible !important; 
    padding: 0 !important;
    width: 100%;
}
.uk-modal[id^="search-container"] .cpro-live-search-card {
    width: 100% !important; max-width: 100% !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 8px;
}
.uk-modal[id^="search-container"] .cpro-live-search-card__link {
    display: flex !important; align-items: center; gap: 14px; padding: 9px 10px !important; border: 0 !important;
    transition: background .15s ease;
}
.uk-modal[id^="search-container"] .cpro-live-search-card__link:hover { background: rgba(255,255,255,0.07) !important; }
.uk-modal[id^="search-container"] .cpro-live-search-card__media,
.uk-modal[id^="search-container"] .cpro-live-search-card__image {
    width: 44px !important; height: 44px !important; min-width: 44px; flex: 0 0 44px !important;
    border-radius: 6px; object-fit: cover; background: #0E0A45; margin: 0 !important;
}
.uk-modal[id^="search-container"] .cpro-live-search-card__body {
    display: flex !important; flex-direction: column-reverse; gap: 1px; padding: 0 !important; min-width: 0;
}
.uk-modal[id^="search-container"] .cpro-live-search-card__title {
    color: #fff !important; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; margin: 0;
}
.uk-modal[id^="search-container"] .cpro-live-search-card__type {
    background: transparent !important; color: #8A93B5 !important;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
}
/* "View all results" link */
.uk-modal[id^="search-container"] .cpro-live-search-results__viewall,
.uk-modal[id^="search-container"] .cpro-live-search-results a[class*=viewall],
.uk-modal[id^="search-container"] .cpro-live-search-results__footer a {
    color: #7BB7FF !important; font-weight: 700; text-align: center;
}
/* group headings (e.g. "PRODUCTS") inside the modal */
.uk-modal[id^="search-container"] .cpro-live-search-results__group-title,
.uk-modal[id^="search-container"] .cpro-live-search-results [class*=group-title] {
    color: #8A93B5 !important; font-size: 12px; letter-spacing: 1px;
}

/* ---------------------------------------------------------------------------
   Video detail — Recommended / Related video cards.
   Keep every thumbnail a uniform 16:9 regardless of source YouTube thumbnail
   size. Most videos have a 1280x720 (16:9) maxresdefault, but a few only have
   a 4:3 hqdefault (480x360) — without this they render taller/letterboxed in
   the recommended sliders. (Library/archive cards already cover-crop via
   .lt-video-card__thumb.)
   --------------------------------------------------------------------------- */
.single-videos .uk-slider-container .el-image {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------- Desktop nav — dropdown indicator on parent items ----------
   The navbar rendered no caret on dropdown parents (About / Support /
   Resources / Products / Financing). Keyed off UIkit's .uk-parent (not
   .menu-item-has-children) so it also covers Products, whose dropdown is the YT
   mega-menu element rather than WP child items. The mobile accordion uses .uk-nav,
   so this is scoped to the desktop .uk-navbar-nav only. */
.uk-navbar-nav > li.uk-parent > a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 7px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .7;
    transition: opacity .15s ease, transform .15s ease;
}
.uk-navbar-nav > li.uk-parent:hover > a::after,
.uk-navbar-nav > li.uk-parent > a[aria-expanded="true"]::after {
    opacity: 1;
    transform: translateY(1px);
}

/* ---------- Desktop nav — navy dropdowns (match the Products mega-menu) ----------
   Standard list dropdowns (About / Support / Resources / Financing) carry a
   .uk-navbar-dropdown-nav; the Products mega-menu carries .lt-mm instead, so
   :has(.uk-navbar-dropdown-nav) targets only the simple ones. Navy panel +
   light links, mirroring .uk-navbar-dropdown:has(.lt-mm) (#06013D). */
.uk-navbar-dropdown:has(.uk-navbar-dropdown-nav) {
    background: #06013D !important;
    box-shadow: 0 0px 30px rgba(0, 0, 0, .25);
    padding: 22px 26px !important;
}
.uk-navbar-dropdown:has(.uk-navbar-dropdown-nav) .uk-navbar-dropdown-nav > li > a {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
    transition: color .15s ease;
}
.uk-navbar-dropdown:has(.uk-navbar-dropdown-nav) .uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown:has(.uk-navbar-dropdown-nav) .uk-navbar-dropdown-nav > li > a:focus,
.uk-navbar-dropdown:has(.uk-navbar-dropdown-nav) .uk-navbar-dropdown-nav > li.uk-active > a {
    color: #fff;
}
/* Divider/heading colors inside, if any nav uses them */
.uk-navbar-dropdown:has(.uk-navbar-dropdown-nav) .uk-nav-divider { border-top-color: rgba(255, 255, 255, .12); }
.uk-navbar-dropdown:has(.uk-navbar-dropdown-nav) .uk-nav-header { color: rgba(255, 255, 255, .55); }

/* ---------- Inline part numbers in content (chiefly FAQ answers) ----------
   These arrive as <code>SKU</code>. When the SKU maps to a real product the
   renderer turns it into an <a class="lt-sku-link"> (clickable, link-blue chip);
   otherwise it stays a plain <code> token. Both replace the theme's alarming
   red (#ed4646). `:not([class*="language-"])` lifts specificity above the theme
   rule regardless of load order and skips syntax-highlighted code; <pre> blocks
   are untouched. Lives here (global) so FAQ answers styled on the /faqs/ archive,
   term pages, and product FAQ sections all match. */
:not(pre) > code:not([class*="language-"]) {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    color: #06013D;
    background: #EEF2F8;
    border-radius: 4px;
    padding: 1px 6px;
}
a.lt-sku-link {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    color: #1F5D9F;
    background: #EEF2F8;
    border-radius: 4px;
    padding: 1px 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
a.lt-sku-link:hover,
a.lt-sku-link:focus { background: #DEE7F4; color: #06013D; text-decoration: underline; }

/* ---------- Toolbar link treatment (unify House of Brands w/ QPF + phone) ----------
   The top toolbar's House of Brands iconnav ships permanently dimmed
   (rgba(255,255,255,.5)). Bring it up to white and dim to 50% on hover, matching
   Quick Product Find and the store-status phone so the whole bar is consistent. */
.tm-toolbar .uk-iconnav > li > a,
.tm-toolbar-default .uk-iconnav > li > a {
  color: #fff;
  transition: color .15s ease, opacity .15s ease;
}
.tm-toolbar .uk-iconnav > li > a:hover,
.tm-toolbar .uk-iconnav > li > a:focus,
.tm-toolbar-default .uk-iconnav > li > a:hover,
.tm-toolbar-default .uk-iconnav > li > a:focus {
  color: rgba(255, 255, 255, .5);
}
/* Quick Product Find sits in a builder-widget grid column whose default UIkit
   gutter is 40px — lopsided next to the 14px divider on the store-status side.
   Even it to 14px so the divider has equal breathing room on both sides. */
.tm-toolbar .uk-grid > .uk-width-auto:not(.uk-first-column):has(.quick-product-find) {
  padding-left: 14px;
}

/* "Submit a Support Request" buttons (contact + support cards) anchor to the
   Gravity Form on /contact-us/. Offset the jump so the sticky header doesn't
   cover the form, and the "Send us a message." heading stays in view. */
#message { scroll-margin-top: 140px; }

/* Large card phone number (support "Talk to our team" card). The headline's YT
   `css` prop targeted a non-existent `.el-content`, so the intended size never
   applied — a real class on the element is reliable. */
.lt-card-phone { font-family: 'Inter', sans-serif; font-size: 28px; line-height: 1.2; font-weight: 700; }