/* ==========================================================================
   ZIONY d.o.o. — static rebuild
   --------------------------------------------------------------------------
   Every colour, size, spacing and radius in this file is taken verbatim from
   the WordPress export `zionyeu_wp881.sql`:

     * wp37_postmeta._elementor_data  -> post 974 (Home), 975 (About Us),
                                         978 (Contacts), 218 (Header),
                                         200 (Footer)
     * Elementor's own generated stylesheets that shipped with the site
       (wp-content/uploads/elementor/css/post-974.css, post-975.css,
        post-978.css, post-200.css, post-218.css, post-6.css)
     * theme defaults from themes/royal-elementor-kit/style.css

   Elementor element IDs are quoted in the comments so any rule can be traced
   back to the exact widget it came from.
   ========================================================================== */


/* ==========================================================================
   1. Fonts
   Ziony1 = Audiowide (uploaded as a custom font, meta post 1430)
   Poppins / Kanit were served locally by Elementor; the same subsets
   (latin + latin-ext, needed for č/š/ž) are bundled here.
   ========================================================================== */

/* --- Ziony1 (Audiowide) — bsf_custom_fonts post 1430, weight 200 --------- */
@font-face {
  font-family: 'Ziony1';
  font-style: normal;
  font-weight: 200;
  src: url('assets/fonts/Audiowide-Regular.ttf') format('truetype');
  font-display: swap;
}

/* --- Poppins ------------------------------------------------------------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(assets/fonts/poppins-01952428.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(assets/fonts/poppins-4348c405.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/poppins-25f6a6d7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/poppins-e215b6a9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/poppins-1185dc6d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/poppins-ae4d1a33.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/poppins-db01bbbc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/poppins-95fdc599.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Kanit --------------------------------------------------------------- */
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(assets/fonts/kanit-cd0b038c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(assets/fonts/kanit-4694a124.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/kanit-4a1d2c19.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/kanit-ceceadae.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/kanit-da8a4b44.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/kanit-ac02c814.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/kanit-754e92c3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/kanit-edc3d096.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Font Awesome 5 (only the two families the site actually used) -------- */
@font-face {
  font-family: 'FA5 Regular';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(assets/fonts/fa-regular-400.woff2) format('woff2');
}
@font-face {
  font-family: 'FA5 Solid';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(assets/fonts/fa-solid-900.woff2) format('woff2');
}

.fa-r,
.fa-s {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.fa-r { font-family: 'FA5 Regular'; font-weight: 400; }
.fa-s { font-family: 'FA5 Solid';   font-weight: 900; }

/* Glyphs actually used in the markup. The set the removed one-page rail
   needed (home, building, user, user-circle, wrench, people-carry, history)
   went with it. */
.fa-envelope::before      { content: "\f0e0"; }  /* far/fas fa-envelope, from the export */
.fa-address-book::before  { content: "\f2b9"; }  /* far fa-address-book, from the export */
.fa-award::before         { content: "\f559"; }  /* fas fa-award,         closing band   */
.fa-shipping-fast::before { content: "\f48b"; }  /* fas fa-shipping-fast, closing band   */
.fa-headset::before       { content: "\f590"; }  /* fas fa-headset,       closing band   */
.fa-shield-alt::before    { content: "\f3ed"; }  /* fas fa-shield-alt,    warranty page  */
.fa-clock::before         { content: "\f017"; }  /* far fa-clock,         brand page     */
.fa-check-circle::before  { content: "\f058"; }  /* fas fa-check-circle,  brand page     */
.fa-times-circle::before  { content: "\f057"; }  /* fas fa-times-circle,  brand page     */
.fa-file-pdf::before      { content: "\f1c1"; }  /* fas fa-file-pdf,      brand downloads*/
.fa-download::before      { content: "\f019"; }  /* fas fa-download,      brand downloads*/
.fa-broadcast-tower::before { content: "\f519"; }  /* fas, product page          */
.fa-sliders-h::before     { content: "\f1de"; }  /* fas, product page          */
.fa-volume-down::before   { content: "\f027"; }  /* fas, product page          */
.fa-tools::before         { content: "\f7d9"; }  /* fas, product page          */
.fa-keyboard::before      { content: "\f11c"; }  /* fas, product page          */
.fa-lightbulb::before     { content: "\f0eb"; }  /* fas, product page          */
.fa-box-open::before      { content: "\f49e"; }  /* fas, product card          */
.fa-mouse::before          { content: "\f8cc"; }  /* fas, mouse pages           */
.fa-crosshairs::before     { content: "\f05b"; }  /* fas, mouse pages           */
.fa-bolt::before           { content: "\f0e7"; }  /* fas, mouse pages           */
.fa-magnet::before         { content: "\f076"; }  /* fas, mouse pages           */
.fa-battery-full::before   { content: "\f240"; }  /* fas, mouse pages           */
.fa-wifi::before           { content: "\f1eb"; }  /* fas, mouse pages           */
.fa-volume-off::before     { content: "\f026"; }  /* fas, mouse pages           */
.fa-feather::before        { content: "\f52d"; }  /* fas, mouse pages           */
.fa-sync::before           { content: "\f021"; }  /* fas, mouse pages           */


/* ==========================================================================
   2. Colour palette
   --------------------------------------------------------------------------
   The export had grown several near-duplicate values for the same job — two
   brand blues, three off-whites, three "dark heading" greys — so each role
   now has exactly one token and every rule below refers to it. The values
   themselves are the ones that already dominated the design:

     #0059AC  used 11x (buttons, nav hover, separators, icons)  <- kept
     #015AF2  used  2x (About eyebrows, burger hover)           -> #0059AC
     #ECECEC  hero body copy on dark                            <- kept
     #EEECEC  About team body copy on dark                      -> #ECECEC
     #E6E6E6  footer contact line                               -> #ECECEC
     #00092A  About headings                                    <- kept
     #222222  Contact icon-box title                            -> #00092A
     #333333  theme default for every other heading             -> #00092A
     #666666  About/Contact body copy                           <- kept as the
              single body colour (Home copy used to inherit #333333)
   ========================================================================== */

:root {
  /* Brand */
  --c-blue:        #0059AC;   /* buttons, accents, hover, icons        */
  --c-blue-soft:   #DEE3F1;   /* button hover fill (button_hover_bg)   */
  --c-navy:        #00092A;   /* headings and dark text on light       */

  /* Text */
  --c-text:        #666666;   /* body copy on light backgrounds        */
  --c-text-light:  #ECECEC;   /* body copy on dark backgrounds         */
  --c-muted:       #727A92;   /* footer fine print                     */

  /* Neutrals */
  --c-white:       #FFFFFF;
  --c-border:      #E8E8E8;   /* button/hover borders                  */
}


/* ==========================================================================
   3. Theme base — royal-elementor-kit/style.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1rem;              /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-text);
  background-color: var(--c-white);  /* _elementor_page_settings: var(--c-white) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: .5rem;
  margin-bottom: 1rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  /* the theme had `color: inherit`, which left Home's headings at the body
     grey while About's were navy — one heading colour for the whole site */
  color: var(--c-navy);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { margin-top: 0; margin-bottom: .9rem; }
/* the theme's default link purple (#605be5 / #333366) never matched the
   brand — a stray link inside body copy now picks up the brand blue */
a { background-color: transparent; color: var(--c-blue); }
a:hover, a:active { color: var(--c-navy); }
img { border-style: none; max-width: 100%; height: auto; }
strong, b { font-weight: bolder; }
hr { box-sizing: content-box; height: 0; overflow: visible; }


/* ==========================================================================
   3. Elementor layout primitives (post-6.css = the active kit)
      --container-max-width: 1140px, widget spacing 20px
   ========================================================================== */

:root {
  --container-max-width: 1140px;
  --widget-spacing: 20px;
}

/* -- classic section / column / widget model ------------------------------ */
.section { position: relative; }

.section > .container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
}

.column {
  display: flex;
  min-height: 1px;
  position: relative;
  width: 100%;
}
.column > .col-inner {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}
/* gap "default" (10px) and gap "wide" (20px) — Elementor `gap` setting */
.gap-default > .container > .column > .col-inner { padding: 10px; }
.gap-wide    > .container > .column > .col-inner { padding: 20px; }

/* Elementor: `.elementor-widget:not(:last-child){margin-block-end:20px}`
   (kit post 6 sets --kit-widget-spacing to 20px; it applies on top of the
   flex/grid gap, exactly as it did on the live site) */
.col-inner > *:not(:last-child),
.con--full > *:not(:last-child),
.con--grid > *:not(:last-child),
.con-inner > *:not(:last-child) { margin-block-end: var(--widget-spacing); }

/* -- flex / grid container model (Elementor "container" element) ---------- */
.con {
  --content-width: min(100%, var(--container-max-width));
  --gap: var(--widget-spacing);
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 10px;               /* Elementor container default padding */
}
.con > .con-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;
}
/* content_width: "full" — no inner max-width wrapper */
.con--full { gap: var(--gap); }

.con--grid { display: grid; gap: var(--gap); }

/* Elementor helper: widget with an explicit width keeps its own box */
.w-initial { flex-grow: 0; flex-shrink: 0; }

/* -- headings & rich text as Elementor renders them ----------------------- */
.heading { line-height: 1; margin: 0; padding: 0; }

/* Section titles carried no size of their own, so they fell back to the
   browser default for whatever tag the export happened to use — 40px where
   it said h1, 32px where it said h2, for headings doing the same job. One
   explicit size keeps them consistent no matter which tag they sit on. */
.home-partners-title,
.home-about-title,
.home-numbers-title,
.home-cta-title {
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.4px;
}
@media (max-width: 767px) {
  .home-partners-title,
  .home-about-title,
  .home-numbers-title,
  .home-cta-title { font-size: 29px; }
}

/* text-editor widget keeps normal paragraph rhythm */
.text p:last-child { margin-bottom: 0; }

/* -- default Elementor button --------------------------------------------- */
.btn {
  /* Elementor's own default is the grey #69727d; every button on the site
     overrides it with the brand blue, so the fallback is on-brand too */
  background-color: var(--c-blue);
  border-radius: 3px;
  color: var(--c-white);
  display: inline-block;
  fill: var(--c-white);
  font-size: 15px;
  line-height: 1;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  border: none;
  cursor: pointer;
}
.btn:hover, .btn:focus, .btn:visited { color: var(--c-white); }
.btn-inner { display: flex; flex-direction: row; gap: 5px; justify-content: center; align-items: center; }

/* -- responsive visibility (Elementor hide_* controls) --------------------- */
@media (max-width: 767px)  { .hide-mobile  { display: none !important; } }
@media (max-width: 1024px) and (min-width: 768px) { .hide-tablet { display: none !important; } }
@media (max-width: 1366px) and (min-width: 1025px) { .hide-laptop { display: none !important; } }
@media (min-width: 1367px) { .hide-desktop { display: none !important; } }


/* ==========================================================================
   4. Header — Elementor template post 218, section 6f3b49c
   ========================================================================== */

/* The header is a transparent bar meant to sit ON the hero image: the nav has
   `_background_color:#0059AC00` and white menu text, and all three pages pull
   their hero up underneath it with a negative top margin. Taking it out of
   flow is what makes that work — each hero then starts at y=0 and its own
   `padding_laptop` (80px on Home = the header height) keeps the heading clear
   of the logo instead of running underneath it. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

.site-header > .container {
  max-width: 1149px;            /* content_width 1149px */
  align-items: center;
  padding: 0 20px;              /* padding_laptop — see note in §10 */
}

/* column fa08eb9 : 50.696%  |  column 8cf3f0e : 49.262% (_inline_size_laptop 44%) */
.header-col-logo { width: 50.696%; }
.header-col-nav  { width: 44%; }
.header-col-logo > .col-inner,
.header-col-nav  > .col-inner { padding: 10px; justify-content: center; }
.header-col-nav  > .col-inner { align-items: flex-end; }

/* wpr-logo 02969f2 : max-width 200px, _margin_laptop 0 */
.header-logo { margin-left: 0; text-align: left; }
.header-logo img { max-width: 200px; width: 200px; display: block; }

/* wpr-nav-menu ce52ac8 : _element_custom_width_laptop 402px, _margin_laptop 0 */
.header-nav {
  width: 402px;
  max-width: 402px;
  margin-right: 0;
  align-self: center;
  flex-grow: 0;
  flex-shrink: 0;
}
.header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;      /* menu_align: center */
  align-items: center;
}
.header-nav li { margin: 0 5px; }
.header-nav a {
  display: block;
  padding: 10px 7px;            /* menu_items_padding_vr 10 / _hr 5 -> 7px sides */
  font-family: 'Ziony1', Sans-serif;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  word-spacing: 0;
  color: var(--c-white);               /* menu_item_color */
  text-decoration: none;
  transition: color .2s;
}
.header-nav a:hover,
.header-nav a.is-current { color: var(--c-blue); }   /* menu_item_color_hover */

/* mobile burger — toggle_btn_* controls */
.nav-toggle {
  display: none;
  width: 28px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background-color: transparent;  /* toggle_btn_bg_color #0A73BB00 = alpha 0 */
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  margin-bottom: 7px;
  background-color: var(--c-white);
  transition: background-color .3s;
}
.nav-toggle span:last-child { margin-bottom: 0; }
.nav-toggle:hover span { background-color: var(--c-blue); }  /* was #015AF2 */

/* mobile drop-down panel — mobile_menu_bg_color #FFFFFF / color #000000 */
.header-nav .mobile-panel { display: none; }


/* ==========================================================================
   5. Footer — Elementor template post 200, section e8c4149
   ========================================================================== */

.site-footer {
  position: relative;
  background-image: url('assets/img/footer-bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 130px 20px 30px 20px;   /* padding_laptop — see note in §10 */
  z-index: 0;
}
/* The hero melts into white at the top of the page; the footer met the white
   content above it with a hard edge. This fades the white down into the dark
   panel, so both ends of the page dissolve the same way. Footer content
   starts at 130px, by which point the overlay is down to ~1% and invisible.

   Two details matter, and both showed as a visible line without them:
   - the footer lands on a fractional pixel (…464.24), so a 1px sliver of the
     photograph used to bleed through the seam. `top:-2px` overlaps it.
   - a gradient that leaves pure white at 0% with a steep initial slope kinks
     against the flat white above it and the eye reads that kink as an edge.
     The stops below trace a smoothstep curve, flat at both ends, so the ramp
     starts and finishes without a corner. */
.site-footer::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 142px;
  background: linear-gradient(to bottom,
              rgba(255, 255, 255, 1)    0%,
              rgba(255, 255, 255, .972) 10%,
              rgba(255, 255, 255, .896) 20%,
              rgba(255, 255, 255, .784) 30%,
              rgba(255, 255, 255, .648) 40%,
              rgba(255, 255, 255, .5)   50%,
              rgba(255, 255, 255, .352) 60%,
              rgba(255, 255, 255, .216) 70%,
              rgba(255, 255, 255, .104) 80%,
              rgba(255, 255, 255, .028) 90%,
              rgba(255, 255, 255, 0)    100%);
  pointer-events: none;
  z-index: 0;
}
.site-footer > .container { position: relative; z-index: 1; }
@media (min-width: 1367px) {
  .site-footer { background-attachment: fixed; }
}
.site-footer > .container { max-width: 1131px; }
/* column 436c69d : padding 0 */
.site-footer > .container > .column > .col-inner { padding: 0; }

/* inner section 573759f : two 50% columns (0e46083 / 3f019c0) */
.footer-inner { width: 100%; display: flex; flex-wrap: wrap; padding: 0 20px; }
.footer-col { width: 50%; display: flex; }
.footer-col > .col-inner { padding: 10px; }
.footer-col-contact > .col-inner { justify-content: center; align-items: center; }

/* wpr-logo 0d4662a : max-width 329px — capped at 100% so it cannot push the
   page wider than the viewport on phones narrower than 329px */
.footer-logo img {
  width: 329px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* text-editor 9fb914f : © line */
.footer-copy {
  width: 80%;
  max-width: 80%;
  margin: -40px 0 0 37px;
  text-align: start;
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-muted);
  flex-grow: 0;
  flex-shrink: 0;
}

/* heading 30fb571 "Contacts" */
.footer-heading {
  width: 92.803%;
  max-width: 92.803%;
  text-align: start;
  font-family: 'Kanit', Sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--c-white);
}

/* icon-list fa9207e : info@ziony.eu */
.footer-list {
  width: 92%;
  max-width: 92%;
  margin: 20px;
  list-style: none;
  padding: 0;
}
.footer-list li { display: flex; align-items: center; gap: 8px; }
.footer-list .fa-r,
.footer-list .fa-s { color: var(--c-white); font-size: 15px; }
.footer-list a,
.footer-list span {
  font-family: 'Poppins', Sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--c-text-light);       /* was #E6E6E6 */
  text-decoration: none;
  transition: color .3s;
}


/* ==========================================================================
   6. Shared Royal Elementor widgets
   ========================================================================== */

/* -- wpr-separator: text between two rules -------------------------------- */
.separator { display: flex; justify-content: center; }
.separator-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.separator-wrap .line-before,
.separator-wrap .line-after { flex: 1 1 0; min-width: 0; }
.separator-wrap .line-before { margin-right: 3px; }
.separator-wrap .line-after  { margin-left: 3px; }
.separator-wrap hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-blue);    /* separator_line_color */
}
.separator-wrap p {
  margin: 0;
  font-family: 'Ziony1', Sans-serif;
  font-size: 20px;
  font-weight: 400;
}


/* -- Elementor image carousel --------------------------------------------- */
.carousel { position: relative; width: 100%; }
.carousel-viewport { overflow: hidden; width: 100%; }
.carousel-track {
  display: flex;
  align-items: center;             /* gallery_vertical_align: center */
  /* Elementor default was 500ms. With the strip now stepping every 670ms
     (brands) and 1000ms (partners), a half-second move left almost no
     settled moment between steps and the row read as restless. */
  transition: transform .35s ease;
}
.carousel-slide {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;                 /* image_spacing_custom 20px -> 10px per side */
}
.carousel-slide img { display: block; width: 100%; height: auto; }
/* A linked logo wraps its image in an <a>, which is inline by default — the
   image's width:100% would then resolve against a shrink-to-fit box and the
   slide would collapse. The anchor has to carry the slide's full width. */
.carousel-slide a {
  display: block;
  width: 100%;
  line-height: 0;
}
.carousel-slide a:focus-visible { outline-offset: 6px; }

/* arrows — navigation defaults to "Arrows and Dots" */
/* The arrows used to hang 20px outside the track, which pushed the document
   wider than the viewport wherever the carousel was full-bleed. They now sit
   inside it, on a soft plate so they stay readable on top of a logo. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--c-navy);
  box-shadow: 0 2px 10px rgba(0, 9, 42, .16);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  z-index: 2;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.carousel-arrow:hover {
  background: var(--c-white);
  box-shadow: 0 4px 16px rgba(0, 9, 42, .26);
  transform: translateY(-50%) scale(1.08);
}
.carousel-arrow-prev { left: 0; }
.carousel-arrow-next { right: 0; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(0, 9, 42, .18);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}
.carousel-dots button:hover { background: rgba(0, 9, 42, .38); }
/* the current slide reads as a short bar in brand blue */
.carousel-dots button.is-active {
  width: 22px;
  background: var(--c-blue);
}

/* -- wpr-advanced-text, text_type "clip" (widget 5cc28d3) ----------------- */
.adv-text { display: block; margin: 0; }
.anim-text {
  display: inline-flex;
  align-items: baseline;
  vertical-align: middle;
}
.anim-text-inner {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  animation: clip-reveal 2s infinite;   /* animated_duration_b: 2 */
}
.anim-text-inner b { font-weight: inherit; }
.anim-text-cursor {
  display: inline-block;
  animation: cursor-blink .7s infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes clip-reveal {
  0%   { max-width: 0; }
  35%  { max-width: 100%; }
  75%  { max-width: 100%; }
  100% { max-width: 0; }
}


/* ==========================================================================
   7. HOME — Elementor post 974
   ========================================================================== */

/* -- hero, section 73ce2a4 ------------------------------------------------ */
.home-hero {
  background-image: url('assets/img/hero-bg.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;                    /* was -101px: the pull-under is now done
                                       by the absolutely positioned header */
  margin-bottom: 0;
  /* padding_laptop is 80px on top, exactly the header height, so the heading
     ended up flush against the logo. 140px gives it 60px of clearance. */
  padding: 140px 20px 70px 20px;
  overflow: hidden;                 /* contains the globe's -546px right pull */
  transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
/* height: "full" in the export. The 100vh floor was there because the hero
   column used to run past the viewport — the brand strip sat 244px below the
   globe. That strip is now its own section further down, so 100vh left a
   couple of hundred pixels of empty background between the globe and
   Partnerships. The hero is sized by its content instead; the globe's bottom
   margin below is what makes that measurement honest. */
.home-hero > .container { max-width: 1094px; }

/* column 4350afe : margin_laptop 0, padding 0 */
.home-hero > .container > .column > .col-inner {
  margin: 0;
  padding: 0;
}

/* heading e47a002 */
.home-hero-eyebrow {
  font-family: 'Poppins', Sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-white);
}

/* wpr-advanced-text 5cc28d3 */
.home-hero-title {
  margin: -6px;
  text-align: left;
  color: var(--c-white);
}
.home-hero-title .anim-text,
.home-hero-title .anim-text b,
.home-hero-title .anim-text-cursor {
  font-family: 'Ziony1', Sans-serif;
  font-size: 70px;
  color: var(--c-white);
}

/* text-editor ccf2935 */
.home-hero-text {
  width: 86.192%;
  max-width: 86.192%;
  padding: 0 512px 0 0;             /* _padding_laptop */
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text-light);
  flex-grow: 0;
  flex-shrink: 0;
}

/* wpr-button fbb05d1 "About us" */
.home-hero-btn-wrap {
  width: 17.723%;
  max-width: 17.723%;
  margin: 11px 0 0 0;
  padding: 0;
  border-radius: 9px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
  text-align: left;
  flex-grow: 0;
  flex-shrink: 0;
}
.btn-wpr {
  display: block;
  position: relative;
  width: 100%;
  max-width: 229px;                       /* button_width */
  overflow: hidden;
  padding: 10px;                          /* button_padding */
  text-align: center;
  text-decoration: none;
  background-color: var(--c-blue);              /* button_bg_color_color */
  color: var(--c-white);                         /* button_color */
  border-radius: 10px;                    /* button_border_radius */
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .5);
  font-family: 'Poppins', Sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .5px;
  word-spacing: 1px;
  transition: all .2s;
}
.btn-wpr:hover {
  background-color: var(--c-blue-soft);              /* button_hover_bg_color_color */
  color: var(--c-navy);                         /* button_hover_color */
  transform: scale(1.1);                  /* elementor-animation-grow */
}

/* html widget edec0f8 — the interactive globe iframe (_margin_laptop) */
/* _margin_laptop is -383/-546/-336/17. The top and right pulls are what
   place the globe; the -336px bottom pull only shortened the reported
   height of the column, which is exactly what left the gap below it. */
.home-hero-globe { margin: -383px -546px 0 17px; }
.home-hero-globe iframe {
  border: none;
  background: transparent;
  display: block;
  width: 100%;
  height: 540px;
}

/* -- "Top Selling Brands", image-carousel ebcbe22 -------------------------
   Originally the last widget inside the hero column (container 4a37925),
   sitting 244px below the button with no label of its own. It is now a
   section in its own right, below Partnerships, so the page reads: who
   ZIONY works with, then what ZIONY sells.

   The logos are deliberately not links. For a distributor the right
   destination is a judgement call — the manufacturer's global site, or
   ZIONY's own catalogue page for that brand — and that is the client's
   call to make, not something to guess at. */
.home-brands {
  width: 100%;
  padding: 50px 0 80px 0;
}
.home-brands-title {
  text-align: center;
  font-family: 'Poppins', Sans-serif;
  font-weight: 600;
  margin-bottom: 34px;
}
/* 150x150 thumbs (thumbnail_custom_dimension), radius 9px from the export.
   Capped at their native size so they never upscale and blur. */
.home-brands .carousel {
  max-width: var(--container-max-width);
  margin-inline: auto;
}
.home-brands .carousel-viewport { padding-inline: 40px; }
.home-brands .carousel-slide img {
  border-radius: 9px;
  max-width: 150px;
  margin-inline: auto;
}
.home-brands .carousel-slide { justify-content: center; }
.home-brands .carousel-arrow { color: var(--c-navy); }

/* -- "Partnerships", container 7eebc3c ------------------------------------ */
.home-partners {
  width: 100%;
  padding: 60px 0 70px 0;
  flex-grow: 0;
  flex-shrink: 0;
}
/* heading cbcc563 */
.home-partners-title {
  text-align: center;
  font-family: 'Poppins', Sans-serif;
  font-weight: 600;
}
/* text-editor 86c64e0 — the export used a fixed `padding: 0 230px`, which
   holds the measure at one width and then collapses to 0 at the mobile
   breakpoint. A max-width narrows the line length smoothly instead. */
.home-partners-text {
  max-width: 680px;
  margin-inline: auto;
  padding: 0;
  text-align: center;
  font-size: 18px;
  line-height: 1.65;
}
/* image-carousel bf2b7e9.
   Two things were wrong here. The container is full-bleed, so the strip ran
   the whole width of the window (1905px at 1920) while the paragraph above it
   is 680px. And the logos were a mixed bag: ten square 150x150 files, most of
   them mostly empty padding, plus two wide wordmarks. Every slide was a
   different shape and the row looked ragged.

   The images are now all pre-rendered onto one 480x150 canvas with the dead
   margin trimmed off, so a single rule sizes every slide identically and the
   markup carries the same width/height on each.

   4 per view, not 7. Trimming the padding made the four logos that had a
   white background baked in much shorter than the 72px squares they used to
   be, so the strip had to open up again to bring them back. Each logo now
   renders about 2.1x larger than in the original strip.

   That magnification is past what the old files hold - most carry only
   21-67px of real artwork - so they are run through an unsharp pass when
   the canvas is built. It restores the edge contrast that enlargement
   softens, but it cannot add detail that was never there. Higher-resolution
   originals are the only real fix for those ten. */
.home-partners .carousel {
  max-width: var(--container-max-width);
  margin-inline: auto;
}
.home-partners .carousel-slide { justify-content: center; }
.home-partners .carousel-slide img {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.home-partners .carousel-viewport { padding-inline: 40px; }
@media (max-width: 767px) {
  /* 80px of gutter is a lot out of a 360px strip */
  .home-partners .carousel-viewport { padding-inline: 26px; }
}

/* -- "About ZIONY" grid, container a589508 (boxed grid, 2 cols x 1 row) --- */
.home-about {
  padding: 50px 0;
  background-image: url('assets/img/section-bg.png');   /* slideshow gallery, single image */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.home-about > .con-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: var(--widget-spacing);
}
.home-about img { justify-self: center; align-self: center; }
/* inner container 306b2f9 (content_width "full") */
.home-about-inner { display: flex; flex-direction: column; padding: 10px; gap: var(--widget-spacing); }
/* separator 716fd62 */
.home-about .separator-wrap p { color: var(--c-white); }
/* heading 3e057b6 */
.home-about-title {
  font-family: 'Poppins', Sans-serif;
  font-weight: 600;
  color: var(--c-white);
}
/* text-editor b2377eb */
.home-about-text { font-size: 18px; color: var(--c-white); }
/* button 58a3dec */
.home-about-btn {
  width: 204.25px;                  /* _element_custom_width_laptop */
  max-width: 204.25px;
  margin: 11px 0 0 0;
  padding: 0;
  border-radius: 9px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
  align-self: flex-start;
  flex-grow: 0;
  flex-shrink: 0;
}
.home-about-btn .btn {
  background-color: var(--c-blue);
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, .5);
  border-radius: 9px;
  padding: 14px 58px 14px 48px;
  width: 100%;
}
.home-about-btn .btn:hover { border-color: var(--c-border); }

/* -- "Our Performance in Numbers", container 427478f ---------------------- */
.home-numbers {
  border-radius: 9px;
  margin: 0;
  padding: 120px 0;
  width: 100%;
  align-self: center;
}
/* flex_direction column, flex_justify_content space-around, flex_align_items center */
.home-numbers > .con-inner {
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
@media (min-width: 768px) {
  .home-numbers > .con-inner { max-width: 1200px; }   /* boxed_width 1200px */
}
.home-numbers .separator-wrap p { color: var(--c-navy); }
/* heading d00172a */
.home-numbers-title {
  padding: 0 0 50px 0;
  font-family: 'Poppins', Sans-serif;
  font-weight: 600;
}
/* inner grid 771cb61 — one cell per figure, each holding its own label,
   separated by a hairline rather than left to float in a bare grid */
.home-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: var(--container-max-width);   /* nested boxed container */
  margin-inline: auto;
}
.stat-item {
  text-align: center;
  padding: 8px 24px;
}
.stat-item + .stat-item { border-left: 1px solid var(--c-border); }

.home-numbers-grid .stat {
  font-family: 'Ziony1', Sans-serif;
  font-size: 64px;
  line-height: 1.05;
  color: var(--c-blue);            /* the figures are the point of the section */
  font-variant-numeric: tabular-nums;
}
.home-numbers-grid .stat-outline {
  -webkit-text-stroke-color: var(--c-navy);      /* text_stroke on widget fa24f1e */
  stroke: var(--c-navy);
}
.home-numbers-grid .stat-label {
  margin: 12px 0 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-text);
}

/* -- "Contact Us" call-to-action, container c41ee87 ----------------------- */
.home-cta { display: flex; flex-direction: column; padding: 0 0 160px 0; }
.home-cta-box {
  display: flex;
  flex-direction: column;
  border-radius: 9px;
  padding: 80px;
  background-image: url('assets/img/section-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.home-cta-title {
  text-align: center;
  font-family: 'Poppins', Sans-serif;
  font-weight: 600;
  color: var(--c-white);
}
.home-cta-text { text-align: center; font-size: 18px; color: var(--c-white); }
.home-cta-btn { text-align: center; }
.home-cta-btn .btn {
  background-color: var(--c-blue);
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  border-radius: 9px;
  padding: 18px 25px;
}


/* ==========================================================================
   8. ABOUT US — Elementor post 975
   ========================================================================== */

/* -- hero banner, section a00e5a5 ----------------------------------------- */
.about-hero {
  background-image: url('assets/img/hero-bg.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  /* margin_laptop is -116px on both sides (isLinked), i.e. one value typed
     once to tuck the banner under the header. The absolute header handles
     that now, and the bottom half only pulled the next section into the
     banner box, so both sides are zeroed. */
  margin-top: 0;
  margin-bottom: 0;
  padding: 100px 20px 0 20px;       /* padding_laptop */
  transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.about-hero > .container { min-height: 455px; }

/* -- "Contact us / Trust technology", section 40192dd --------------------- */
.about-intro { margin: 100px 0; padding: 0 20px; }
.about-intro > .container { align-items: stretch; }
.about-col { width: 50%; }

/* heading d2305b6 */
.about-eyebrow {
  font-family: 'Poppins', Sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-blue);             /* was #015AF2, now matches .contact-eyebrow */
}
/* heading ad6b5eb */
.about-title {
  font-family: 'Kanit', Sans-serif;
  font-size: 50px;                  /* typography_font_size_laptop (55px at >1366) */
  font-weight: 600;
  color: var(--c-navy);
}
/* text-editor 101d6ad — 1.5 is tight for a 14px face over several lines */
.about-body {
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-text);
}
.about-body p + p { margin-top: 4px; }
/* column e0d4b4a — vertically centred image */
.about-visual > .col-inner { justify-content: center; align-items: center; }

/* -- "Our Team", section b9b2230 ------------------------------------------ */
.about-team {
  position: relative;
  background-image: url('assets/img/section-bg.png');
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 100px 0;
  padding: 0 20px;                  /* padding_laptop (25px at >1366) */
  transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.about-team > .container { max-width: 1148px; }
.about-team-title {
  font-family: 'Kanit', Sans-serif;
  font-size: 50px;                  /* typography_font_size_laptop */
  font-weight: 600;
  color: var(--c-white);
}
/* text-editor c00ff1f — two text columns */
.about-team-body {
  columns: 2;
  column-gap: 52px;                 /* default 1em let the two columns touch */
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-text-light);       /* was #EEECEC */
}
/* button 362634f */
.about-team-btn { margin: 27px; padding: 2px; text-align: center; }
.about-team-btn .btn {
  background-color: var(--c-blue);
  font-family: 'Ziony1', Sans-serif;
  font-size: 16px;
  font-weight: 400;
  fill: var(--c-white);
  color: var(--c-white);
  border-radius: 10px;
  padding: 10px;
}
.about-team-btn .btn-inner { flex-direction: row-reverse; gap: 12px; }  /* icon_align row-reverse, icon_indent 12px */
.btn-icon { display: inline-flex; align-items: center; }
.about-team-btn .btn:hover { transform: scale(.95); }   /* hover_animation pulse-shrink */

/* shape dividers (shape_divider_top/bottom = "tilt") */
.about-team .shape-top,
.about-team .shape-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  direction: ltr;
  pointer-events: none;
}
.about-team .shape-top    { top: -1px; }
.about-team .shape-bottom { bottom: -1px; transform: rotate(180deg); }
.about-team .shape-top svg    { height: 23px; width: 100%; display: block; }
.about-team .shape-bottom svg { height: 76px; width: 150%; display: block; }
.about-team .shape-top svg path,
.about-team .shape-bottom svg path { fill: var(--c-white); }

/* -- "Zgodovina" timeline, section 99aecda -------------------------------- */
/* The export hides this section on every breakpoint
   (hide_desktop / hide_laptop / hide_tablet / hide_mobile), so it is kept in
   the markup for fidelity but never displayed. */
.about-history { display: none; }


/* ==========================================================================
   9. CONTACTS — Elementor post 978
   ========================================================================== */

/* -- hero banner, section 9ee2c29 ----------------------------------------- */
.contact-hero {
  background-image: url('assets/img/hero-bg.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;                    /* was -90px, see .site-header */
  margin-bottom: 70px;
  padding: 0 20px;                  /* padding_laptop (15px at >1366) */
  transition: background .3s, border .3s, border-radius .3s, box-shadow .3s;
}
.contact-hero > .container { min-height: 300px; }

/* -- section 5d341a2 : details + form ------------------------------------- */
.contact-main { margin: 0 0 160px 0; padding: 0 20px; }
.contact-col { width: 50%; }
/* content_position "center" in the export left the details block floating in
   the middle of a column as tall as the form, with a lot of dead space above
   it. Aligned to the top it reads as a pair with the form. */
.contact-col-info > .col-inner { justify-content: flex-start; padding-top: 6px; }

/* heading df76109 */
.contact-eyebrow {
  font-family: 'Poppins', Sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-blue);
}

/* icon-box 79e4aea : "Office Email"
   Given a card so the left column carries some weight — next to the form it
   was a single line of text floating in a half-empty column. */
.icon-box {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-white);
  box-shadow: 0 6px 24px rgba(0, 9, 42, .06);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
}
.icon-box:hover {
  border-color: rgba(0, 89, 172, .35);
  box-shadow: 0 12px 30px rgba(0, 9, 42, .12);
}
.icon-box .icon-box-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 89, 172, .08);
  font-size: 22px;
  color: var(--c-blue);
  fill: var(--c-blue);
  transition: background-color .3s ease, color .3s ease;
}
.icon-box:hover .icon-box-icon { background: var(--c-blue); color: var(--c-white); }
.icon-box .icon-box-title {
  margin: 0 0 0 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-navy);             /* was #222222 */
}
.icon-box .icon-box-desc {
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text);
  margin: 0;
}
.icon-box .icon-box-desc a { color: inherit; text-decoration: none; }

/* -- Contact Form 7 form (post 1347) + its custom CSS (widget 11d5e4a) ---- */
.wpcf7 form {
  background: var(--c-white);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  /* the exported shadow was a flat grey 0 8px 32px rgba(0,0,0,.3); tinting it
     navy and adding a hairline lifts the card instead of smudging it */
  box-shadow: 0 18px 44px rgba(0, 9, 42, .13);
  border: 1px solid var(--c-border);
  max-width: 600px;
  margin: auto;
}
.wpcf7 label { display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 20px;
  margin-bottom: 20px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--c-navy);
  font-size: 16px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  border-color: var(--c-blue);      /* was near-black; brand blue reads as "active" */
  box-shadow: 0 0 0 4px rgba(0, 89, 172, .12);
  outline: none;
}
.wpcf7 textarea {
  min-height: 150px;
  resize: vertical;
}
.wpcf7 input[type="submit"] {
  background: var(--c-blue);
  color: var(--c-white);
  font-family: Ziony1;
  padding: 12px 30px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--c-blue-soft);
  color: var(--c-navy);
  transform: scale(1.05);
}
.wpcf7-response-output {
  margin-top: 20px;
  padding: 10px;
  border-radius: 10px;
  font-weight: bold;
}
.wpcf7-mail-sent-ok {
  background-color: rgba(0, 255, 150, 0.2);
  color: #00ff96;
}
.wpcf7-validation-errors {
  background-color: rgba(255, 0, 0, 0.2);
  color: #ff4d4d;
}


/* ==========================================================================
   10. Responsive overrides
       Breakpoints come from the Elementor kit (post 6 page settings):
       viewport_md 768, viewport_lg 1025, plus the "laptop" breakpoint 1366.
   ========================================================================== */

/* ---------- laptop: max-width 1366px -------------------------------------
   NOTE — the Elementor export carries a full set of `*_laptop` values but
   leaves the >1366px case on the un-tuned originals. Rendered at >1366px
   those originals collide: the hero has `padding-top:0` against a
   `margin-top:-101px` pull, so the 80px header lands on top of the hero
   heading, and the hero column is dragged 90px off the left edge away from
   the logo. The `*_laptop` values are what the design was actually built
   against, so they are used as the base for every desktop width instead of
   only up to 1366px. No value here is invented — each one is the widget's
   own `_laptop` setting:

     6f3b49c padding_laptop 80/20/0/20   4350afe margin_laptop 0
     ccf2935 _padding_laptop 0/512/0/0   edec0f8 _margin_laptop -383/-546/-336/17
     02969f2 _margin_laptop 0            ce52ac8 _element_custom_width_laptop 402px
     8cf3f0e _inline_size_laptop 44%     e8c4149 padding_laptop 130/20/30/20
     a00e5a5 margin/padding_laptop       ad6b5eb/38e6d8b font_size_laptop 50px
     b9b2230 padding_laptop 0/20         9ee2c29 + 5d341a2 padding_laptop 0/20
     58a3dec _element_custom_width_laptop 204.25px

   They are declared inline in sections 4–9 above, so this breakpoint needs
   no separate block. */

/* ---------- tablet: max-width 1024px ------------------------------------- */
@media (max-width: 1024px) {

  /* header */
  .header-logo { width: 138.797px; max-width: 138.797px; }
  .header-logo img { max-width: 289px; }
  .header-col-nav > .col-inner { padding: 8px; }
  .header-nav { width: 402px; max-width: 402px; }

  /* footer */
  .footer-copy { font-size: 13px; }
  .footer-list a,
  .footer-list span { font-size: 11px; }

  /* home 974 */
  .home-hero > .container > .column > .col-inner {
    margin: 0;
    justify-content: center;
    align-items: center;         /* content_position_tablet: center */
  }
  .home-hero-text { padding: 0; }
  .btn-wpr { max-width: 241px; }

  /* about 975 */
  .about-hero { padding: 0; }
  .about-intro { margin: 120px 0; }
}

/* ---------- tablet only: columns stack ----------------------------------- */
@media (max-width: 1024px) and (min-width: 768px) {
  .home-hero .column { width: 100%; }
  .about-col  { width: 100%; }
  .contact-col { width: 100%; }
}

/* ---------- mobile: max-width 767px -------------------------------------- */
@media (max-width: 767px) {

  /* header 218 — burger menu */
  .header-col-logo { width: 50%; }
  .header-col-nav  { width: 50%; }
  .header-logo { width: 100.797px; max-width: 100.797px; text-align: center; align-self: flex-end; }
  .header-logo img { max-width: 253px; width: 100%; }
  .header-nav {
    width: 40px;
    max-width: 40px;
    margin: 4px;
    padding: 6px;
    border-radius: 10px;
    text-align: right;
  }
  .nav-toggle { display: block; margin-left: auto; }
  .header-nav ul.menu { display: none; }
  .header-nav .mobile-panel {
    display: none;
    position: absolute;
    right: 0;
    left: 0;
    top: 100%;
    background-color: var(--c-white);      /* mobile_menu_bg_color */
    margin-top: 0;
    padding: 0;
    list-style: none;
    z-index: 20;
  }
  .header-nav.is-open .mobile-panel { display: block; }
  .header-nav .mobile-panel a {
    display: block;
    color: var(--c-navy);                 /* mobile_menu_color */
    padding: 9px 5px;               /* mobile menu paddings */
    text-align: center;
    border-bottom: 4px solid #e8e8e8;
  }
  .header-nav .mobile-panel a:hover { color: var(--c-navy); }

  /* footer 200 */
  .site-footer { padding: 100px 0 30px 0; }
  .footer-col { width: 100%; }
  .footer-logo { width: 326px; max-width: 100%; }
  .footer-copy { width: 287.547px; max-width: 100%; margin: -17px 0 0 0; font-size: 11px; }
  .footer-col-contact > .col-inner { margin: 10px 0; }
  .footer-heading { text-align: center; }
  .footer-list { width: 185.906px; max-width: 185.906px; }
  .footer-list li { justify-content: center; }

  /* home 974 */
  .home-hero { padding: 150px 20px; }
  .home-hero-title { margin: 0; }
  .home-hero-title .anim-text,
  .home-hero-title .anim-text b,
  .home-hero-title .anim-text-cursor { font-size: 50px; }
  .home-hero-btn-wrap { width: 111px; max-width: 111px; }
  .btn-wpr { max-width: 238px; }
  /* container 7eebc3c: width_mobile 374px, min_height_mobile 0,
     flex_justify_content_mobile center, padding_mobile 60px 0 */
  .home-partners {
    width: 374px;
    max-width: 100%;      /* 374px is wider than a 320px phone */
    min-height: 0;
    justify-content: center;
    padding: 60px 0;
  }
  .home-about > .con-inner { grid-template-columns: repeat(1, 1fr); }
  .home-numbers { display: none; }            /* hide_mobile on 427478f */
  /* kept in case the section is ever unhidden: stacked, so the vertical
     hairline between figures becomes a horizontal one */
  .home-numbers-grid { grid-template-columns: repeat(1, 1fr); }
  .stat-item + .stat-item {
    border-left: 0;
    border-top: 1px solid var(--c-border);
    padding-top: 26px;
    margin-top: 18px;
  }

  /* about 975 */
  .about-hero {
    margin-top: 0;                    /* margin_mobile -54px linked, see above */
    margin-bottom: 0;
    padding: 10px;
    background-size: 631px auto;      /* background_bg_width_mobile 631px */
  }
  .about-hero > .container { min-height: 264px; }
  .about-col { width: 100%; }
  .about-title,
  .about-team-title { font-size: 35px; }
  .about-team { margin: 0; padding: 0; }
  .about-team-body { columns: 1; }

  /* contact 978 */
  .contact-hero {
    margin-top: 0;                    /* margin_mobile -111px linked, see above */
    margin-bottom: 0;
    padding: 0;
    background-size: 631px auto;      /* background_bg_width_mobile 631px */
  }
  .contact-hero > .container { min-height: 264px; }
  .contact-col { width: 100%; }
}


/* ==========================================================================
   10a. Page banner title — added, not from the export
   --------------------------------------------------------------------------
   The About and Contact banners were 455px and 300px of bare photograph with
   nothing in them, which read as a loading error rather than a design. Each
   now carries its own page name, centred, in the same Kanit scale the rest
   of the site uses for large headings.
   ========================================================================== */

.about-hero > .container > .column > .col-inner,
.contact-hero > .container > .column > .col-inner {
  justify-content: center;
  align-items: center;
}
.page-hero-title {
  margin: 0;
  text-align: center;
  font-family: 'Kanit', Sans-serif;
  font-size: 55px;
  font-weight: 600;
  color: var(--c-white);
  letter-spacing: -0.5px;
  text-shadow: 0 2px 26px rgba(0, 9, 42, .5);
}
@media (max-width: 1366px) { .page-hero-title { font-size: 50px; } }
@media (max-width: 767px)  { .page-hero-title { font-size: 35px; } }


/* ==========================================================================
   10b. Closing band — added, not from the export
   --------------------------------------------------------------------------
   Every page used to stop dead: Home dropped 160px of empty white between the
   CTA and the footer, About ended on the tilted team panel, Contact simply
   ran out after the form. This band gives all three the same deliberate
   ending and repeats the three promises the copy already makes.
   ========================================================================== */

.closing {
  position: relative;
  padding: 90px 20px;
  background: var(--c-white);
}
/* a hairline that fades out at both ends instead of a rule running wall
   to wall — it separates without drawing a hard line across the page */
.closing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 40px, var(--container-max-width));
  height: 1px;
  background: linear-gradient(to right,
              transparent, var(--c-border) 22%, var(--c-border) 78%, transparent);
}
.closing > .container { max-width: var(--container-max-width); }
.closing > .container > .column > .col-inner { padding: 0; }

.closing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  width: 100%;
}
/* light cards, so the three promises read as a set rather than as loose
   paragraphs — same treatment as the contact card */
.closing-item {
  text-align: center;
  padding: 34px 26px 30px;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-white);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.closing-item:hover {
  border-color: rgba(0, 89, 172, .3);
  box-shadow: 0 14px 34px rgba(0, 9, 42, .09);
  transform: translateY(-4px);
}

.closing-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(0, 89, 172, .08);   /* --c-blue at 8% */
  color: var(--c-blue);
  font-size: 24px;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.closing-item:hover .closing-icon {
  background: var(--c-blue);
  color: var(--c-white);
  transform: translateY(-4px);
}

.closing-title {
  margin: 0 0 10px;
  font-family: 'Kanit', Sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-navy);
}
.closing-text {
  margin: 0 auto;
  max-width: 310px;
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text);
}

/* Home no longer needs the 160px of dead space, the band closes it instead */
.home-cta { padding-bottom: 90px; }

@media (max-width: 767px) {
  .closing { padding: 60px 20px; }
  .closing-grid { grid-template-columns: 1fr; gap: 36px; }
  .home-cta { padding-bottom: 60px; }
  .site-footer::before { height: 96px; }
}


/* ==========================================================================
   11. Polish
   --------------------------------------------------------------------------
   Purely additive: nothing here changes the brand colours, the logos, the
   copy or the layout the export defines. It adds the behaviour a hand-built
   site is expected to have — a header that stays reachable, content that
   arrives as you scroll, live counters, and proper focus states.
   Every motion rule is switched off under `prefers-reduced-motion`.
   ========================================================================== */

/* -- 11.1 Sticky header ---------------------------------------------------
   The header used to scroll away with the hero. Fixed keeps the menu within
   reach on long pages; the navy plate fades in as soon as the page moves so
   the white menu text never ends up on a white section. */
.site-header {
  position: fixed;
  transition: background-color .35s ease, box-shadow .35s ease,
              backdrop-filter .35s ease;
}
.site-header.is-scrolled {
  background-color: rgba(0, 9, 42, .92);      /* --c-navy at 92% */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(0, 9, 42, .28);
}
/* anchors must clear the fixed bar */
[id] { scroll-margin-top: 110px; }

/* -- 11.2 Scroll reveal ---------------------------------------------------
   script.js tags the elements, so with JS off nothing is ever hidden. */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22, .61, .36, 1),
              transform .75s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* -- 11.3 Carousel logos --------------------------------------------------
   The strips read as a flat block of images; a small lift on hover makes
   them feel like the partner list they are. */
.carousel-slide img {
  transition: transform .3s ease, filter .3s ease;
}
.carousel-slide:hover img {
  transform: translateY(-5px);
}
.home-brands .carousel-slide:hover img {
  filter: drop-shadow(0 8px 14px rgba(0, 9, 42, .28));
}

/* -- 11.4 Counters --------------------------------------------------------
   Reserve the width so 0 -> 60 does not shuffle the grid while counting. */
.home-numbers-grid .stat { font-variant-numeric: tabular-nums; }

/* -- 11.5 Links and buttons ----------------------------------------------- */
.footer-list a { transition: color .25s ease; }
.footer-list a:hover { color: var(--c-white); }

.icon-box .icon-box-desc a { transition: color .25s ease; }
.icon-box .icon-box-desc a:hover { color: var(--c-blue); }

.btn { transition: background-color .3s ease, color .3s ease,
                   box-shadow .3s ease, transform .3s ease; }
.home-about-btn .btn:hover,
.home-cta-btn .btn:hover { transform: translateY(-2px); }

/* the icon-box mail icon picks up the hover of the whole block */
.icon-box { transition: transform .3s ease; }
.icon-box:hover { transform: translateX(3px); }

/* -- 11.6 Focus states ----------------------------------------------------
   Keyboard users had no visible focus anywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
}
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--c-white);
}

/* -- 11.7 Form -------------------------------------------------------------
   Labels were unstyled; the fields already carry the exported look. */
.wpcf7 label {
  font-family: 'Poppins', Sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-navy);
}
.wpcf7 input[type="submit"] { transition: background-color .3s ease, color .3s ease, transform .3s ease; }

/* -- 11.8 Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .anim-text-inner,
  .anim-text-cursor { animation: none; }
  .carousel-track { transition: none; }
  .carousel-slide:hover img,
  .icon-box:hover,
  .home-about-btn .btn:hover,
  .home-cta-btn .btn:hover { transform: none; }
}

/* ==========================================================================
   12. LANGUAGE SWITCHER, FOURTH MENU ITEM AND THE WARRANTY PAGE
   ==========================================================================
   The original header was two fixed columns (50.696% / 44%) holding a nav
   box pinned to 402px, all measured off the Elementor export. Three menu
   items fitted that box exactly; a fourth item plus a language control does
   not. Rather than pick new fixed numbers that would break again at the
   next change, the header is switched to intrinsic widths: the logo takes
   what it needs on the left, the nav takes what it needs on the right, and
   the gap between them absorbs the difference. Everything below overrides
   section 1 and the media queries above, so those still document what the
   export actually contained.
   -------------------------------------------------------------------- */

.header-col-logo { width: auto; flex: 0 0 auto; }
.header-col-nav  { width: auto; flex: 1 1 auto; min-width: 0; }

.header-nav {
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-nav a { white-space: nowrap; }

/* -- 12.1 The switcher button --------------------------------------------
   It has to read on two backgrounds: the transparent header over the dark
   hero, and the navy plate that fades in on scroll. A hairline outline in
   white at low alpha works on both without needing a second colour set. */
.lang { position: relative; flex: 0 0 auto; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: transparent;
  color: var(--c-white);
  font-family: 'Ziony1', Sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.lang-btn:hover {
  border-color: rgba(255, 255, 255, .6);
  background-color: rgba(255, 255, 255, .1);
}

.lang-globe {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.lang-code { font-weight: 400; }
.lang-caret {
  width: 9px;
  height: 6px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.lang.is-open .lang-caret { transform: rotate(180deg); }

/* -- 12.2 The drop-down --------------------------------------------------
   `.header-nav ul` in section 1 makes every list in the header a centred
   flex row; this one is a stacked menu, so both of those are undone here. */
.header-nav .lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 178px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 9, 42, .18);
}
.lang.is-open .lang-menu {
  display: block;
  animation: lang-in .16s ease-out;
}
@keyframes lang-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.header-nav .lang-menu li { margin: 0; }

.lang-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-navy);
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.lang-menu button:hover { background-color: var(--c-blue-soft); }
.lang-menu .lang-abbr {
  flex: 0 0 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-muted);
  transition: color .15s;
}
.lang-menu .lang-name { flex: 1 1 auto; }

/* the language currently in use, ticked */
.lang-menu button.is-active { color: var(--c-blue); font-weight: 600; }
.lang-menu button.is-active .lang-abbr { color: var(--c-blue); }
.lang-menu button.is-active::after {
  content: "\2713";
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lang.is-open .lang-menu { animation: none; }
  .lang-caret { transition: none; }
}

/* -- 12.3 Tablet and mobile ---------------------------------------------- */
@media (max-width: 1024px) {
  /* four items are wider than three: claw back a few pixels rather than
     dropping to the burger a whole breakpoint early */
  .header-nav { gap: 6px; }
  .header-nav li { margin: 0 3px; }
  .header-nav .menu a { padding: 10px 5px; }
}

@media (max-width: 767px) {
  /* the switcher stays beside the burger — a language control buried inside
     a collapsed menu is a language control nobody finds */
  .header-nav {
    width: auto;
    max-width: none;
    justify-content: flex-end;
    gap: 8px;
  }
  .lang-btn { padding: 6px 9px; font-size: 12px; }
  .lang-globe { width: 14px; height: 14px; }
  .header-nav .lang-menu { right: -6px; min-width: 170px; }
}

/* -- 12.4 Skip link -------------------------------------------------------
   The header is the first thing in the tab order on every page; without
   this a keyboard or screen-reader visitor walks the whole menu again on
   every page before reaching the content. Off-screen until focused. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  background-color: var(--c-blue);
  color: var(--c-white);
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* -- 12.5 Warranty & Instructions: the hub ---------------------------------
   Same banner construction as About and Contacts, then a picker: one card
   per brand we distribute. A brand goes live by pointing its card at its own
   page and dropping `is-pending`; nothing else about the card changes, so
   the row stays even as it fills up. */
.warranty-hero {
  background-image: url('assets/img/hero-bg.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 70px;
  padding: 0 20px;
}
.warranty-hero > .container { min-height: 300px; }
.warranty-hero > .container > .column > .col-inner {
  justify-content: center;
  align-items: center;
}

.warranty-main { margin: 0 0 140px 0; padding: 0 20px; }

.warranty-intro {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-family: 'Poppins', Sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text);
}
.warranty-pick {
  margin: 54px 0 24px 0;
  text-align: center;
  font-family: 'Kanit', Sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: -0.5px;
}

/* -- the grid ------------------------------------------------------------
   The tracks have a ceiling as well as a floor, and the row is centred: with
   one brand listed the card sits in the middle of the page instead of alone
   against the left edge, and as brands are added the rows fill outwards from
   the centre. The floor still decides how many fit per row, so no breakpoint
   is needed for each width. */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
  justify-content: center;
  gap: 16px;
  margin: 0;
}
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 18px 22px 18px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.brand-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
}
.brand-card-logo img {
  width: auto;
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
}
.brand-card-name {
  font-family: 'Kanit', Sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: -0.3px;
}
.brand-card-go {
  font-family: 'Poppins', Sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-blue);
  transition: color .2s;
}
.brand-card-go::after { content: " \2192"; }

a.brand-card:hover {
  border-color: var(--c-blue);
  box-shadow: 0 14px 30px rgba(0, 89, 172, .14);
  transform: translateY(-3px);
}

/* Brands whose page is not written yet. Greyed and unclickable rather than
   hidden: the list is the roadmap, and a visitor can see their brand is
   coming instead of concluding we do not carry it. */
.brand-card.is-pending { cursor: default; }
.brand-card.is-pending .brand-card-logo img { filter: grayscale(1); opacity: .5; }
.brand-card.is-pending .brand-card-name { color: var(--c-muted); }
.brand-card-tag {
  padding: 4px 11px;
  border-radius: 999px;
  background-color: var(--c-blue-soft);
  font-family: 'Poppins', Sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--c-muted);
}

.warranty-more {
  margin: 26px auto 0 auto;
  max-width: 560px;
  text-align: center;
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-muted);
}

/* -- the help card at the foot of the hub --------------------------------- */
.warranty-help {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 56px;
  padding: 32px 36px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(0, 9, 42, .07);
}
.warranty-help-body { flex: 1 1 auto; }
.warranty-help-btn { flex: 0 0 auto; }
.warranty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--c-blue-soft);
  color: var(--c-blue);
  font-size: 22px;
}
.warranty-help-title {
  margin: 0 0 6px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: -0.4px;
}
.warranty-help-text {
  margin: 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-text);
}

@media (max-width: 767px) {
  .warranty-main { margin-bottom: 90px; }
  .warranty-pick { font-size: 24px; }
  .brand-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 210px)); gap: 12px; }
  .brand-card { padding: 20px 12px 18px 12px; }
  .warranty-help { flex-direction: column; align-items: flex-start; padding: 26px 22px; gap: 18px; }
}

/* -- 12.6 Two focus states the earlier rules got wrong ---------------------
   Section 11.6 turns every focus ring inside the header white, which was
   right when the header held nothing but white-on-dark links. The language
   options sit on a white drop-down, so a white ring there is invisible; the
   skip link is a blue plate, so a blue ring on it is invisible too. */
.site-header .lang-menu button:focus-visible {
  outline-color: var(--c-blue);
  outline-offset: -2px;
}
.skip-link:focus-visible { outline-color: var(--c-white); outline-offset: -4px; }

/* ==========================================================================
   13. PER-BRAND WARRANTY & INSTRUCTIONS PAGE
   ==========================================================================
   One page per brand, all built from warranty-keychron.html. The layout is
   deliberately the same three-beat every time — the facts, the sequence,
   the documents — so a visitor who has used one brand's page already knows
   where to look on the next.
   -------------------------------------------------------------------- */

/* -- 13.1 Brand banner ----------------------------------------------------
   The logo sits on a white plate over the shared banner, which is what makes
   the brand read as the subject of the page rather than one more item in a
   list. The kit's 20px widget spacing is too loose for a four-line stack, so
   the gaps are set here instead. */
.brand-hero {
  background-image: url('assets/img/hero-bg.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 66px;
  padding: 0 20px;
}
.brand-hero > .container { min-height: 340px; }
.brand-hero > .container > .column > .col-inner {
  justify-content: center;
  align-items: center;
  padding-top: 96px;              /* clear of the fixed header */
  padding-bottom: 34px;
}
.brand-hero > .container > .column > .col-inner > *:not(:last-child) {
  margin-block-end: 0;
}

.brand-crumb { margin-bottom: 26px; }
.brand-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-family: 'Poppins', Sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-white);
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.brand-crumb a:hover {
  border-color: rgba(255, 255, 255, .65);
  background-color: rgba(255, 255, 255, .1);
}
.brand-crumb i { font-size: 12px; }

.brand-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  margin-bottom: 20px;
  border-radius: 22px;
  background-color: var(--c-white);
  box-shadow: 0 16px 40px rgba(0, 9, 42, .3);
}
.brand-hero-logo img {
  width: auto;
  max-width: 76px;
  max-height: 76px;
  object-fit: contain;
}

.brand-hero-name {
  margin: 0 0 8px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 46px;
  font-weight: 600;
  color: var(--c-white);
  letter-spacing: -0.8px;
  text-shadow: 0 2px 26px rgba(0, 9, 42, .5);
}
.brand-hero-eyebrow {
  margin: 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

/* -- 13.2 The three facts -------------------------------------------------
   Period, covered, not covered. The two outcome icons carry their own
   semantic colours, kept separate from the blue accent so "not covered"
   never has to compete with a link for the same hue. */
.brand-main { margin: 0 0 140px 0; padding: 0 20px; }

.brand-lead {
  max-width: 680px;
  margin: 0 auto 46px auto;
  text-align: center;
  font-family: 'Poppins', Sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text);
}

.brand-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.brand-fact {
  padding: 30px 26px 26px 26px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
}
.brand-fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  background-color: var(--c-blue-soft);
  color: var(--c-blue);
  font-size: 17px;
}
.brand-fact-icon.is-good { background-color: #E4F1EA; color: #1B7A50; }
.brand-fact-icon.is-warn { background-color: #F7E9E7; color: #A63A2E; }

.brand-fact-title {
  margin: 0 0 10px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: -0.3px;
}
.brand-fact-text {
  margin: 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-text);
}

.brand-section-title {
  margin: 66px 0 26px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: -0.5px;
}

/* -- 13.3 The claim, numbered ---------------------------------------------
   Numbered because it genuinely is a sequence: you cannot be sent a
   collection label before you have told us what is wrong. */
.brand-steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-steps li {
  counter-increment: step;
  position: relative;
  padding: 30px 26px 26px 26px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
}
.brand-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  background-color: var(--c-blue);
  color: var(--c-white);
  font-family: 'Kanit', Sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.brand-step-title {
  margin: 0 0 8px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-navy);
}
.brand-steps p {
  margin: 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-text);
}

/* -- 13.4 Downloads -------------------------------------------------------
   The empty state is dashed rather than solid so it reads as a slot waiting
   to be filled, not as a card with nothing in it. `.brand-files` is the
   shape the list takes once the PDFs arrive. */
.brand-empty {
  margin: 0;
  padding: 34px 28px;
  border: 1px dashed #CDD4E4;
  border-radius: 14px;
  text-align: center;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-muted);
}

.brand-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brand-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-navy);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.brand-file:hover { border-color: var(--c-blue); box-shadow: 0 10px 24px rgba(0, 89, 172, .12); }
.brand-file .fa-file-pdf { flex: 0 0 auto; font-size: 20px; color: #A63A2E; }
.brand-file .fa-download { margin-left: auto; font-size: 14px; color: var(--c-blue); }
.brand-file-meta { display: block; font-size: 12px; font-weight: 400; color: var(--c-muted); }

/* -- 13.5 Support --------------------------------------------------------
   The one navy block on the page. It closes the page the way the contact
   band closes the home page, and it is the only place the eye is pulled. */
.brand-support {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 66px;
  padding: 38px 42px;
  background-color: var(--c-navy);
  border-radius: 18px;
}
.brand-support > div { flex: 1 1 auto; }
.brand-support .btn { flex: 0 0 auto; }
.brand-support-title {
  margin: 0 0 8px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--c-white);
  letter-spacing: -0.4px;
}
.brand-support-text {
  margin: 0;
  max-width: 560px;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-text-light);
}

@media (max-width: 767px) {
  .brand-main { margin-bottom: 90px; }
  .brand-hero > .container { min-height: 300px; }
  .brand-hero-name { font-size: 34px; }
  .brand-hero-logo { width: 92px; height: 92px; }
  .brand-hero-logo img { max-width: 62px; max-height: 62px; }
  .brand-section-title { font-size: 24px; margin-top: 52px; }
  .brand-support { flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 20px; }
}

/* -- 13.6 Two inherited rules that had to be neutralised -------------------
   `.heading` sets line-height 1, which is right for the big display titles
   it was written for but pinches a card title that wraps to two lines.
   And the kit adds 20px under every widget in a column, which would sit on
   top of the margins set above and make the vertical rhythm on these two
   pages the sum of two numbers instead of the one written here. */
.warranty-pick,
.brand-section-title { line-height: 1.2; }
.warranty-help-title,
.brand-support-title { line-height: 1.25; }
.brand-hero-name     { line-height: 1.1; }
.brand-fact-title    { line-height: 1.3; }

.warranty-main > .container > .column > .col-inner > *:not(:last-child),
.brand-main    > .container > .column > .col-inner > *:not(:last-child) {
  margin-block-end: 0;
}

/* -- 13.7 Short pages -----------------------------------------------------
   A brand page whose content has not been written yet is a banner and
   nothing else, which on a tall screen left the footer stranded halfway up
   with empty white below it. The body becomes a column that fills the
   viewport and <main> takes up the slack, so the footer always sits at the
   bottom of the screen or below it. The header is `position: fixed` and the
   skip link `position: absolute`, so neither takes part in this. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main   { flex: 1 0 auto; }
body > footer { flex: 0 0 auto; }

/* -- 13.8 The facts on the hub --------------------------------------------
   .brand-facts was written for a brand page, where the lead paragraph above
   it carried the spacing. On the hub it follows the brand grid directly, and
   section 12.5 switched off the kit's automatic 20px, so the gaps it needs
   are set here. The note underneath belongs with the help card below it
   rather than with the cards above, so it keeps a little more room. */
.warranty-main .brand-facts { margin-top: 46px; }
.warranty-main .brand-facts + .warranty-more { margin-top: 34px; }

/* ==========================================================================
   14. PRODUCT PRESENTATION
   ==========================================================================
   Keychron present the K10 Max on black panels with an orange accent. The
   same composition is re-cut here: navy where they use black, the site blue
   where they use orange, and the panels alternate with white so the page
   does not read as one long dark slab. Nothing here is a shop control —
   there is no price, no quantity and no basket, by design.
   -------------------------------------------------------------------- */

/* -- 14.1 Photography that has not arrived --------------------------------
   Every image slot is real markup with a real aspect ratio, so the page does
   not reflow when the photographs are dropped in. */
.product-shot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background-color: #EEF1F7;
}
.product-shot.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px dashed #C6CFE2;
  text-align: center;
  font-family: 'Poppins', Sans-serif;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-muted);
}
.product-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- 14.2 The product card on the brand page ------------------------------ */
.brand-products { margin: 0 0 130px 0; padding: 0 20px; }
/* .brand-products-title was dropped with its heading — see warranty-keychron.html */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  gap: 20px;
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 20px 16px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.product-card:hover {
  border-color: var(--c-blue);
  box-shadow: 0 16px 34px rgba(0, 89, 172, .15);
  transform: translateY(-3px);
}
.product-card-body { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.product-card-name {
  font-family: 'Kanit', Sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--c-navy);
  letter-spacing: -0.3px;
}
.product-card-sub {
  font-family: 'Poppins', Sans-serif;
  font-size: 13px;
  color: var(--c-muted);
}
.product-card-go {
  margin-top: 6px;
  font-family: 'Poppins', Sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-blue);
}
.product-card-go::after { content: " \2192"; }

/* -- 14.3 Product page: the dark opener -----------------------------------
   Navy in place of the manufacturer's black. The product name is the only
   thing set large; everything else on this panel is support for it. */
.prod-wrap {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: 0 20px;
  width: 100%;
}

.prod-hero {
  padding: 128px 0 72px 0;
  background-color: var(--c-navy);
  background-image:
    radial-gradient(1100px 420px at 78% 12%, rgba(0, 89, 172, .38), rgba(0, 89, 172, 0) 70%);
}
.prod-crumb { margin-bottom: 30px; }
.prod-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-family: 'Poppins', Sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-white);
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.prod-crumb a:hover {
  border-color: rgba(255, 255, 255, .65);
  background-color: rgba(255, 255, 255, .1);
}
.prod-crumb i { font-size: 12px; }

.prod-brand {
  margin: 0 0 4px 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.prod-name {
  margin: 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 58px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--c-white);
  letter-spacing: -1px;
}
/* the manufacturer sets this half of the title in their accent; ours is the
   site blue, lightened enough to hold up on navy */
.prod-sub {
  margin: 6px 0 0 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: #6FA8E4;
  letter-spacing: -0.3px;
}
.prod-lead {
  max-width: 560px;
  margin: 20px 0 0 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text-light);
}

.prod-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0 0;
  padding: 0;
  list-style: none;
}
.prod-chips li {
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  font-family: 'Poppins', Sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--c-white);
}

.prod-hero-shot {
  margin-top: 40px;
  aspect-ratio: 16 / 7;
  background-color: rgba(255, 255, 255, .05);
}
.prod-hero-shot.is-empty { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .6); }

/* -- 14.4 Product page: sections, features, layouts ------------------------ */
.prod-section { padding: 76px 0; }
.prod-section--dark {
  background-color: var(--c-navy);
  color: var(--c-text-light);
}
.prod-h2 {
  margin: 0 0 30px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-navy);
  letter-spacing: -0.6px;
}
.prod-section--dark .prod-h2 { color: var(--c-white); }
.prod-note {
  max-width: 620px;
  margin: -18px 0 30px 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .72);
}

.prod-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.prod-feature {
  padding: 28px 26px 26px 26px;
  background-color: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 16px;
}
.prod-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  background-color: var(--c-blue-soft);
  color: var(--c-blue);
  font-size: 17px;
}
.prod-feature h3 {
  margin: 0 0 9px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-navy);
}
.prod-feature p {
  margin: 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--c-text);
}

/* The flag list that used to sit here was replaced by the diagram grid in
   section 15.3, which shows the actual layouts rather than naming them. */

/* -- 14.5 Specification ----------------------------------------------------
   A definition list per group, laid out as label/value rows. Figures line up
   on their own column and use tabular figures so the digits stack. */
.prod-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}
.prod-spec-group {
  padding: 26px 24px 20px 24px;
  background-color: #F5F7FB;
  border-radius: 16px;
}
.prod-spec-group h3 {
  margin: 0 0 14px 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.prod-spec-group dl {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 0;
  margin: 0;
}
.prod-spec-group dt,
.prod-spec-group dd {
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid #E3E8F2;
  font-family: 'Poppins', Sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
}
.prod-spec-group dt { padding-right: 16px; color: var(--c-muted); }
.prod-spec-group dd {
  color: var(--c-navy);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.prod-spec-group dl > dt:first-of-type,
.prod-spec-group dl > dt:first-of-type + dd { border-top: 0; }

.prod-source {
  margin: 22px 0 0 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-muted);
}

/* -- 14.6 The enquiry block ------------------------------------------------
   Where a shop would put a price and a basket. It says plainly that this is
   not a shop, which is the whole point of the page. */
.prod-enquire {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 36px 40px;
  background-color: var(--c-blue-soft);
  border-radius: 18px;
}
.prod-enquire > div { flex: 1 1 auto; }
.prod-enquire .btn { flex: 0 0 auto; }
.prod-enquire-title {
  margin: 0 0 8px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-navy);
  letter-spacing: -0.4px;
}
.prod-enquire-text {
  margin: 0;
  max-width: 620px;
  font-family: 'Poppins', Sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: #3D4661;
}

@media (max-width: 767px) {
  .prod-hero { padding: 108px 0 54px 0; }
  .prod-name { font-size: 40px; }
  .prod-sub  { font-size: 20px; }
  .prod-section { padding: 54px 0; }
  .prod-h2 { font-size: 26px; }
  .brand-products { margin-bottom: 90px; }
  .prod-spec-group dl { grid-template-columns: 1fr; }
  .prod-spec-group dt { padding-bottom: 0; }
  .prod-spec-group dd { padding-top: 3px; border-top: 0; }
  .prod-spec-group dl > dt { border-top: 1px solid #E3E8F2; }
  .prod-spec-group dl > dt:first-of-type { border-top: 0; }
  .prod-enquire { flex-direction: column; align-items: flex-start; padding: 26px 22px; gap: 20px; }
}

/* ==========================================================================
   15. LONG-FORM PRODUCT PAGE
   ==========================================================================
   Keychron run their own page as a tall stack of black panels. The same
   material is laid out here as alternating bands — navy, white, navy — with
   the image and the text swapping sides on each one, so a long page still
   gives the eye somewhere new to land. Every image carries width and height
   so nothing jumps as the page loads.
   -------------------------------------------------------------------- */

.prod-media { margin: 0; }
.prod-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.prod-hero-media { margin-top: 42px; }

/* -- 15.1 Video ------------------------------------------------------------
   Muted and looping, with controls for anyone who wants them. script.js
   pauses it when the visitor has asked for reduced motion — CSS cannot stop
   a video playing. */
.prod-video-band { padding-top: 0; }
.prod-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background-color: #0A1230;
}

/* -- 15.2 The alternating bands ------------------------------------------- */
.prod-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 54px;
}
/* the reversed band puts the picture first in the source so it reads in the
   same order on a phone, where the grid collapses to one column */
.prod-split.is-reversed { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.prod-split.is-reversed .prod-split-text  { order: 1; }
.prod-split.is-reversed .prod-split-media { order: 0; }

.prod-split-text .prod-h2 { margin-bottom: 18px; }
.prod-split-text p {
  margin: 0 0 16px 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--c-text);
}
.prod-split-text p:last-child { margin-bottom: 0; }
.prod-section--dark .prod-split-text p { color: var(--c-text-light); }

.prod-split-media { margin: 0; }
.prod-split-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* -- 15.3 Layout diagrams --------------------------------------------------
   The four diagrams are not all the same shape — the UK and Nordic sheets
   include the row of alternative keycaps, the Swiss and German ones do not.
   A fixed box with `contain` keeps the cards level without cropping a
   diagram, which is the one thing you must not do to a keyboard drawing. */
.prod-layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.prod-layout {
  margin: 0;
  padding: 18px 18px 14px 18px;
  background-color: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
}
.prod-layout img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  object-position: center;
}
.prod-layout figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: 'Kanit', Sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-white);
}
.prod-flag { font-size: 15px; letter-spacing: 1px; line-height: 1; }
.prod-note--after { margin: 26px 0 0 0; }

/* -- 15.4 Gallery ---------------------------------------------------------- */
.prod-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.prod-gallery figure { margin: 0; }
.prod-gallery img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 14px;
}

@media (max-width: 900px) {
  /* one column, and the reversed order is undone so every band reads
     picture-then-text rather than alternating unpredictably */
  .prod-split,
  .prod-split.is-reversed { grid-template-columns: 1fr; gap: 30px; }
  .prod-split.is-reversed .prod-split-text  { order: 0; }
  .prod-split.is-reversed .prod-split-media { order: 1; }
  .prod-split-text  { order: 0; }
  .prod-split-media { order: 1; }
}

@media (max-width: 767px) {
  .prod-layout img { height: 140px; }
  .prod-gallery img { height: 190px; }
  .prod-hero-media { margin-top: 30px; }
}

/* -- 15.5 Documents in the hero -------------------------------------------
   The manual and the warranty sheet sit beside the product name, where a
   shop would put the price. Both are PDFs, so both carry the PDF mark and
   are told apart by their label — a red file icon reads as "document" in
   any language, and red is not this site's accent, so it never competes
   with a link for attention. */
.prod-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 46px;
}

.prod-docs {
  padding: 22px 20px 20px 20px;
  background-color: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
}
.prod-docs-title {
  margin: 0 0 14px 0;
  font-family: 'Poppins', Sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.prod-doc {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  background-color: rgba(255, 255, 255, .05);
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.prod-doc + .prod-doc { margin-top: 9px; }
.prod-doc:hover {
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .34);
}

.prod-doc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background-color: rgba(232, 119, 107, .18);
  color: #E8776B;
  font-size: 16px;
}
.prod-doc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.prod-doc-name {
  font-family: 'Poppins', Sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-white);
}
.prod-doc-file {
  font-family: 'Poppins', Sans-serif;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prod-doc-dl {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  transition: color .2s;
}
.prod-doc:hover .prod-doc-dl { color: var(--c-white); }

@media (max-width: 900px) {
  .prod-hero-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ==========================================================================
   16. THE MOBILE MENU, REBUILT
   ==========================================================================
   Two things were wrong with it.

   The first was mine. Section 12 gave the header intrinsic column widths so
   a fourth menu item and the language switcher would fit; the drop-down was
   positioned against `.header-col-nav`, which until then had been half the
   header and afterwards was only as wide as the burger. The panel collapsed
   into a sliver on the right-hand side. It is now positioned against the
   container instead, so its width no longer depends on the column's.

   The second was the panel's own design: a flat white slab hanging off a
   transparent header, its items separated by 4px grey bars. It is now the
   same navy plate the header wears once the page scrolls, so the two read as
   one block, and the header is forced into that state while the menu is open.
   -------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* the panel's containing block: the container, not the nav column */
  .header-col-nav { position: static; }

  .header-nav {
    margin: 0;
    padding: 0;
    border-radius: 0;
  }

  /* -- 16.1 The burger, which becomes a cross ----------------------------- */
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 9px 6px;
    border-radius: 10px;
    transition: background-color .2s;
  }
  .nav-toggle:hover { background-color: rgba(255, 255, 255, .1); }
  .nav-toggle span {
    width: 100%;
    margin-bottom: 5px;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .header-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .header-nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* -- 16.2 The panel ------------------------------------------------------ */
  .header-nav .mobile-panel {
    display: block;                    /* laid out, but not shown — see below */
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(100% + 10px);
    z-index: 25;
    margin: 0;
    padding: 8px;
    list-style: none;
    background-color: rgba(0, 9, 42, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    box-shadow: 0 20px 44px rgba(0, 9, 42, .42);

    /* animated open/close rather than a display switch, so it slides in */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .header-nav.is-open .mobile-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .header-nav .mobile-panel li { margin: 0; }
  .header-nav .mobile-panel li + li { border-top: 1px solid rgba(255, 255, 255, .08); }

  .header-nav .mobile-panel a {
    display: block;
    padding: 15px 14px;
    border-bottom: 0;                  /* was a 4px grey bar under every item */
    border-radius: 10px;
    font-family: 'Poppins', Sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;              /* uppercase belongs on the desktop bar */
    text-align: left;
    color: var(--c-white);
    transition: background-color .18s, color .18s;
  }
  .header-nav .mobile-panel a:hover,
  .header-nav .mobile-panel a:focus-visible { background-color: rgba(255, 255, 255, .09); color: var(--c-white); }
  .header-nav .mobile-panel a.is-current { color: #6FA8E4; }

  /* While the menu is open the header wears its navy plate whatever the
     scroll position, so the panel does not appear to float away from it. */
  .site-header.is-menu-open {
    background-color: rgba(0, 9, 42, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .header-nav .mobile-panel { transition: none; }
  .nav-toggle span { transition: none; }
}

/* -- 14.7 Category headings on the brand page ------------------------------
   Mice and keyboards are kept in separate grids on request. The heading is
   what makes that split legible; without it the two rows read as one long
   list that happens to change subject halfway down. */
.brand-cat {
  margin: 0 0 22px 0;
  font-family: 'Kanit', Sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-navy);
  letter-spacing: -0.4px;
  text-align: center;
}
.brand-cat + .product-grid { margin-bottom: 0; }
.product-grid + .brand-cat { margin-top: 56px; }