@charset "UTF-8";
/* ==========================================================================
   WINLONGLED — "Lumen" design system
   Modern LED lighting brand identity.

   TABLE OF CONTENTS
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout & spacing utilities
   05. Buttons & links
   06. Section headings
   07. Shared components (cards, icon boxes, panels)
   08. Header
   09. Navigation: primary, mega menu, mobile drawer, search
   10. Hero banner
   11. Home — partner marquee
   12. Home — products
   13. Home — applications
   14. Home — customisation & enquiry
   15. Home — advantages
   16. Factory, projects & project CTA
   17. Home — laboratory
   18. Home — reviews
   19. Home — FAQ
   20. Home — news
   21. Forms (WPForms)
   22. Footer
   23. Inner page banner & breadcrumbs
   24. News, archives & search
   25. Product system
   26. Custom LED solutions page
   27. Contact page & location
   28. Quality panel
   29. Misc pages (404, thanks, privacy)
   30. Aside rail, enquiry modal & sticky bars
   31. Responsive
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Surfaces: dark --- */
  --ink-0: #05070b;
  --ink-1: #080b12;
  --ink-2: #0d1219;
  --ink-3: #121926;
  --ink-4: #1a2331;

  /* --- Surfaces: light --- */
  --light-0: #ffffff;
  --light-1: #f4f7f9;
  --light-2: #e8eef3;

  /* --- Lines --- */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.22);
  --light-line: rgba(9, 22, 36, 0.1);
  --light-line-2: rgba(9, 22, 36, 0.16);

  /* --- Foreground on dark --- */
  --fg-0: #f5f8fb;
  --fg-1: #c2ccd8;
  --fg-2: #8b99a9;
  --fg-3: #768392; /* 5.1:1 on the dark surfaces (was #63707f, 3.9:1) */

  /* --- Foreground on light --- */
  --lf-0: #0a121c;
  --lf-1: #3b4a5a;
  --lf-2: #5c6a7a; /* 5.5:1 on white, 4.7:1 on the light band (was #6a7a8b, 4.4:1) */
  --lf-3: #93a2b1;

  /* --- Brand accents --- */
  --accent: #18e8c6;
  --accent-d: #087f78; /* darker teal: 4.9:1 on white (was #0bb7ae, 2.5:1) */
  --accent-deep: #0a6e8c;
  --warm: #ffb457;
  --cool: #6fd3ff;

  /* Legacy alias still referenced by template-parts/sticky_footer.php
     (an unused template part kept for reference) */
  --i_color: #0bb7ae;

  /* --- Type ---
     Roboto is self-hosted in static/css/fonts.css and leads both stacks;
     the two tokens stay separate so a display face can be swapped back in
     without touching every component. */
  --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* --- Radii --- */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- Elevation --- */
  --sh-s: 0 2px 8px rgba(0, 0, 0, 0.25);
  --sh-m: 0 18px 40px -18px rgba(0, 0, 0, 0.65);
  --sh-l: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
  --glow: 0 0 0 1px rgba(24, 232, 198, 0.28), 0 14px 44px -14px rgba(24, 232, 198, 0.42);

  /* --- Metrics --- */
  --maxw: 1300px;
  --gutter: 4.5%;
  --header-height: 78px;
  --head_all_height: 108px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ------------------------------------------------------------------
     Card tokens — DARK surface is the default.
     Light sections (see 07) re-declare these, so every card component
     below adapts automatically without its own colour overrides.
     ------------------------------------------------------------------ */
  --card-bg: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  --card-bg-hover: linear-gradient(170deg, rgba(24, 232, 198, 0.075), rgba(255, 255, 255, 0.015));
  --card-border: var(--line);
  --card-border-hover: rgba(24, 232, 198, 0.34);
  --card-fg: #ffffff;
  --card-muted: var(--fg-2);
  --card-radius: var(--r-l);
  --card-pad: 32px 28px;
  --card-icon-bg: rgba(24, 232, 198, 0.1);
  --card-icon-border: rgba(24, 232, 198, 0.22);
  --card-icon-fg: var(--accent);
  --card-shadow: none;
  --card-shadow-hover: 0 30px 58px -32px rgba(0, 0, 0, 0.9);
  --card-lift: -5px;

  /* Band tokens — defaults describe a dark surface. Light surfaces
     redeclare these in 07.1. */
  --band-fg: var(--fg-0);
  --band-muted: var(--fg-2);
  --band-body: var(--fg-1);
  --band-accent: var(--accent);
  --band-line: var(--line-2);
  --band-line-strong: var(--line-strong);
  --band-hover-bg: rgba(255, 255, 255, 0.07);
  --band-subtle: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  /* the off-canvas mobile drawer must not create a horizontal scrollbar */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  outline: 0;
  border: 0;
  background: none;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--accent);
  color: #04120f;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--ink-1);
}
::-webkit-scrollbar-thumb {
  background: #26313f;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #35455a;
}

/* Visually hidden but still announced by screen readers — used for the labels
   of icon-only controls (e.g. the header search field). */
.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--band-fg);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.022em;
}

h1 {
  font-size: clamp(38px, 4.4vw, 68px);
}
h2 {
  font-size: clamp(27px, 2.6vw, 44px);
}
h3 {
  font-size: clamp(19px, 1.35vw, 25px);
  letter-spacing: -0.015em;
}
h4 {
  font-size: clamp(17px, 1.1vw, 21px);
}
h5 {
  font-size: 17px;
}
h6 {
  font-size: 15px;
}

p {
  margin: 0 0 1em;
}

/* Gradient headline accent — follows the surface via the band tokens so it
   stays legible on both dark and light bands. */
.text_linear_color {
  background: linear-gradient(96deg, var(--band-accent) 0%, var(--band-fg) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==========================================================================
   04. LAYOUT & SPACING UTILITIES
   ========================================================================== */
.wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 100%;
  overflow: hidden;
}

.head_space {
  height: var(--head_all_height);
}

/* Vertical rhythm — rem based. header.js sets the root font size to
   viewport/19.2, so 1rem scales with the viewport. */
.p100 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.p80 {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.p60 {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.m100 {
  margin-top: 0.95rem;
  margin-bottom: 0.95rem;
}
.m80 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.m70 {
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
}
.m60 {
  margin-top: 0.55rem;
  margin-bottom: 0.55rem;
}
.m50 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.m40 {
  margin-top: 0.42rem;
  margin-bottom: 0.42rem;
}
.m30 {
  margin-top: 0.32rem;
  margin-bottom: 0.32rem;
}

.mt30 {
  margin-top: 0.32rem;
}
.mt40 {
  margin-top: 0.42rem;
}
.mt50 {
  margin-top: 0.5rem;
}
.mt60 {
  margin-top: 0.58rem;
}
.mb30 {
  margin-bottom: 0.32rem;
}

.pt80 {
  padding-top: 0.9rem;
}
.pt70 {
  padding-top: 0.75rem;
}
.pb80 {
  padding-bottom: 0.9rem;
}
.pb60 {
  padding-bottom: 0.7rem;
}

.site_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ==========================================================================
   05. BUTTONS & LINKS
   ========================================================================== */
.site_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--accent) 0%, #6ff0da 100%);
  color: #04140f;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    background 0.28s var(--ease), color 0.28s var(--ease), border-color 0.28s var(--ease);
}

.site_btn iconify-icon,
.site_btn svg {
  font-size: 18px;
  transition: transform 0.28s var(--ease);
}

.site_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(24, 232, 198, 0.6);
}

.site_btn:hover iconify-icon,
.site_btn:hover svg {
  transform: translateX(4px);
}

.site_btn_primary:hover {
  box-shadow: var(--glow);
}

.site_btn_outline {
  background: transparent;
  color: var(--band-fg);
  border-color: var(--band-line-strong);
}

.site_btn_outline:hover {
  background: var(--band-hover-bg);
  border-color: var(--band-accent);
  color: var(--band-accent);
  box-shadow: none;
}

/* Legacy button markup still used by single-grid.php */
.btn_gold,
.btn_line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
    border-color 0.28s var(--ease), color 0.28s var(--ease);
}

.btn_gold {
  background: linear-gradient(120deg, var(--accent), #6ff0da);
  color: #04140f;
}

.btn_gold:hover {
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

.btn_line {
  border: 1px solid var(--line-strong);
  color: var(--fg-0);
}

.btn_line:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn_text,
.btn_arrow {
  display: inline-block;
}

.btn_arrow {
  font-size: 18px;
}

/* Text link with an arrow — shared by news, product and family cards */
.more,
.home_news_read,
.pd_n_btn a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--band-accent);
  font-weight: 600;
  font-size: 15px;
}

.more::after,
.home_news_read::after {
  content: "";
  width: 17px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h17M13 1l4 4-4 4' stroke='black' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h17M13 1l4 4-4 4' stroke='black' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.28s var(--ease);
}

.more:hover::after,
.home_news_read:hover::after {
  transform: translateX(5px);
}

/* ==========================================================================
   06. SECTION HEADINGS
   ========================================================================== */
.section_title {
  max-width: 760px;
  margin-bottom: 0.65rem;
}

.section_title h2 {
  font-size: clamp(27px, 2.5vw, 42px);
}

/* Small uppercase kicker that sits above the h2 in the two-column bands */
.section_title_tag {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--band-accent);
}

.section_title p {
  margin: 16px 0 0;
  max-width: 660px;
  color: var(--band-muted);
  font-size: 16px;
  line-height: 1.75;
}

.section_title_line {
  display: block;
  width: 58px;
  height: 3px;
  margin: 20px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--band-accent), transparent);
}

.section_title_center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section_title_center .section_title_line {
  width: 76px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--band-accent) 50%, transparent);
}

.section_title_center p {
  margin-left: auto;
  margin-right: auto;
}

/* Legacy centred title block (archives, search) */
.i_tit {
  text-align: center;
  margin-bottom: 0.5rem;
}

.i_tit h2,
.i_tit .tit {
  font-size: clamp(25px, 2.3vw, 38px);
}

.i_tit p {
  margin-top: 14px;
  color: var(--band-muted);
}

.i_tit_center {
  text-align: center;
}

/* ==========================================================================
   07. SHARED COMPONENTS
   ========================================================================== */

/* --- 07.1 Surface bands & tokens ---------------------------------------
   The page alternates light "technical" bands with dark "dramatic" bands.
   Each band declares its colour tokens ONCE here; every component below
   reads those tokens, so no component ever restates a band-specific colour.

   Two token families:
     --card-*  surfaces for bordered content cards
     --band-*  headings, muted copy, accents, hairlines and buttons that sit
               directly on the band rather than inside a card
   ---------------------------------------------------------------------- */

/* Tokens for light surfaces. Applied to light bands AND to the white form
   panels that sit on dark sections, so their inner text stays dark. */
:is(.bc, .led_custom, .product_section, .product_family_section, .products_overview_cta, .news_archive,
    .company_advantage, .laboratory, .home_news, .product_surface,
    .custom_solution_intro, .custom_solution_capabilities, .custom_solution_closing,
    .single_led_product, .news_single, .family_page, .page_about,
    .project_contact_form, .c_form) {
  --card-bg: #ffffff;
  --card-bg-hover: #ffffff;
  --card-border: var(--light-line);
  --card-border-hover: rgba(8, 127, 120, 0.42);
  --card-fg: var(--lf-0);
  --card-muted: var(--lf-2);
  --card-icon-bg: rgba(8, 127, 120, 0.1);
  --card-icon-border: rgba(8, 127, 120, 0.22);
  --card-icon-fg: var(--accent-d);
  --card-shadow: 0 2px 10px rgba(9, 22, 36, 0.04);
  --card-shadow-hover: 0 28px 50px -28px rgba(9, 22, 36, 0.42);

  --band-fg: var(--lf-0);
  --band-muted: var(--lf-2);
  --band-body: var(--lf-1);
  --band-accent: var(--accent-d);
  --band-line: var(--light-line-2);
  --band-line-strong: var(--light-line-2);
  --band-hover-bg: rgba(9, 22, 36, 0.05);
  --band-subtle: rgba(9, 22, 36, 0.04);
}

/* The light bands themselves: surface colour only. */
:is(.bc, .led_custom, .product_section, .product_family_section, .products_overview_cta, .news_archive,
    .company_advantage, .laboratory, .home_news, .product_surface,
    .custom_solution_intro, .custom_solution_capabilities, .custom_solution_closing,
    .single_led_product, .news_single, .family_page, .page_about) {
  background: var(--light-1);
  color: var(--lf-1);
}

/* A page-level band must contain its children's margins. Without this the last
   section's bottom margin escapes <main> and the dark page background shows as
   a stripe above the footer. */
.page_about {
  display: flow-root;
}

/* Dark bands and dark feature panels restate the dark tokens so they stay
   correct even when nested inside, or adjacent to, a light band. */
:is(.applications, .i_reviews, .faq_section, .in_banner, .products_overview_banner,
    .products_cta_inner, .product_cta_panel,
    .custom_solution_closing_inner, .project_contact_inner, .family_custom_wrap,
    footer) {
  --card-bg: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  --card-bg-hover: linear-gradient(170deg, rgba(24, 232, 198, 0.075), rgba(255, 255, 255, 0.015));
  --card-border: var(--line);
  --card-border-hover: rgba(24, 232, 198, 0.34);
  --card-fg: #ffffff;
  --card-muted: var(--fg-2);
  --card-icon-bg: rgba(24, 232, 198, 0.1);
  --card-icon-border: rgba(24, 232, 198, 0.22);
  --card-icon-fg: var(--accent);
  --card-shadow: none;
  --card-shadow-hover: 0 30px 58px -32px rgba(0, 0, 0, 0.9);

  --band-fg: #ffffff;
  --band-muted: var(--fg-2);
  --band-body: var(--fg-1);
  --band-accent: var(--accent);
  --band-line: var(--line-2);
  --band-line-strong: var(--line-strong);
  --band-hover-bg: rgba(255, 255, 255, 0.07);
  --band-subtle: rgba(255, 255, 255, 0.05);
  /* a dark panel always carries light copy, whichever band it sits in */
  color: var(--fg-1);
}

:is(.applications, .i_reviews, .faq_section) {
  background: var(--ink-0);
  color: var(--fg-1);
}

/* --- 07.2 Band-level typography ----------------------------------------
   These read the band tokens, so a new light section only needs to declare
   the tokens in 07.1 — no component selectors have to be extended.
   ---------------------------------------------------------------------- */

/* --- 07.3 Card ---------------------------------------------------------
   One base for every bordered content card on the site. Colour comes from
   the inherited card tokens, so light/dark bands need no per-component rules.
   ---------------------------------------------------------------------- */
:is(.advantage_item, .why_choose_item, .laboratory_item, .quality_item,
    .custom_solution_capability, .custom_solution_process_step,
    .product_feature_card, .product_download_item, .c_list li, .i_review_item) {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}

:is(.advantage_item, .why_choose_item, .laboratory_item, .quality_item,
    .custom_solution_capability, .product_feature_card, .product_download_item, .c_list li):hover {
  transform: translateY(var(--card-lift));
  background: var(--card-bg-hover);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

/* --- 07.4 Icon box ----------------------------------------------------- */
:is(.advantage_icon, .why_choose_icon, .laboratory_img, .product_feature_icon,
    .product_feature_default_icon, .c_list .ico) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: var(--r-m);
  background: var(--card-icon-bg);
  border: 1px solid var(--card-icon-border);
  color: var(--card-icon-fg);
}

.quality_item > iconify-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: var(--r-m);
  background: var(--card-icon-bg);
  border: 1px solid var(--card-icon-border);
  font-size: 26px;
  color: var(--card-icon-fg);
}

:is(.advantage_icon, .why_choose_icon) iconify-icon,
.product_feature_icon iconify-icon,
.laboratory_img iconify-icon {
  font-size: 27px;
}

.laboratory_img iconify-icon,
.laboratory_img svg {
  font-size: 24px;
}

.c_list .ico iconify-icon {
  font-size: 23px;
}

/* --- 07.5 Feature panel (dark gradient block) --------------------------
   Used by the CTA panels and the solution CTA.
   ---------------------------------------------------------------------- */
.products_overview_cta .products_cta_inner,
.product_bottom_cta .product_cta_panel,
.custom_solution_closing_inner {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--ink-2) 0%, #072a33 100%);
}

.products_overview_cta .products_cta_inner::before,
.product_bottom_cta .product_cta_panel::before,
.custom_solution_closing_inner::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(24, 232, 198, 0.2), transparent);
}

/* --- 07.6 Image slot --------------------------------------------------- */
.img {
  overflow: hidden;
}

.img img {
  display: block;
  width: 100%;
}

.product_image_placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 150px;
  border-radius: var(--r-s);
  background: repeating-linear-gradient(90deg, #dfe7ec 0 10px, #eef3f6 10px 20px);
}

/* --- 07.7 White form panel (on-dark default) --------------------------- */
.project_contact_form,
.c_form {
  border-radius: var(--r-l);
  background: var(--light-0);
  color: var(--lf-1);
  box-shadow: var(--sh-l);
}

.project_contact_form {
  padding: 34px;
}

.c_form {
  padding: 38px;
}

/* Iconify components inherit colour and size naturally */
iconify-icon {
  display: inline-block;
  vertical-align: middle;
}

section[id],
div[id]:not(#aside_mask_bg):not(#aside_sc_from) {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* ==========================================================================
   08. HEADER
   ========================================================================== */
.site_header,
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  background: rgba(5, 7, 11, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

header.TopHeader {
  background: rgba(5, 7, 11, 0.94);
  border-bottom-color: var(--line-2);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.95);
}

.top_cont {
  width: 100%;
}

.top {
  display: flex;
  align-items: center;
  gap: 34px;
  height: var(--header-height);
}

/* Brand lockup */
.logo {
  flex: 0 0 auto;
}

.logo > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.logo img {
  max-height: 46px;
  width: auto;
}

.brand_mark {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.brand_mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand_text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand_text b {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}

.brand_text b i {
  font-style: normal;
  color: var(--accent);
}

.brand_text em {
  margin-top: 5px;
  font-style: normal;
  font-size: 7.6px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}

/* Right-hand cluster */
.top_r {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.top_search_ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--fg-1);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.top_search_ico iconify-icon {
  font-size: 21px;
}

.top_search_ico:hover,
.top_search_ico.on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}

.top_quote {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 8px;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--accent) 0%, #7bf0dc 100%);
  color: #04140f;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.top_quote::after {
  content: "";
  width: 15px;
  height: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h17M13 1l4 4-4 4' stroke='black' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h17M13 1l4 4-4 4' stroke='black' stroke-width='1.8' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

.top_quote:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow);
  color: #04140f;
}

/* Shown only on narrow screens, where the label is hidden */
.top_quote_icon {
  display: none;
  font-size: 19px;
}

/* Hamburger */
.nav_menu {
  position: relative;
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  cursor: pointer;
}

.nav_menu i,
.nav_menu i::before,
.nav_menu i::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.8px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease), opacity 0.25s var(--ease);
}

.nav_menu i {
  top: 50%;
  margin-top: -0.9px;
}

.nav_menu i::before {
  content: "";
  top: -6px;
}

.nav_menu i::after {
  content: "";
  top: 6px;
}

.nav_menu.on i {
  background: transparent;
}

.nav_menu.on i::before {
  transform: translateX(-50%) rotate(45deg);
  top: 0;
}

.nav_menu.on i::after {
  transform: translateX(-50%) rotate(-45deg);
  top: 0;
}

/* Language switcher is intentionally not rendered on this site */
.language {
  display: none;
}

/* ==========================================================================
   09. NAVIGATION
   ========================================================================== */

/* --- 09.1 Primary nav -------------------------------------------------- */
.main_nav {
  flex: 1 1 auto;
  min-width: 0;
}

.i_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.i_nav > li {
  position: relative;
}

.i_nav > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border-radius: var(--r-pill);
  color: var(--fg-1);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.i_nav > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.3s var(--ease);
}

.i_nav > li:hover > a,
.i_nav > li.current-menu-item > a,
.i_nav > li.current_page_item > a {
  color: #fff;
}

.i_nav > li:hover > a::after,
.i_nav > li.current-menu-item > a::after,
.i_nav > li.current_page_item > a::after {
  width: 22px;
}

/* caret on dropdown parents */
.i_nav > .menu-item-has-children > a::before {
  content: "";
  order: 2;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.65;
  transition: transform 0.25s var(--ease);
}

.i_nav > .menu-item-has-children:hover > a::before {
  transform: rotate(225deg) translateY(-1px);
}

/* small dropdown (non-mega) */
.i_nav .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  display: none;
  min-width: 240px;
  padding: 10px;
  border-radius: var(--r-m);
  border: 1px solid var(--line-2);
  background: rgba(13, 18, 25, 0.98);
  box-shadow: var(--sh-l);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.i_nav .sub-menu li a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  color: var(--fg-1);
  font-size: 14.5px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.i_nav .sub-menu li a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}

/* --- 09.2 Mega menu (product navigation) ------------------------------- */
.drop_cont {
  position: fixed;
  top: var(--header-height);
  left: 0;
  z-index: 880;
  display: none;
  width: 100%;
  max-height: calc(100vh - var(--header-height));
  padding: 46px 0 50px;
  overflow-y: auto;
  background: rgba(8, 11, 18, 0.97);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
}

.drop_menu {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 0.9fr;
  gap: 64px;
}

.drop_menu_column {
  min-width: 0;
  padding-left: 30px;
  border-left: 1px solid var(--line);
}

.drop_menu_column:first-child {
  padding-left: 0;
  border-left: 0;
}

.drop_menu_group + .drop_menu_group {
  margin-top: 36px;
}

.drop_menu_title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.drop_menu_title a {
  color: var(--accent);
}

.drop_menu_title a:hover {
  color: #fff;
}

.drop_menu_links li + li {
  margin-top: 2px;
}

.drop_menu_links a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px 9px 0;
  border-radius: var(--r-xs);
  color: var(--fg-1);
  font-size: 15.5px;
  line-height: 1.5;
  transition: color 0.22s var(--ease), transform 0.22s var(--ease);
}

.drop_menu_links a:hover {
  color: #fff;
  transform: translateX(4px);
}

.drop_menu_arrow {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.drop_menu_links a:hover .drop_menu_arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* --- 09.3 Search panel ------------------------------------------------- */
.top_search {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: rgba(8, 11, 18, 0.98);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: max-height 0.4s var(--ease), border-color 0.3s var(--ease);
}

.top_search.on {
  max-height: 160px;
  border-bottom-color: var(--line-2);
}

.top_search form {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 0;
}

.top_search_ipt {
  flex: 1 1 auto;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  color: #fff;
  font-size: 15px;
}

.top_search_ipt::placeholder {
  color: var(--fg-3);
}

.top_search_ipt:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.09);
}

.top_search_btn {
  height: 50px;
  padding: 0 30px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #04140f;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease);
}

.top_search_btn:hover {
  box-shadow: var(--glow);
}

/* --- 09.4 Mobile drawer ------------------------------------------------ */
.menu_overlay {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 950;
  width: min(400px, 86vw);
  height: 100%;
  padding: 84px 26px 40px;
  overflow-y: auto;
  background: var(--ink-1);
  border-left: 1px solid var(--line-2);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0.45s var(--ease);
}

.menu_overlay.on {
  transform: translateX(0);
  visibility: visible;
}

.close_menu_btn {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  cursor: pointer;
}

.close_menu_btn::before,
.close_menu_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1.8px;
  border-radius: 2px;
  background: #fff;
}

.close_menu_btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close_menu_btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu_overlay_nav > ul {
  display: flex;
  flex-direction: column;
}

/* the drawer reuses the desktop nav list, so reset its layout here */
.menu_overlay .i_nav {
  display: block;
  gap: 0;
}

.menu_overlay .i_nav > li {
  border-bottom: 1px solid var(--line);
}

.menu_overlay .i_nav > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-radius: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.menu_overlay .i_nav > li > a::after,
.menu_overlay .i_nav > .menu-item-has-children > a::before {
  display: none;
}

.menu_overlay .i_nav .sub-menu {
  position: static;
  display: none;
  width: auto;
  min-width: 0;
  padding: 0 0 14px 16px;
  border: 0;
  background: none;
  box-shadow: none;
}

.menu_overlay .i_nav .sub-menu a {
  display: block;
  padding: 9px 0;
  color: var(--fg-2);
  font-size: 15px;
}

.menu_overlay .i_nav .sub-menu a:hover {
  color: var(--accent);
}

.menu_overlay_cta {
  margin-top: 30px;
}

.menu_overlay_cta .site_btn {
  width: 100%;
  justify-content: center;
}

.aside_mask_bg {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: none;
  background: rgba(2, 4, 7, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   10. HERO BANNER
   ========================================================================== */
.banner {
  position: relative;
  overflow: hidden;
  background: var(--ink-0);
}

.banner .swiper-container,
.banner .swiper {
  width: 100%;
}

.banner .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  /* The hero owns the whole first screen. `svh` keeps that true on phones,
     where the browser toolbars change the viewport height; browsers without
     it fall back to the `100vh` above. */
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.banner .swiper-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.banner .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      100deg,
      rgba(5, 7, 11, 0.97) 0%,
      rgba(5, 7, 11, 0.88) 38%,
      rgba(5, 7, 11, 0.42) 68%,
      rgba(5, 7, 11, 0.2) 100%
    ),
    radial-gradient(120% 90% at 82% 30%, rgba(24, 232, 198, 0.16) 0%, rgba(5, 7, 11, 0) 62%);
}

.banner_content {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  padding: 120px 0 110px;
}

.banner_content h1,
.banner_content h4 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 15em;
  font-size: clamp(34px, 4.1vw, 64px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: #fff;
}

.banner_content h1 span,
.banner_content h4 span {
  display: block;
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.banner_content h1 strong,
.banner_content h4 strong {
  display: block;
  font-weight: 700;
}

.banner_desc {
  max-width: 560px;
  margin: 26px 0 0;
  color: var(--fg-1);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.8;
}

.banner_content .site_btns {
  margin-top: 40px;
}

.hero_specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 0;
  padding: 0;
}

.hero_specs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--fg-0);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hero_specs li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px rgba(24, 232, 198, 0.8);
}

/* slider controls */
.banner-button-prev,
.banner-button-next {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(5, 7, 11, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease);
}

.banner-button-prev iconify-icon,
.banner-button-next iconify-icon {
  font-size: 24px;
}

.banner-button-prev {
  left: 28px;
}

.banner-button-next {
  right: 28px;
}

.banner-button-prev:hover,
.banner-button-next:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #04140f;
}

.banner-pagination {
  position: absolute;
  bottom: 42px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
}

.banner-pagination .swiper-pagination-bullet {
  position: relative;
  width: 28px;
  height: 3px;
  margin: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  opacity: 1;
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}

/* The visible bar stays 3px, but the tap area grows to 30px tall so the
   bullets can actually be hit on a phone (they used to be a 3px target). */
.banner-pagination .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  right: -5px;
  height: 30px;
  transform: translateY(-50%);
}

.banner-pagination .swiper-pagination-bullet-active {
  width: 48px;
  background: var(--accent);
}

/* Home sections sit flush against each other so the alternating light/dark
   bands read as continuous, without dark gaps between them, and every band
   carries the same vertical padding whatever its inner markup looks like —
   so the gap between any two bands on the homepage is identical.
   The per-band padding utilities (.p100/.p80/.p60) are therefore not used
   inside `.home_main`. */
.home_main > section {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* ==========================================================================
   11. HOME — PARTNER MARQUEE  (.certy / .par_partner)
   ========================================================================== */
.par_partner_list {
  overflow: hidden;
}

.par_partner_list .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
}

.par_partner_list .img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px 18px;
  border-radius: var(--r-m);
  background: #fff;
  border: 1px solid var(--light-line);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.par_partner_list .img:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-m);
}

.par_partner_list .img img {
  max-width: 100%;
  max-height: 54px;
  object-fit: contain;
}

/* ==========================================================================
   12. HOME — PRODUCTS
   --------------------------------------------------------------------------
   Mosaic: the lead series fills the left half, the next four sit 2 x 2 beside
   it. Image first, with the label, title and link over a soft white fade.
   `.product_card_link` at the end of the block is no longer used here — it is
   the shared link style still inherited by the listing cards
   (`.led_product_card .product_card_link`), so it stays.
   ========================================================================== */
.product_mosaic {
  display: grid;
  grid-template-columns: 1.62fr 1fr 1fr;
  gap: 18px;
  margin-top: 0.6rem;
}

.product_tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--light-0);
  border: 1px solid var(--light-line);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.product_tile:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 127, 120, 0.5);
  box-shadow: 0 34px 60px -30px rgba(9, 22, 36, 0.45);
}

.product_tile_large {
  grid-row: span 2;
  aspect-ratio: auto;
}

.product_tile_link {
  display: block;
  height: 100%;
  color: inherit;
}

.product_tile_media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #eef3f6 100%);
}

.product_tile_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transition: transform 0.55s var(--ease);
}

.product_tile:hover .product_tile_media img {
  transform: scale(1.06);
}

.product_tile_body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 26px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.86) 24%,
    rgba(255, 255, 255, 0.98) 50%,
    #ffffff 72%
  );
}

.product_tile_eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(9, 22, 36, 0.1);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band-accent);
}

.product_tile_title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--band-fg);
}

.product_tile_large .product_tile_title {
  font-size: 25px;
}

.product_tile_cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--band-accent);
}

.product_tile_cta iconify-icon {
  font-size: 17px;
  transition: transform 0.28s var(--ease);
}

.product_tile:hover .product_tile_cta iconify-icon {
  transform: translateX(4px);
}

/* Shared with the listing cards on /products/ and single product pages. */
.product_card_link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--light-0);
  border: 1px solid var(--light-line);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.product_card_link:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 127, 120, 0.5);
  box-shadow: 0 34px 60px -30px rgba(9, 22, 36, 0.45);
}

.product_more {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
}

/* ==========================================================================
   13. HOME — APPLICATIONS
   ========================================================================== */
.application_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.application_card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
}

.application_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.application_card:hover img {
  transform: scale(1.07);
}

.application_card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 11, 0) 34%, rgba(5, 7, 11, 0.9) 100%);
}

.application_card figcaption {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  z-index: 2;
}

.application_card figcaption span,
.project_tag {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.application_card figcaption h3 {
  margin: 0;
  font-size: 19px;
  color: #fff;
}

/* ==========================================================================
   14. HOME — CUSTOMISATION
   ========================================================================== */
/* The band keeps no padding of its own: `.wrap p80` inside sets the rhythm,
   exactly like the other light bands.

   Two columns: the copy holds the left one with the small tiles under it,
   while the feature shot fills the right one — it spans both rows, so it
   always matches the height of everything beside it. */
.led_custom_wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas:
    "intro feature"
    "tiles feature";
  column-gap: 54px;
  row-gap: 30px;
}

.led_custom_content {
  grid-area: intro;
}

.led_custom_content h2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0;
  font-size: clamp(26px, 2.4vw, 40px);
  color: var(--band-fg);
}

.led_custom_content h2 span {
  font-size: 0.46em;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--band-accent);
}

.led_custom_content .section_title_line {
  margin: 20px 0 0;
}

/* The band copy — it used to be printed inside the tile captions. The
   max-width matches `.section_title p`, so the measure stays readable once
   the band stacks and the copy gets the whole column. */
.led_custom_content p {
  margin: 16px 0 0;
  max-width: 660px;
  color: var(--band-muted);
  font-size: 16px;
  line-height: 1.78;
}

/* --- 14.1 Feature shot + numbered tiles --------------------------------
   The first factory shot is the large feature on the right of the band. It
   stretches to the height of the copy column and keeps its caption bar as an
   overlay on the photo, so the bar only carries the label.

   The tiles under the copy carry a 4/3 ratio of their own (the ratio the
   applications grid uses), so they keep their proportions instead of
   stretching to match a neighbouring column. Their caption bar is a dark
   overlay laid on the photo too, so it keeps the on-dark values
   (--fg-1 / --fg-2) whichever band the section sits in. Once the tiles
   narrow, that bar leaves the overlay and becomes a panel under the photo
   instead — see the responsive section.
   ---------------------------------------------------------------------- */
.led_custom_feature {
  grid-area: feature;
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-l);
  border: 1px solid var(--band-line);
  background: var(--band-subtle);
}

.led_custom_feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.led_custom_feature:hover img {
  transform: scale(1.04);
}

.led_custom_gallery {
  grid-area: tiles;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.led_custom_gallery li {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-m);
  border: 1px solid var(--band-line);
  aspect-ratio: 4 / 3;
}

.led_custom_gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.led_custom_gallery li:hover img {
  transform: scale(1.06);
}

.led_custom_cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(5, 7, 11, 0.82);
}

.led_custom_cap_text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.led_custom_cap_title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}

.led_custom_cap_sub {
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg-2);
}

/* ==========================================================================
   15. HOME — ADVANTAGES
   ========================================================================== */
.advantage_grid,
.why_choose_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.advantage_item,
.why_choose_item {
  padding: var(--card-pad);
  overflow: hidden;
}

/* accent line that draws in on hover */
.advantage_item::after,
.why_choose_item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  width: 46px;
  height: 2px;
  background: linear-gradient(90deg, var(--band-accent), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease), width 0.4s var(--ease);
}

.advantage_item:hover::after,
.why_choose_item:hover::after {
  opacity: 1;
  width: 90px;
}

.advantage_icon,
.why_choose_icon {
  margin-bottom: 22px;
}

.advantage_item h3,
.why_choose_item h3 {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--card-fg);
}

.advantage_item p,
.why_choose_item p {
  margin: 0;
  color: var(--card-muted);
  font-size: 14.8px;
  line-height: 1.75;
}

/* ==========================================================================
   16. HOME — FACTORY  (.about)
   ========================================================================== */
.about {
  position: relative;
}

.about_box {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
}

.about_visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-l);
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
}

.about_visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about_content .section_title {
  margin-bottom: 22px;
}

.about_intro p {
  color: var(--lf-1);
  font-size: 16px;
  line-height: 1.85;
}

.about_intro p:last-child {
  margin-bottom: 0;
}

.capability_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
}

.capability_chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--light-line);
  color: var(--lf-1);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(9, 22, 36, 0.04);
}

.capability_chips li::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 9px;
  border-left: 2px solid var(--accent-d);
  border-bottom: 2px solid var(--accent-d);
  transform: rotate(-45deg) translateY(-1px);
}

/* --- 16.2 Project gallery (About page, project archive) ---------------- */
.project_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.project_item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-l);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  aspect-ratio: 4 / 3;
}

.project_img {
  width: 100%;
  height: 100%;
}

.project_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.project_item:hover .project_img img {
  transform: scale(1.07);
}

.project_info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 60px 26px 24px;
  background: linear-gradient(180deg, rgba(5, 7, 11, 0) 0%, rgba(5, 7, 11, 0.92) 75%);
}

.project_info h3 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}

.project_info p {
  margin: 6px 0 0;
  color: var(--fg-2);
  font-size: 13.5px;
}

.project_btn,
.project_section .product_more {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
}

/* --- 16.3 Project contact CTA ----------------------------------------- */
.project_contact_wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 54px;
  align-items: center;
}

.project_contact_inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--ink-2) 0%, #06202a 100%);
  border: 1px solid var(--line-2);
}

.project_contact_content h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.3vw, 38px);
  color: #fff;
}

.project_contact_content > p {
  max-width: 62ch;
  color: var(--fg-1);
  font-size: 15.5px;
  line-height: 1.8;
}

.project_contact_form_title h2 {
  margin-bottom: 20px;
}

.project_contact_video {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 340px;
  margin-top: 30px;
  padding: 40px 30px;
  border-radius: var(--r-l);
  background: linear-gradient(140deg, #0d3a44, #071722);
  overflow: hidden;
}

.project_contact_video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.project_contact_video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 7, 11, 0.35), rgba(5, 7, 11, 0.82));
  pointer-events: none;
}

.project_video_play {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--accent);
  color: #04140f;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.project_video_play iconify-icon {
  font-size: 34px;
}

.project_video_play:hover {
  transform: scale(1.08);
  box-shadow: var(--glow);
}

.project_video_text {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  text-align: center;
}

.project_video_text span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.project_video_text strong {
  display: block;
  max-width: 30ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}

/* ==========================================================================
   17. LABORATORY / TEST CARDS
   .laboratory_grid is the five-up grid on the about page; the homepage band
   reuses the same .laboratory_item card in its own two-up grid (section 19).
   ========================================================================== */
.laboratory_grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0.6rem;
}

.laboratory_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 190px;
  padding: 26px 22px;
}

.laboratory_img {
  width: 46px;
  height: 46px;
  margin-bottom: auto;
  border-radius: var(--r-s);
}

/* Legacy photo slots — replaced by icons in the current templates */
.laboratory_img img {
  display: none;
}

.laboratory_item h3 {
  margin: 22px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--card-fg);
}

.laboratory_item p {
  margin: 8px 0 0;
  color: var(--card-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================================
   18. HOME — REVIEWS
   ========================================================================== */
.i_reviews_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.i_review_item {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
}

.i_review_item::before {
  content: "\201C";
  position: absolute;
  top: 14px;
  right: 26px;
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 1;
  color: rgba(24, 232, 198, 0.16);
  pointer-events: none;
}

.i_review_head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.i_review_head strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--card-fg);
}

.country_code {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.i_review_stars {
  margin-top: 12px;
  color: var(--warm);
  font-size: 15px;
  letter-spacing: 0.16em;
}

.i_review_text {
  flex: 1 1 auto;
  margin-top: 18px;
}

.i_review_text p {
  margin: 0;
  color: var(--fg-1);
  font-size: 15px;
  line-height: 1.8;
}

.i_review_gallery {
  margin-top: 22px;
}

.i_review_gallery img {
  border-radius: var(--r-s);
  border: 1px solid var(--line);
}

/* ==========================================================================
   19. HOME — QUALITY ASSURANCE + FAQ (two bands)
   Each band shows on its own and shares one shell: `.band_split` puts the
   section title in a narrower left column with the band's content beside it.
   - `.laboratory` (light): "Tested Before It Ships" — the shared
     .laboratory_item cards (section 17) in a compact two-up grid.
   - `.faq_section` (dark): "Answers Before You Ask" — the accordion list.
   ========================================================================== */
.band_split {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 56px;
  align-items: start;
}

.band_split > * {
  min-width: 0;
}

/* the title column sits beside the content, so its own stack spacing goes */
.band_split .section_title {
  margin-bottom: 0;
}

/* --- 19.1 Quality assurance — the test cards ------------------------------
   Each of the ten items is only an equipment name plus a one-line note, so the
   shared .laboratory_item card (section 17) is laid out here as a compact row:
   icon on the left with the copy beside it. Section 17 is left untouched — the
   about page keeps the taller five-up cards.
   ------------------------------------------------------------------------ */
.laboratory_tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.laboratory_tests .laboratory_item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  min-height: 0;
  padding: 15px 18px;
}

/* the icon sits beside the copy and spans both of its lines */
.laboratory_tests .laboratory_img {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  margin-bottom: 0;
}

.laboratory_tests .laboratory_item h3 {
  margin: 0;
  font-size: 15px;
}

.laboratory_tests .laboratory_item p {
  margin: 0;
  line-height: 1.55;
}

/* --- 19.2 FAQ — the accordion list (dark band) ----------------------------
   The accordion markup and script are unchanged; only the card chrome is
   dropped so each question reads as a row of its own.
   ------------------------------------------------------------------------ */
.faq_item {
  border-bottom: 1px solid var(--band-line);
}

.faq_question {
  display: flex;
  align-items: flex-start;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--card-fg);
  line-height: 1.5;
}

.faq_text {
  flex: 1 1 auto;
}

.faq_icon {
  position: relative;
  align-self: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--band-line-strong);
  color: var(--band-fg);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    color 0.3s var(--ease), transform 0.3s var(--ease);
}

.faq_icon::before,
.faq_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.faq_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq_item.active .faq_icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #04140f;
  transform: rotate(180deg);
}

.faq_item.active .faq_icon::after {
  opacity: 0;
}

.faq_answer {
  display: none;
}

.faq_answer_inner {
  padding: 0 0 22px;
}

.faq_answer_inner p {
  margin: 0;
  color: var(--card-muted);
  font-size: 15px;
  line-height: 1.8;
}

/* ==========================================================================
   20. HOME — NEWS
   ========================================================================== */
.home_news_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0.6rem;
}

.home_news_card {
  min-width: 0;
}

.home_news_card_link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.home_news_card_link:hover {
  transform: translateY(-6px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

.home_news_image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ink-3);
}

.home_news_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}

.home_news_card_link:hover .home_news_image img {
  transform: scale(1.06);
}

.home_news_image_placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, #12212b 0%, #0a1017 60%),
    repeating-linear-gradient(115deg, rgba(24, 232, 198, 0.14) 0 2px, transparent 2px 16px);
  background-blend-mode: screen;
}

.home_news_image_placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
}

.home_news_content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 26px 26px 28px;
}

.home_news_content time {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-muted);
}

.home_news_content h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.42;
  color: var(--card-fg);
}

.home_news_content p {
  margin: 0 0 20px;
  color: var(--card-muted);
  font-size: 14.5px;
  line-height: 1.72;
}

.home_news_read {
  margin-top: auto;
  color: var(--accent-d);
}

.home_news_more {
  display: flex;
  justify-content: center;
  margin-top: 0.6rem;
}

/* ==========================================================================
   21. FORMS (WPForms)
   WPForms ships very specific selectors, so each rule is scoped with
   :is(...) plus the full .wpforms-container-full .wpforms-form chain.
   ========================================================================== */
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container {
  margin: 0;
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form .wpforms-field {
  margin-bottom: 16px;
  padding: 0;
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form .wpforms-field-label {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--lf-2);
}

/* text inputs, selects, textareas */
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form select,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form textarea {
  width: 100%;
  max-width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--light-line-2);
  border-radius: var(--r-s);
  background: #fff;
  color: var(--lf-0);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 52px;
  box-shadow: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease);
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form textarea {
  height: auto;
  min-height: 132px;
  padding: 14px 18px;
  line-height: 1.7;
  resize: vertical;
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form input:not([type="submit"]):focus,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form textarea:focus,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form select:focus {
  border-color: var(--accent-d);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24, 232, 198, 0.16);
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form input::placeholder,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form textarea::placeholder {
  color: var(--lf-3);
  opacity: 1;
}

/* side-by-side field rows */
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form .wpforms-field-row {
  display: flex;
  gap: 16px;
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form .wpforms-field-row > div {
  flex: 1 1 0;
  min-width: 0;
}

/* submit button */
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form button[type="submit"],
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form input[type="submit"],
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--accent) 0%, #7bf0dc 100%);
  color: #04140f;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease),
    background 0.3s var(--ease);
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form button[type="submit"]:hover,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form button[type="submit"]:focus,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form input[type="submit"]:hover,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form input[type="submit"]:focus,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form .wpforms-submit:hover,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form .wpforms-submit:focus {
  background: linear-gradient(120deg, #7bf0dc 0%, var(--accent) 100%);
  border-color: transparent;
  color: #04140f;
  box-shadow: var(--glow);
  transform: translateY(-2px);
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-container-full .wpforms-form .wpforms-submit-container {
  margin: 22px 0 0;
  padding: 0;
  text-align: left;
}

/* footer form sits on the dark surface */
.f_form .wpforms-container-full .wpforms-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.f_form .wpforms-container-full .wpforms-form textarea,
.f_form .wpforms-container-full .wpforms-form select {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-2);
  color: #fff;
}

.f_form .wpforms-container-full .wpforms-form input::placeholder,
.f_form .wpforms-container-full .wpforms-form textarea::placeholder {
  color: var(--fg-3);
}

.f_form .wpforms-container-full .wpforms-form .wpforms-field-label {
  color: var(--fg-3);
}

/* validation */
.wpforms-container-full .wpforms-form .wpforms-error {
  color: #e2585c;
  font-size: 12.5px;
}

:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-field.wpforms-has-error input,
:is(.project_contact_form, .c_form, .new_form_cont, .f_form) .wpforms-field.wpforms-has-error textarea {
  border-color: #e2585c;
}

/* file upload */
.wpforms-container .wpforms-uploader,
.wpforms-container .wpforms-field-file-upload .wpforms-uploader {
  border: 1.5px dashed var(--light-line-2);
  border-radius: var(--r-s);
  background: #f8fafb;
  padding: 22px;
}

.f_form .wpforms-uploader {
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.04);
}

.wpforms-container .wpforms-field-description {
  color: var(--lf-2);
  font-size: 13.5px;
}

.f_form .wpforms-field-description {
  color: var(--fg-3);
}

/* ==========================================================================
   22. FOOTER
   ========================================================================== */
footer {
  position: relative;
  background: var(--ink-1);
  border-top: 1px solid var(--line);
}

footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(24, 232, 198, 0));
}

.f_box {
  display: grid;
  grid-template-columns: 1.25fr 0.72fr 0.72fr 1fr;
  gap: 48px;
}

.f_tit {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* `display: contents` lets the two <dt> columns participate in .f_box */
.f_nav {
  display: contents;
}

.f_nav dt {
  min-width: 0;
}

.f_nav ul li {
  /* the row spacing lives in the link's padding so the tap target is ~35px
     tall on phones while the visual rhythm stays the same */
  margin-bottom: 0;
}

.f_nav ul li a {
  display: inline-block;
  padding: 6px 0;
  color: var(--fg-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.f_nav ul li a:hover {
  color: var(--accent);
}

.f_form .f_tit {
  color: var(--accent);
}

.f_media {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.f_media a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
    border-color 0.28s var(--ease);
}

.f_media a iconify-icon {
  font-size: 18px;
}

.f_media a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #04140f;
}

.f_contact_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.f_contact_list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.f_contact_list iconify-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 19px;
  color: var(--accent);
}

.f_contact_list p,
.f_contact_list a {
  margin: 0;
  color: var(--fg-2);
  font-size: 14.5px;
  line-height: 1.65;
}

.f_contact_list a:hover {
  color: var(--accent);
}

.f_copy {
  border-top: 1px solid var(--line);
}

.f_copy .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
}

.f_copy p,
.f_copy a {
  margin: 0;
  color: var(--fg-3);
  font-size: 13.5px;
}

.f_copy a:hover {
  color: var(--accent);
}

/* ==========================================================================
   23. INNER PAGE BANNER & BREADCRUMBS
   ========================================================================== */
.in_banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink-0) 58%, #06181e 100%);
  border-bottom: 1px solid var(--line);
}

.in_banner::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 62%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(24, 232, 198, 0.16), transparent);
  pointer-events: none;
}

.in_banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(110% 120% at 76% 0%, #000 5%, transparent 68%);
  mask-image: radial-gradient(110% 120% at 78% 0%, #000 5%, transparent 68%);
  pointer-events: none;
}

.in_banner_inner {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--header-height) + 0.85rem);
  padding-bottom: 0.85rem;
}

.in_banner_content {
  max-width: 900px;
}

.in_banner_content h1 {
  font-size: clamp(30px, 3.2vw, 52px);
  letter-spacing: -0.028em;
  color: #fff;
}

.in_banner_content p {
  max-width: 660px;
  margin: 20px 0 0;
  color: var(--fg-1);
  font-size: 16.5px;
  line-height: 1.8;
}

.in_banner_line,
.products_banner_line {
  display: block;
  width: 62px;
  height: 3px;
  margin: 24px 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(24, 232, 198, 0));
}

/* breadcrumbs share one visual language across templates */
.in_position,
.product_breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 13.5px;
  color: var(--fg-2);
}

.in_position a,
.product_breadcrumb a {
  color: var(--fg-2);
}

.in_position a:hover,
.product_breadcrumb a:hover {
  color: var(--accent);
}

.in_position a::after,
.product_breadcrumb a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 10px;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: 0.5;
}

.in_position > a:last-child::after {
  display: none;
}

/* ==========================================================================
   24. NEWS, ARCHIVES & SEARCH
   ========================================================================== */
.new_menu,
.in_tit,
.search,
.tags {
  position: relative;
}

.category_list,
.p_menu_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 0.4rem;
}

.category_list li a,
.p_menu_list li a {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease);
}

.category_list li a:hover,
.p_menu_list li a:hover,
.category_list li.on a,
.p_menu_list li.on a {
  background: var(--accent);
  border-color: var(--accent);
  color: #04140f;
}

.date {
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* --- 24.1 News archive -------------------------------------------------
   `archive/news.php` renders a light band with a three-column card grid.
   ---------------------------------------------------------------------- */
.news_archive {
  padding: clamp(44px, 4.8vw, 82px) 0;
}

/* category filter pills at the top of the archive */
.new_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--maxw);
  margin: 0 auto 0.5rem;
}

.new_menu a {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--band-line);
  color: var(--band-fg);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease);
}

.new_menu a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #04140f;
}

.in_n_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.in_n_list > li {
  display: flex;
  min-width: 0;
}

.in_n_list > li > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.in_n_list > li > a:hover {
  transform: translateY(-6px);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}

.in_n_list .img {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ink-3);
}

.in_n_list .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}

.in_n_list > li > a:hover .img img {
  transform: scale(1.06);
}

.in_n_list .txt {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 26px 26px 28px;
}

.in_n_list .txt h6 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--card-fg);
}

.in_n_list .txt p {
  margin: 0 0 20px;
  color: var(--card-muted);
  font-size: 14.5px;
  line-height: 1.72;
}

.in_n_list .txt > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
}

.in_n_list .txt > span i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--card-muted);
}

/* the markup already carries an arrow icon, so drop the CSS one */
.in_n_list .more::after {
  content: none;
}

.in_n_list .more iconify-icon {
  font-size: 19px;
  color: var(--accent-d);
  transition: transform 0.28s var(--ease);
}

.in_n_list > li > a:hover .more iconify-icon {
  transform: translateX(5px);
}

/* horizontal article cards (project, product and search archives) */
.in_case_list > li,
.in_p_list > li,
.in_search_list > li {
  margin-bottom: 22px;
}

.in_case_list > li > a,
.in_p_list > li > a,
.in_search_list > li > a {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 30px;
  align-items: center;
  padding: 22px;
  border-radius: var(--r-l);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.in_case_list > li > a:hover,
.in_p_list > li > a:hover,
.in_search_list > li > a:hover {
  transform: translateY(-4px);
  border-color: var(--card-border-hover);
}

.in_case_list .img,
.in_p_list .img,
.in_search_list .img {
  overflow: hidden;
  border-radius: var(--r-m);
  aspect-ratio: 16 / 10;
  background: var(--ink-3);
}

.in_case_list .img img,
.in_p_list .img img,
.in_search_list .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.in_case_list > li > a:hover .img img {
  transform: scale(1.06);
}

.in_case_list .txt,
.in_p_list .txt,
.in_search_list .txt {
  min-width: 0;
}

.in_case_list .txt h3,
.in_p_list .txt h3,
.in_search_list .txt h3 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--card-fg);
}

.in_case_list .txt p,
.in_p_list .txt p,
.in_search_list .txt p {
  margin: 0 0 16px;
  color: var(--card-muted);
  font-size: 14.8px;
  line-height: 1.75;
}

/* pagination */
.in_page_box {
  display: flex;
  justify-content: center;
}

.in_page {
  display: flex;
  align-items: center;
  gap: 8px;
}

.in_page li a,
.in_page li span,
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--band-line);
  color: var(--band-fg);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  transition: background 0.26s var(--ease), border-color 0.26s var(--ease),
    color 0.26s var(--ease);
}

.in_page li a:hover,
.in_page li span.current,
.page-numbers.current,
.page-numbers:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #04140f;
}

/* --- 24.2 Single article (single/single-news.php) ----------------------
   Two-column layout: the article card plus a sidebar with recommended
   posts and a quote form. All colours come from the band tokens, so the
   page follows whichever surface it is placed on.
   ---------------------------------------------------------------------- */
.in_news_cont {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 34px;
  padding-top: 0.7rem;
}

.post_content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 1080px;
  border-radius: var(--r-xl);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.in_news_art_tit {
  position: relative;
  margin-bottom: 0.3rem;
  text-align: center;
}

.in_news_art_tit h2 {
  margin: 0 0 20px;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.24;
}

.n_tit_time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--band-line);
  color: var(--band-muted);
  font-size: 13.5px;
}

.n_share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.n_tit_time > p,
.n_share p {
  margin: 0;
  color: var(--band-muted);
  font-size: 13.5px;
}

.n_share a iconify-icon {
  font-size: 16px;
}

.n_share a:hover iconify-icon {
  color: currentColor;
}

.n_share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--band-line);
  color: var(--band-muted);
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.n_share a:hover {
  background: var(--band-accent);
  border-color: var(--band-accent);
  color: #04140f;
}

.n_article {
  color: var(--band-body);
  font-size: 16.5px;
  line-height: 1.9;
}

.n_article h2,
.n_article h3,
.n_article h4 {
  margin: 1.6em 0 0.6em;
  color: var(--band-fg);
}

.n_article p {
  margin: 0 0 1.2em;
}

.n_article ul,
.n_article ol {
  margin: 0 0 1.2em;
  padding-left: 1.35em;
  list-style: disc;
}

/* public.css paints its own grey dot on article list items; the native
   marker is used instead so the bullet takes the accent colour */
.n_article ul li::before,
.n_article ol li::before {
  content: none;
}

.n_article li::marker {
  color: var(--band-accent);
}

.n_article img {
  margin: 1.6em auto;
  border-radius: var(--r-m);
}

.n_article a {
  color: var(--band-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.n_article table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: 15px;
}

.n_article th,
.n_article td {
  padding: 13px 16px;
  border: 1px solid var(--band-line);
  text-align: left;
}

.n_article th {
  background: var(--band-subtle);
  color: var(--band-fg);
  font-weight: 600;
}

.n_navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--band-line);
  border-bottom: 0;
}

.n_navigation ul {
  width: auto;
  min-width: 0;
}

.n_navigation li {
  margin: 4px 0;
}

.n_navigation li a {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  color: var(--band-muted);
  font-size: 14.5px;
}

.n_navigation li a:hover {
  color: var(--band-accent);
}

.n_navigation li p {
  margin: 0 8px 0 0;
  color: var(--band-fg);
  font-size: 14px;
  font-weight: 600;
}

.n_back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #04140f;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.n_back iconify-icon,
.n_back b {
  color: inherit;
  font-size: 15px;
}

.n_back:hover {
  box-shadow: var(--glow);
}

/* --- sidebar ----------------------------------------------------------- */
.post_recommend {
  flex: 0 0 auto;
  width: 320px;
  max-width: 100%;
  margin-left: auto;
  padding: 26px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-l);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.post_recommend h3 {
  margin: 0 0 20px;
  font-size: 17px;
  font-weight: 600;
  color: var(--band-fg);
}

.post_recommend_list {
  display: block;
  margin: 0;
}

.post_recommend_list li:not(:last-child) {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--band-line);
}

.post_recommend_list li a {
  display: block;
  border: 0;
  background: none;
  transform: none;
  overflow: visible;
}

.post_recommend_list .img {
  border-radius: var(--r-s);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--band-subtle);
}

.post_recommend_list .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.post_recommend_list li:hover .img img {
  transform: scale(1.06);
}

.post_recommend_list h3,
.post_recommend_list h4,
.post_recommend_list p {
  padding: 0;
}

.post_recommend_list h3,
.post_recommend_list h4 {
  margin: 14px 0 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--band-fg);
}

.post_recommend_list p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--band-muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* quote form inside the sidebar */
.new_form_cont {
  position: relative;
  margin-top: 26px;
  padding: 24px;
  border-radius: var(--r-m);
  background: var(--band-subtle);
  border: 1px solid var(--band-line);
}

/* legacy gradient edge from public.css is no longer wanted */
.new_form_cont::after {
  content: none;
}

.new_form_cont > p {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--band-fg);
}

/* ==========================================================================
   25. PRODUCT SYSTEM
   Overview, family, landing and single-product templates.
   ========================================================================== */
.products_overview,
.family_page,
.product_landing,
.single_led_product {
  overflow: hidden;
}

.products_overview img,
.family_page img,
.product_landing img,
.single_led_product img {
  display: block;
  max-width: 100%;
  height: auto;
}

.product_section_space {
  padding: clamp(64px, 7vw, 108px) 0;
}

.product_narrow {
  max-width: 980px;
}

.product_readable {
  color: var(--band-body);
  font-size: 16.5px;
  line-height: 1.85;
}

.product_readable > *:first-child {
  margin-top: 0;
}

.product_readable > *:last-child {
  margin-bottom: 0;
}

.product_readable h2,
.product_readable h3,
.product_readable h4 {
  margin: 1.7em 0 0.7em;
  color: var(--band-fg);
  line-height: 1.3;
}

.product_readable h2:first-child,
.product_readable h3:first-child {
  margin-top: 0;
}

.product_readable ul,
.product_readable ol {
  margin: 0 0 1.2em;
  padding-left: 1.3em;
  list-style: disc;
}

.product_readable li {
  margin-bottom: 0.5em;
}

.product_readable a {
  color: var(--band-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product_readable table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 15px;
}

.product_readable th,
.product_readable td {
  padding: 13px 16px;
  border: 1px solid var(--band-line);
  text-align: left;
}

.product_readable th {
  background: var(--band-subtle);
  color: var(--band-fg);
  font-weight: 600;
}

/* --- 25.1 Products overview banner ------------------------------------- */
.products_overview_banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink-0) 58%, #06181e 100%);
  border-bottom: 1px solid var(--line);
}

.products_overview_banner::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -8%;
  width: 60%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(24, 232, 198, 0.17), transparent);
  pointer-events: none;
}

.products_overview_banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(110% 120% at 78% 0%, #000 5%, transparent 68%);
  mask-image: radial-gradient(110% 120% at 78% 0%, #000 5%, transparent 68%);
  pointer-events: none;
}

.products_overview_banner_content {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--header-height) + 0.85rem);
  padding-bottom: 0.85rem;
}

.products_overview_banner_content h1 {
  max-width: 18em;
  font-size: clamp(31px, 3.4vw, 56px);
  letter-spacing: -0.03em;
}

.products_overview_lead {
  max-width: 680px;
  margin: 22px 0 0;
  color: var(--fg-1);
  font-size: 16.5px;
  line-height: 1.8;
}

.products_overview .site_btns,
.products_overview_banner_content .site_btns {
  margin-top: 34px;
}

/* --- 25.2 Product family cards ----------------------------------------- */
.product_family_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0.6rem;
}

.product_family_item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--light-0);
  border: 1px solid var(--light-line);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.product_family_item:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 127, 120, 0.45);
  box-shadow: 0 34px 60px -30px rgba(9, 22, 36, 0.45);
}

.product_family_img {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #eef3f6 100%);
}

.product_family_img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.55s var(--ease);
}

.product_family_item:hover .product_family_img img {
  transform: scale(1.06);
}

/* Shared "read more" link used by family + series cards */
.product_family_link,
.family_series_content > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--accent-d);
  font-size: 14px;
  font-weight: 600;
  transition: color 0.28s var(--ease);
}

.product_family_link iconify-icon,
.family_series_content > span iconify-icon {
  font-size: 16px;
  transition: transform 0.28s var(--ease);
}

.product_family_item:hover .product_family_link,
.family_series_item:hover .family_series_content > span {
  color: var(--lf-0);
}

.product_family_item:hover .product_family_link iconify-icon,
.family_series_item:hover .family_series_content > span iconify-icon {
  transform: translateX(5px);
}

.product_family_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 24px 26px;
  border-top: 1px solid rgba(9, 22, 36, 0.08);
}

.product_family_info h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lf-0);
}

.product_family_info p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--lf-2);
  font-size: 14.2px;
  line-height: 1.6;
}

.product_empty_state {
  padding: 60px 30px;
  text-align: center;
  border-radius: var(--r-l);
  border: 1px dashed var(--band-line);
  color: var(--band-muted);
}

.product_empty_state h3 {
  margin: 0 0 12px;
  color: var(--band-fg);
}

/* --- 25.3 CTA panels ---------------------------------------------------- */
.products_overview_cta .products_cta_inner,
.product_bottom_cta .product_cta_panel {
  padding: clamp(44px, 5vw, 74px);
}

.products_overview_cta .products_cta_inner::before,
.product_bottom_cta .product_cta_panel::before {
  top: -50%;
  right: -6%;
  width: 48%;
  height: 200%;
}

.products_cta_content,
.product_cta_panel > div {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.products_cta_content h2,
.product_bottom_cta h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 2.2vw, 36px);
  color: #fff;
}

.products_cta_content p,
.product_bottom_cta p {
  color: var(--fg-1);
  font-size: 16px;
}

.products_cta_content .site_btns,
.product_bottom_cta .site_btns {
  margin-top: 30px;
}

/* --- 25.4 Feature cards ------------------------------------------------- */
.product_feature_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.product_feature_card {
  padding: 32px 28px;
}

.product_feature_icon {
  margin-bottom: 22px;
  overflow: hidden;
}

.product_feature_icon img,
.product_feature_default_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

.product_feature_card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--card-fg);
}

.product_feature_card p {
  margin: 0;
  color: var(--card-muted);
  font-size: 14.6px;
  line-height: 1.75;
}

/* --- 25.5 Product listing cards ----------------------------------------- */
.led_product_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0.6rem;
}

.led_product_card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--light-0);
  border: 1px solid var(--light-line);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.led_product_card:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 127, 120, 0.5);
  box-shadow: 0 34px 60px -30px rgba(9, 22, 36, 0.45);
}

.led_product_card_image {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #eef3f6 100%);
}

.led_product_card_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.55s var(--ease);
}

.led_product_card:hover .led_product_card_image img {
  transform: scale(1.06);
}

.led_product_card_content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 22px 24px;
  border-top: 1px solid rgba(9, 22, 36, 0.08);
}

.led_product_model {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-d);
}

.led_product_card_content h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--lf-0);
}

.led_product_card_content p {
  margin: 0 0 16px;
  color: var(--lf-2);
  font-size: 14px;
  line-height: 1.7;
}

.led_product_card .product_card_link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: auto;
  margin-top: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-d);
  font-size: 14px;
  font-weight: 600;
  overflow: visible;
  box-shadow: none;
  transform: none;
}

/* the markup already carries an arrow icon, so only that icon is animated */
.led_product_card .product_card_link iconify-icon,
.led_product_card .product_card_link svg {
  font-size: 16px;
  transition: transform 0.28s var(--ease);
}

.led_product_card:hover .product_card_link iconify-icon {
  transform: translateX(5px);
}

/* --- 25.6 Application cards --------------------------------------------- */
.product_application_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.product_application_card {
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.product_application_card:hover {
  transform: translateY(-5px);
  border-color: var(--card-border-hover);
}

.product_application_image {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-3);
}

.product_application_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}

.product_application_card:hover .product_application_image img {
  transform: scale(1.06);
}

.product_application_content {
  padding: 26px 26px 28px;
}

.product_application_content h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--card-fg);
}

.product_application_content p {
  margin: 0;
  color: var(--card-muted);
  font-size: 14.5px;
  line-height: 1.72;
}

/* --- 25.7 Specifications ------------------------------------------------ */
.product_spec_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin-top: 0.5rem;
  border-top: 1px solid var(--band-line);
}

.product_spec_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--band-line);
}

.product_spec_row dt,
.product_spec_row > strong,
.product_spec_row > span:first-child {
  flex: 0 0 auto;
  color: var(--band-muted);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product_spec_row dd,
.product_spec_row > span:last-child {
  margin: 0;
  color: var(--band-fg);
  font-size: 15px;
  font-weight: 500;
  text-align: right;
}

/* --- 25.8 Variant table ------------------------------------------------- */
.product_table_scroll {
  overflow-x: auto;
  margin-top: 0.5rem;
  border-radius: var(--r-m);
  border: 1px solid var(--band-line);
}

.product_variant_table,
.product_table_scroll table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.product_variant_table th,
.product_variant_table td,
.product_table_scroll table th,
.product_table_scroll table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--band-line);
  border-right: 1px solid var(--band-line);
  text-align: left;
  white-space: nowrap;
}

.product_variant_table th,
.product_table_scroll table th {
  background: var(--band-subtle);
  color: var(--band-fg);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product_variant_table tr:last-child td,
.product_table_scroll table tr:last-child td {
  border-bottom: 0;
}

.product_variant_table td,
.product_table_scroll table td {
  color: var(--band-body);
}

/* Dimension drawings — centred and capped so portrait spec sheets
   never stretch to full page width. */
.product_variant_diagram,
.product_diagram_grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 0.5rem;
}

.product_diagram_grid > a,
.product_variant_diagram > a {
  display: block;
  max-width: min(100%, 780px);
}

.product_variant_diagram img,
.product_diagram_grid img {
  width: auto;
  max-width: 100%;
  max-height: 780px;
  margin: 0 auto;
  border-radius: var(--r-m);
  border: 1px solid var(--band-line);
  background: #fff;
}

/* --- 25.9 Content split & video ---------------------------------------- */
.product_content_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.product_content_copy .product_readable {
  margin-top: 18px;
}

.product_content_image img {
  width: 100%;
  border-radius: var(--r-l);
  border: 1px solid var(--band-line);
}

.product_video_frame {
  position: relative;
  max-width: 940px;
  margin: 0.5rem auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-l);
  border: 1px solid var(--band-line);
  background: #000;
}

.product_video_frame iframe,
.product_video_frame video {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 25.10 Downloads & certificates ------------------------------------ */
.product_download_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 0.5rem;
}

.product_download_item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
}

.product_download_item iconify-icon,
.product_download_item svg {
  flex: 0 0 auto;
  font-size: 26px;
  color: var(--card-icon-fg);
}

.product_download_item span,
.product_download_item strong {
  display: block;
  color: var(--card-fg);
  font-size: 15.5px;
  font-weight: 600;
}

.product_download_item small,
.product_download_item em {
  display: block;
  margin-top: 4px;
  color: var(--card-muted);
  font-size: 12.5px;
  font-style: normal;
}

.product_certificate_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 0.5rem;
}

.product_certificate_grid img,
.product_certificate_grid a {
  display: block;
  padding: 16px;
  border-radius: var(--r-m);
  background: #fff;
  border: 1px solid var(--band-line);
}

.product_certificate_grid img {
  padding: 0;
  background: none;
  border: 0;
}

/* --- 25.11 Product FAQ -------------------------------------------------- */
.product_faq_list {
  margin-top: 0.5rem;
  border-top: 1px solid var(--band-line);
}

/* The markup uses native <details>/<summary>, so the disclosure is styled
   through summary rather than a heading. */
.product_faq_item {
  border-bottom: 1px solid var(--band-line);
}

.product_faq_item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--band-fg);
  transition: color 0.25s var(--ease);
}

.product_faq_item > summary::-webkit-details-marker {
  display: none;
}

.product_faq_item > summary::marker {
  content: "";
}

.product_faq_item > summary:hover {
  color: var(--band-accent);
}

.product_faq_item > summary iconify-icon {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--band-accent);
  transition: transform 0.3s var(--ease);
}

.product_faq_item[open] > summary iconify-icon {
  transform: rotate(135deg);
}

.product_faq_item > div {
  padding: 0 0 24px;
  color: var(--band-body);
  font-size: 15.5px;
  line-height: 1.85;
}

.product_faq_item > div > *:last-child {
  margin-bottom: 0;
}

.related_product_section .led_product_grid {
  margin-top: 0.6rem;
}

/* ==========================================================================
   26. CUSTOM LED SOLUTIONS PAGE
   ========================================================================== */

/* Sections sit flush so the alternating light/dark bands read as continuous,
   with no dark gaps showing between them. */
.custom_solutions_page > section {
  margin-top: 0;
  margin-bottom: 0;
}

.custom_solution_intro_wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 58px;
  align-items: center;
}

.custom_solution_intro_content > p {
  margin: 0 0 18px;
  color: var(--band-muted);
  font-size: 16px;
  line-height: 1.82;
}

.custom_solution_intro_content .site_btn {
  margin-top: 12px;
}

.custom_solution_intro_image {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  box-shadow: var(--sh-l);
}

.custom_solution_intro_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom_solution_capability_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.custom_solution_capability {
  padding: 32px 28px;
}

/* Icon sits directly inside the card (no wrapper element) */
.custom_solution_capability > iconify-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: var(--r-m);
  background: var(--card-icon-bg);
  border: 1px solid var(--card-icon-border);
  font-size: 27px;
  color: var(--card-icon-fg);
}

.custom_solution_capability h3 {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--card-fg);
}

.custom_solution_capability p {
  margin: 0;
  color: var(--card-muted);
  font-size: 14.6px;
  line-height: 1.75;
}

.custom_solution_process_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.custom_solution_process_step {
  padding: 34px 26px 30px;
}

/* The step number comes from the markup, so no CSS counter is needed */
.custom_solution_process_step > span {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--band-accent);
  opacity: 0.45;
}

.custom_solution_process_step h3 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--card-fg);
}

.custom_solution_process_step p {
  margin: 0;
  color: var(--card-muted);
  font-size: 14.4px;
  line-height: 1.72;
}

/* --- 26.1 Closing panel ------------------------------------------------
   One dark surface holding the "what to prepare" checklist on the left and
   the call to action on the right, separated by a hairline. The two used to
   be separate panels, which read as two near-identical blocks in a row.
   ---------------------------------------------------------------------- */
.custom_solution_closing_inner {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  padding: clamp(36px, 4.2vw, 62px);
}

.custom_solution_closing_inner::before {
  top: -60%;
  right: -8%;
  width: 52%;
  height: 220%;
}

/* Left column — page content rendered by WordPress */
.custom_solution_brief_inner {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-right: clamp(30px, 3.2vw, 56px);
  color: var(--fg-1);
}

.custom_solution_brief_inner h1,
.custom_solution_brief_inner h2,
.custom_solution_brief_inner h3,
.custom_solution_brief_inner h4 {
  margin: 0 0 16px;
  color: #fff;
}

.custom_solution_brief_inner h2 {
  font-size: clamp(22px, 1.8vw, 28px);
}

.custom_solution_brief_inner p {
  margin: 0 0 16px;
  color: var(--fg-1);
  font-size: 15.5px;
  line-height: 1.8;
}

.custom_solution_brief_inner ul,
.custom_solution_brief_inner ol {
  margin: 0;
  padding-left: 1.25em;
  list-style: none;
}

.custom_solution_brief_inner li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 24px;
  color: var(--fg-1);
  font-size: 15px;
  line-height: 1.7;
}

.custom_solution_brief_inner li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Right column — call to action */
.custom_solution_cta_inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-left: clamp(30px, 3.2vw, 56px);
  border-left: 1px solid var(--line-2);
  color: #fff;
}

.custom_solution_cta_inner h2 {
  margin: 0 0 14px;
  font-size: clamp(20px, 1.7vw, 26px);
  color: #fff;
}

.custom_solution_cta_inner > p {
  margin: 0 0 24px;
  color: var(--fg-1);
  font-size: 15px;
  line-height: 1.75;
}

.custom_solution_cta_inner .site_btn {
  align-self: flex-start;
}

/* If the page has no body content the call to action takes the whole panel */
.custom_solution_cta_inner:only-child {
  grid-column: 1 / -1;
  padding-left: 0;
  border-left: 0;
}

.custom_solution_cta_inner:only-child > p {
  max-width: 62ch;
}

/* Family page ------------------------------------------------------------ */
.family_intro_wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 58px;
  align-items: center;
}

.family_intro_image {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--band-line);
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
  box-shadow: var(--sh-l);
}

.family_intro_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family_intro_text {
  margin: 20px 0 28px;
  color: var(--band-body);
  font-size: 16px;
  line-height: 1.85;
}

.family_series_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0.6rem;
}

.family_series_item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--light-0);
  border: 1px solid var(--light-line);
  box-shadow: var(--card-shadow);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.family_series_item:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 127, 120, 0.45);
  box-shadow: 0 34px 60px -30px rgba(9, 22, 36, 0.45);
}

.family_series_image {
  aspect-ratio: 4 / 3;
  padding: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #eef3f6 100%);
}

.family_series_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.family_series_content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 24px 26px;
  border-top: 1px solid rgba(9, 22, 36, 0.08);
}

.family_series_content h3 {
  margin: 0 0 10px;
  font-size: 17.5px;
  color: var(--lf-0);
}

.family_series_content p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--lf-2);
  font-size: 14.2px;
  line-height: 1.6;
}

.family_custom_wrap {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 4.5vw, 68px);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--ink-2) 0%, #072a33 100%);
  border: 1px solid var(--line-2);
}

.family_custom_options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.family_custom_options li {
  position: relative;
  padding: 16px 18px 16px 44px;
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--fg-1);
  font-size: 14.6px;
}

.family_custom_options li::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(-45deg);
}

.family_custom_action {
  margin-top: 30px;
}

/* ==========================================================================
   27. CONTACT PAGE & LOCATION
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 54px;
  align-items: start;
}

.c_list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.c_list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 26px;
}

.c_list .ico {
  width: 48px;
  height: 48px;
  border-radius: var(--r-s);
}

.c_list .info {
  min-width: 0;
}

.c_list .info h3,
.c_list .info h6 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--card-muted);
}

.c_list .info p,
.c_list .info a {
  margin: 0;
  color: var(--card-fg);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.c_list .info a:hover {
  color: var(--accent);
}

.c_media {
  display: flex;
  gap: 10px;
}

.c_media a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--fg-1);
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease);
}

.c_media a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #04140f;
}

/* `.c_form` panel styling lives in 07.7 */

.c_form .i_tit {
  margin-bottom: 26px;
  text-align: left;
}

.c_form .i_tit h2,
.c_form .i_tit h3 {
  color: var(--lf-0);
  font-size: 24px;
}

.map {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--ink-2);
  min-height: 380px;
}

.map iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(0.4) contrast(1.05) brightness(0.92);
}

/* Location card sits under the map so the address is always readable,
   whether or not the third-party map embed loads. */
.map_card_wrap {
  margin-top: 22px;
}

.map_card {
  max-width: 620px;
  padding: 32px 34px;
  border-radius: var(--r-l);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line-2);
}

.map_card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  color: #fff;
}

.map_card p {
  margin: 0 0 24px;
  color: var(--fg-1);
  font-size: 15.5px;
  line-height: 1.75;
}

/* ==========================================================================
   28. QUALITY PANEL
   ========================================================================== */
.quality_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 0.6rem;
}

.quality_item {
  padding: 32px 28px;
}

.quality_item h3 {
  margin: 0 0 10px;
  font-size: 17.5px;
  color: var(--card-fg);
}

.quality_item p {
  margin: 0;
  color: var(--card-muted);
  font-size: 14.4px;
  line-height: 1.7;
}

/* ==========================================================================
   29. MISC PAGES
   ========================================================================== */

/* 404 ------------------------------------------------------------------- */
.in404 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 140px 20px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #07242b 0%, var(--ink-0) 60%);
}

.in404_text h1 {
  font-size: clamp(84px, 12vw, 180px);
  line-height: 1;
  background: linear-gradient(120deg, var(--accent), #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.in404_text h2 {
  margin: 10px 0 22px;
  font-size: clamp(20px, 2vw, 30px);
}

.in404_text p {
  max-width: 520px;
  margin: 0 auto 34px;
  color: var(--fg-2);
}

/* Thanks ---------------------------------------------------------------- */
.thanks {
  padding: 0.6rem 0 0.9rem;
  text-align: center;
}

.thanks h1,
.thanks h2 {
  margin-bottom: 20px;
}

.thanks p {
  max-width: 620px;
  margin: 0 auto 30px;
  color: var(--fg-2);
}

/* Privacy --------------------------------------------------------------- */
.privacy {
  position: relative;
}

.privacy_cont,
.box_mg {
  padding: clamp(34px, 4vw, 62px);
  border-radius: var(--r-xl);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--fg-1);
  font-size: 16px;
  line-height: 1.9;
}

.privacy_cont .tit,
.privacy_cont h2 {
  margin-bottom: 22px;
}

.privacy_cont h3 {
  margin: 1.7em 0 0.7em;
  color: #fff;
}

.privacy_cont ul {
  margin: 0 0 1.2em;
  padding-left: 1.3em;
  list-style: disc;
}

/* ==========================================================================
   30. ASIDE RAIL, ENQUIRY MODAL & STICKY BARS
   ========================================================================== */
.aside_right {
  position: fixed;
  right: -64px;
  bottom: 22%;
  z-index: 890;
  transition: right 0.45s var(--ease);
}

.aside_right.on {
  right: 14px;
}

.aside_right ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aside_right li {
  position: relative;
}

.aside_right li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(13, 18, 25, 0.92);
  border: 1px solid var(--line-2);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease), transform 0.28s var(--ease);
}

.aside_right iconify-icon {
  font-size: 21px;
}

.aside_right li:hover > a {
  background: var(--accent);
  border-color: var(--accent);
  color: #04140f;
  transform: scale(1.07);
}

.aside_right li:nth-child(1) > a {
  background: rgba(37, 211, 102, 0.16);
  border-color: rgba(37, 211, 102, 0.4);
  color: #4ade80;
}

.aside_right .back_top > a {
  background: rgba(13, 18, 25, 0.92);
}

.side_tel_box {
  position: absolute;
  top: 50%;
  right: 60px;
  display: flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: var(--r-s);
  background: rgba(13, 18, 25, 0.96);
  border: 1px solid var(--line-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s var(--ease);
}

.aside_right li:hover .side_tel_box {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.side_tel_box h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.side_tel_box a:hover {
  color: var(--accent);
}

#aside_mask_bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 960;
  background: rgba(2, 4, 7, 0.74);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

#aside_sc_from {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 970;
  width: min(800px, 92vw);
  max-height: 90vh;
  padding: 48px 44px 40px;
  overflow-y: auto;
  border-radius: var(--r-xl);
  background: var(--light-0);
  box-shadow: var(--sh-l);
  transform: translate(-50%, -50%);
}

#aside_sc_from .tit {
  margin-bottom: 26px;
}

#aside_sc_from .tit h6 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--lf-0);
}

#aside_sc_from .tit p {
  margin: 10px auto 0;
  max-width: 46ch;
  text-align: center;
  color: var(--lf-2);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Modal form — scoped by id so it never leaks into other forms */
#aside_sc_from .wpforms-container {
  margin: 0;
}

#aside_sc_from .wpforms-container-full .wpforms-form .wpforms-field {
  margin-bottom: 16px;
  padding: 0;
}

#aside_sc_from .wpforms-container-full .wpforms-form .wpforms-field-label {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lf-2);
}

#aside_sc_from .wpforms-container-full .wpforms-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#aside_sc_from .wpforms-container-full .wpforms-form select,
#aside_sc_from .wpforms-container-full .wpforms-form textarea {
  width: 100%;
  max-width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--light-line-2);
  border-radius: var(--r-s);
  background: #fff;
  color: var(--lf-0);
  font-size: 15px;
  line-height: 52px;
}

#aside_sc_from .wpforms-container-full .wpforms-form textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 18px;
  line-height: 1.7;
}

#aside_sc_from .wpforms-container-full .wpforms-form .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--accent) 0%, #7bf0dc 100%);
  color: #04140f;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: box-shadow 0.3s var(--ease);
}

#aside_sc_from .wpforms-container-full .wpforms-form .wpforms-submit:hover {
  box-shadow: var(--glow);
}

#aside_sc_from .wpforms-container-full .wpforms-form .wpforms-submit-container {
  margin: 20px 0 0;
  padding: 0;
}

.close {
  position: absolute;
  top: 22px;
  right: 22px;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--light-line-2);
  cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}

.close::before,
.close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--lf-0);
}

.close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close:hover {
  background: var(--light-2);
  transform: rotate(90deg);
}

/* Mobile action bar (rendered by template-parts/sticky_footer.php) */
.footer_phone_show {
  display: none;
}

.footer_phone {
  display: flex;
}

.footer_phone li {
  flex: 1 1 0;
}

.footer_phone a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  background: var(--ink-2);
  border-top: 1px solid var(--line-2);
  color: var(--fg-1);
  font-size: 14px;
}

.footer_phone li + li a {
  border-left: 1px solid var(--line);
}

.footer_phone a:active {
  background: var(--ink-3);
}

/* Keep WOW.js / Swiper reveal animations smooth */
.wow,
.ani {
  will-change: transform, opacity;
}

/* ==========================================================================
   31. RESPONSIVE
   Global breakpoint architecture: 1440 → 1200 → 1025 → 900 → 768 → 560.
   Rules are grouped per module inside each breakpoint.
   ========================================================================== */

/* ---------- ≤1440 ------------------------------------------------------- */
@media screen and (max-width: 1440px) {
  :root {
    --maxw: 1200px;
  }

  /* 17. laboratory */
  .laboratory_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 22. footer */
  .f_box {
    gap: 40px;
  }
}

/* ---------- ≤1200 ------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  :root {
    --header-height: 72px;
    --maxw: 1080px;
  }

  /* 08. header */
  .brand_text b {
    font-size: 21px;
  }

  /* 09. navigation */
  .i_nav > li > a {
    padding: 10px 11px;
    font-size: 14.5px;
  }

  /* 12. products · 25.5 product listing */
  .product_mosaic {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 16px;
  }

  .product_tile_body {
    padding: 22px;
  }

  .product_tile_title {
    font-size: 18px;
  }

  .product_tile_large .product_tile_title {
    font-size: 23px;
  }

  .led_product_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 13. applications · 25.6 · 26 · 28 — three-up grids become two-up */
  .in_n_list,
  .advantage_grid,
  .why_choose_grid,
  .quality_grid,
  .i_reviews_list,
  .home_news_grid,
  .product_family_grid,
  .family_series_grid,
  .product_application_grid,
  .custom_solution_capability_grid,
  .application_grid,
  .project_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product_feature_grid,
  .custom_solution_process_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 17. laboratory */
  .laboratory_grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 22. footer */
  .f_box {
    grid-template-columns: 1fr 1fr;
    gap: 46px;
  }

  /* 16. factory · 26. family/intro · 27. contact */
  .product_content_grid,
  .about_box,
  .family_intro_wrap,
  .custom_solution_intro_wrap,
  .project_contact_wrap,
  .contact {
    grid-template-columns: 1fr;
  }

  .led_custom_wrap,
  .family_intro_wrap,
  .custom_solution_intro_wrap,
  .project_contact_wrap,
  .about_box,
  .product_content_grid {
    gap: 40px;
  }

  /* 14. customisation — the copy column no longer fits beside the shot, so
     the band stacks: copy, then the feature shot, then the numbered tiles. */
  .led_custom_wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "feature"
      "tiles";
  }

  /* 14. customisation — as the tiles narrow, the bar leaves the overlay and
     becomes a panel under the image. The feature shot keeps its bar on the
     photo: it stays far larger than a tile. */
  .led_custom_gallery li {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
  }

  .led_custom_gallery img {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .led_custom_gallery .led_custom_cap {
    position: static;
    /* flex-grow keeps the bars of a row the same height when one tile carries
       a longer label than its neighbour */
    flex: 1 1 auto;
  }

  /* 25.7 specifications */
  .product_spec_list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---------- ≤1024 (tablet / nav collapse) ------------------------------- */
@media screen and (max-width: 1024px) {
  /* 08. header — the inline nav is hidden, so the row can breathe again */
  .top {
    gap: 18px;
  }

  /* 09. navigation */
  .main_nav {
    display: none;
  }

  .nav_menu {
    display: block;
  }

  .drop_cont {
    display: none;
  }

  .menu_overlay .i_nav .sub-menu {
    display: none;
  }

  /* 24.2 single article — sidebar drops below the article */
  .in_news_cont {
    gap: 26px;
  }

  .post_content,
  .post_recommend {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .banner-button-prev,
  .banner-button-next {
    display: none;
  }

  /* 12. products — two columns; the lead series becomes a wide banner */
  .product_mosaic {
    grid-template-columns: 1fr 1fr;
  }

  .product_tile_large {
    grid-row: auto;
    grid-column: span 2;
    aspect-ratio: 21 / 9;
  }

  /* 19. quality assurance + FAQ — the title column stacks above the content */
  .band_split {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

/* ---------- ≤900 -------------------------------------------------------- */
@media screen and (max-width: 900px) {
  :root {
    --gutter: 5.5%;
  }

  /* 24. news & archive cards stack */
  .in_case_list > li > a,
  .in_p_list > li > a,
  .in_search_list > li > a {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 17. laboratory · 25.4 · 25.6 · 26 · 28 */
  .laboratory_grid,
  .product_feature_grid,
  .product_application_grid,
  .custom_solution_process_grid,
  .custom_solution_capability_grid,
  .application_grid,
  .project_grid,
  .quality_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 24.2 single article meta */
  .n_tit_time > p,
  .n_share p,
  .n_share {
    font-size: 12.5px;
  }

  /* 26. closing panel: checklist and call to action stack */
  .custom_solution_closing_inner {
    grid-template-columns: 1fr;
  }

  .custom_solution_brief_inner {
    padding-right: 0;
    padding-bottom: 30px;
  }

  .custom_solution_cta_inner {
    padding-left: 0;
    padding-top: 30px;
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }

  .custom_solution_cta_inner:only-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- ≤768 -------------------------------------------------------- */
@media screen and (max-width: 768px) {
  :root {
    --gutter: 6%;
    --header-height: 64px;
  }

  body {
    font-size: 15.5px;
  }

  /* 08. header */
  .top {
    gap: 12px;
  }

  .brand_text b {
    font-size: 19px;
  }

  .brand_text em {
    display: none;
  }

  .brand_mark {
    width: 34px;
    height: 34px;
  }

  .top_quote {
    margin-left: 0;
    padding: 11px 16px;
  }

  .nav_menu {
    margin-left: 0;
  }

  /* the label is replaced by the mail icon on narrow screens */
  .top_quote span,
  .top_quote::after {
    display: none;
  }

  .top_quote_icon {
    display: block;
  }

  .banner_content {
    padding: 108px 0 84px;
  }

  .banner_content h1,
  .banner_content h4,
  .banner_desc {
    max-width: 100%;
  }

  .banner-pagination {
    bottom: 26px;
  }

  /* 12–20. home grids collapse to a single column */
  .in_n_list,
  .led_product_grid,
  .product_family_grid,
  .family_series_grid,
  .advantage_grid,
  .why_choose_grid,
  .quality_grid,
  .i_reviews_list,
  .home_news_grid,
  .product_feature_grid,
  .product_application_grid,
  .custom_solution_capability_grid,
  .custom_solution_process_grid,
  .application_grid,
  .project_grid,
  .laboratory_grid {
    grid-template-columns: 1fr;
  }

  /* 26. custom solutions page */
  .custom_solution_closing_inner {
    padding: 34px 26px;
  }

  .custom_solution_intro_image,
  .custom_solution_intro_image img {
    min-height: 280px;
  }

  /* 14. customisation — two tiles per row leave the caption panel wider than
     the picture it introduces, so the mosaic goes one-up from here down */
  .led_custom_gallery {
    grid-template-columns: 1fr;
  }

  .led_custom_gallery img {
    aspect-ratio: 16 / 10;
  }

  /* 21. · 27. forms */
  .project_contact_form,
  .c_form,
  #aside_sc_from {
    padding: 26px 22px;
  }

  /* 22. footer */
  .f_box {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .f_copy .wrap {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* 30. aside rail */
  .aside_right {
    top: 50%;
    bottom: auto;
    right: -60px;
  }

  .aside_right.on {
    right: 10px;
  }

  .aside_right li > a {
    width: 44px;
    height: 44px;
  }

  .side_tel_box {
    display: none;
  }

  .footer_phone_show {
    display: block;
  }

  /* 25.7 specifications */
  .product_spec_row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .product_spec_row dd,
  .product_spec_row > span:last-child {
    text-align: left;
  }
}

/* ---------- ≤560 -------------------------------------------------------- */
@media screen and (max-width: 560px) {
  /* 08. header — tighten further so the menu button always stays on screen */
  .top {
    gap: 8px;
  }

  .brand_text b {
    font-size: 17px;
  }

  .top_quote {
    padding: 10px 13px;
  }

  /* 05. buttons */
  .site_btns {
    flex-direction: column;
    align-items: stretch;
  }

  .site_btn {
    justify-content: center;
    width: 100%;
  }

  /* 09. search */
  .top_search_btn {
    padding: 0 20px;
  }

  /* 29. misc pages */
  .in404 {
    padding: 120px 20px 90px;
  }

  /* 27. location */
  .map iframe {
    height: 340px;
  }

  /* 12. products — one tile per row */
  .product_mosaic {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product_tile_large {
    grid-column: auto;
    aspect-ratio: 16 / 10;
  }

  .product_tile_body {
    padding: 20px;
  }

  .product_tile_title {
    font-size: 17px;
  }

  .product_tile_large .product_tile_title {
    font-size: 21px;
  }

  /* 14. customisation — single-column tiles: tighter gaps and a slightly
     slimmer caption bar for the phone */
  .led_custom_gallery {
    gap: 12px;
  }

  .led_custom_gallery .led_custom_cap {
    padding: 14px 16px;
  }

  /* 19. quality assurance — one test card per row */
  .laboratory_tests {
    grid-template-columns: 1fr;
  }
}

/* ---------- Reduced motion --------------------------------------------- */
/* ---------- ≤365 (very small phones) ------------------------------------ */
@media screen and (max-width: 365px) {
  /* the mark alone identifies the brand; keeping the wordmark would push the
     menu button off screen */
  .brand_text {
    display: none;
  }
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}