/* =============================================================================
   HCMC EXPORT 2026 — shared layer on every page: font, tokens, base, buttons, header, mobile menu, footer,
   quick actions, Flatsome guards. Home sections: hcm-home.css · News: hcm-news.css.
   Look: the 2026 banner — banner blue as the main colour, banner lime as the highlight, diagonal stripes,
   Montserrat in capitals for titles (as in the brochure), square-ish shapes with a cut corner. Loaded after
   flatsome.css (dependency flatsome-main), so equal-specificity resets here win over Flatsome's element styles.
   Breakpoints: 1279 / 1023 / 767 / 479.
   ============================================================================= */

/* ---------- Font: Montserrat variable 400–800, self-hosted (Latin + Vietnamese subsets) ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/montserrat-latin.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: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/montserrat-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* ---------- Tokens ---------- */
:root {
  /* Banner blue (sampled from the 2026 banner) */
  --hcm-blue-900: #14245c;
  --hcm-blue-800: #1c3484;   /* banner panel */
  --hcm-blue-700: #1f3a8a;   /* brand */
  --hcm-blue-600: #2747a3;
  --hcm-blue-500: #3a63d0;
  --hcm-blue-100: #e1e8f7;
  --hcm-blue-50: #f1f4fb;
  /* Night blue (premium dark sections) and the previous header colours */
  /* Owner 2026-10-11: the near-black navy was hard on the eyes → dark sections use the banner blue range. */
  --hcm-night-950: var(--hcm-blue-900);
  --hcm-night-700: var(--hcm-blue-600);
  --hcm-live-blue: var(--hcm-blue-800);   /* header top bar + VISITORS / BUYERS pill: banner blue (owner: one blue with the banner) */
  --hcm-live-navy: #1e3c72;   /* menu text of the previous header */
  /* Banner lime ("XUẤT KHẨU") — highlight; text on it is always navy */
  --hcm-lime-400: #ccf45c;
  --hcm-lime-500: #b5e03a;
  /* Ink */
  --hcm-ink-900: #0f1733;
  --hcm-ink-700: #364263;
  --hcm-ink-500: #5a6582;   /* 5.6:1 on white */
  --hcm-white: #ffffff;
  /* Product zones, as coloured on the brochure floor plan */
  --hcm-zone-food: #1f7fd1;
  --hcm-zone-textile: #e6861a;
  --hcm-zone-craft: #8a3fb3;
  --hcm-zone-tools: #23914d;
  --hcm-zone-service: #138f8c;

  /* Semantic */
  --hcm-bg: var(--hcm-white);
  --hcm-bg-soft: var(--hcm-blue-50);
  --hcm-text: var(--hcm-ink-900);
  --hcm-text-body: var(--hcm-ink-700);
  --hcm-text-muted: var(--hcm-ink-500);
  --hcm-on-dark-muted: rgb(255 255 255 / 0.78);
  --hcm-brand: var(--hcm-blue-700);
  --hcm-line: rgb(15 23 51 / 0.1);
  --hcm-line-dark: rgb(255 255 255 / 0.16);
  --hcm-focus: var(--hcm-blue-500);

  /* Type */
  --hcm-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hcm-fs-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  --hcm-fs-h3: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  --hcm-fs-body: 1rem;
  --hcm-fs-small: 0.875rem;

  /* Layout, shape, depth, motion */
  --hcm-wrap: 1400px;      /* owner 2026-10-15: use the width of large screens, content should not sit in a narrow middle column */
  --hcm-gutter: clamp(16px, 4vw, 32px);
  --hcm-sec: clamp(48px, 5.5vw, 80px);
  --hcm-sec-home: clamp(40px, 4.4vw, 64px);
  --hcm-bar-h: 70px;
  --hcm-r: 10px;
  --hcm-r-lg: 16px;
  --hcm-cut: 14px; /* cut corner of buttons and tags */
  --hcm-shadow: 0 1px 2px rgb(15 23 51 / 0.06), 0 12px 32px rgb(15 23 51 / 0.08);
  --hcm-shadow-lift: 0 24px 56px rgb(20 36 92 / 0.18);
  --hcm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hcm-dur: 220ms;
  --hcm-stripes: repeating-linear-gradient(115deg, var(--hcm-lime-400) 0 14px, transparent 14px 34px);
}
@media (prefers-reduced-motion: reduce) { :root { --hcm-dur: 1ms; } }

/* ---------- Base: one family on every page (Theme Options print Roboto / Noto Sans; these selectors win) ---------- */
html body, html body :is(h1, h2, h3, h4, h5, h6, .heading-font, .alt-font, .nav > li > a, button, input, select, textarea, .button, blockquote) { font-family: var(--hcm-font); }
body { color: var(--hcm-text-body); background: var(--hcm-bg); -webkit-font-smoothing: antialiased; }
html { scroll-padding-top: calc(var(--hcm-bar-h) + 16px); }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 3px solid var(--hcm-focus); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; top: 12px; left: 12px; z-index: 200; width: auto; height: auto; clip: auto; padding: 12px 18px; border-radius: var(--hcm-r); background: var(--hcm-white); color: var(--hcm-brand); }
.hcm-wrap { width: 100%; max-width: calc(var(--hcm-wrap) + 2 * var(--hcm-gutter)); margin: 0 auto; padding: 0 var(--hcm-gutter); }
.hcm-icon { width: 20px; height: 20px; flex: none; }
.hcm-flag { width: 18px; height: 12px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }

/* Theme components are shielded from Flatsome's element styles (lists, headings, buttons). */
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page, .hcm-mbar) :is(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table) { margin: 0; }
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page, .hcm-mbar) :is(ul, ol) { padding: 0; list-style: none; }
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page, .hcm-mbar) li { margin: 0; }
/* Flatsome indents nested lists (ul ul: margin 1.5em 0 1.5em 3em); same specificity here, loaded later. */
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page) :is(ul, ol) :is(ul, ol) { margin: 0; }
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page) :is(h1, h2, h3, h4) { color: var(--hcm-text); letter-spacing: normal; text-transform: none; }
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page, .hcm-mbar) img { display: block; max-width: 100%; height: auto; }
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page, .hcm-mbar) a { text-decoration: none; }
:is(.hcm-header, .hcm-drawer, .hcm-home, .hcm-article-page) button { min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; line-height: 1.2; box-shadow: none; cursor: pointer; }
#wrapper, #main { overflow: visible; }
/* No lone word on the last line of headings and short texts. */
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page) :is(h1, h2, h3, h4) { text-wrap: balance; }
:where(.hcm-header, .hcm-drawer, .hcm-footer, .hcm-home, .hcm-news-page, .hcm-article-page) :is(p, dd, dt, li, figcaption, blockquote, th, td) { text-wrap: pretty; }
.hcm-layout #main { background: var(--hcm-bg); }

/* ---------- Type helpers ---------- */
/* Section title: capitals, banner-lime marker under the highlighted words */
.hcm-title { display: grid; justify-items: center; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); text-align: center; }
.hcm-title h2 { max-width: 900px; color: var(--hcm-blue-900); font-size: var(--hcm-fs-h2); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.hcm-title h2::after { content: ""; display: block; width: 64px; height: 6px; margin: 16px auto 0; background: var(--hcm-blue-700); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.hcm-title mark { padding: 0 0.12em; background: linear-gradient(transparent 58%, var(--hcm-lime-400) 58%, var(--hcm-lime-400) 92%, transparent 92%); color: inherit; }
.hcm-title p { max-width: 640px; color: var(--hcm-text-muted); }
.hcm-title--left { justify-items: start; text-align: left; }
.hcm-title--left h2::after { margin-left: 0; }
.hcm-title--row { grid-template-columns: 1fr auto; align-items: end; justify-items: start; text-align: left; }
.hcm-title--row h2::after { margin-left: 0; }
.hcm-title--light h2 { color: var(--hcm-white); }
.hcm-title--light h2::after { background: var(--hcm-lime-400); }
.hcm-title--light mark { background: none; color: var(--hcm-lime-400); }
.hcm-title--light p { color: var(--hcm-on-dark-muted); }
.hcm-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: clamp(28px, 4vw, 44px) !important; }

.hcm-link, a.hcm-link { display: inline-flex; align-items: center; gap: 8px; color: var(--hcm-brand); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.hcm-link .hcm-icon { width: 18px; height: 18px; transition: transform var(--hcm-dur) var(--hcm-ease); }
.hcm-link:hover .hcm-icon { transform: translateX(4px); }
.hcm-checks { display: grid; gap: 10px; }
.hcm-checks li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.hcm-checks .hcm-icon { width: 22px; height: 22px; padding: 4px; border-radius: 4px; background: var(--hcm-lime-400); color: var(--hcm-blue-900); }

/* ---------- Breadcrumb (news, posts, pages) ---------- */
.hcm-crumbs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 18px 0; color: var(--hcm-text-muted); font-size: var(--hcm-fs-small); font-weight: 600; }
.hcm-crumbs a, .hcm-crumbs a:visited { color: var(--hcm-text-muted); }
.hcm-crumbs a:hover { color: var(--hcm-blue-700); }
.hcm-crumbs--light, .hcm-crumbs--light a { color: var(--hcm-on-dark-muted); }
.hcm-crumbs--light a:hover { color: var(--hcm-lime-400); }

/* ---------- Buttons: rectangle with the top-right corner cut, like the banner tags ---------- */
.hcm-btn, a.hcm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 24px;
  border: 0; border-radius: 6px; font-family: var(--hcm-font); font-size: 0.86rem; font-weight: 800; line-height: 1.1;
  letter-spacing: 0.04em; text-transform: uppercase; text-align: center; white-space: nowrap; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--hcm-cut)) 0, 100% var(--hcm-cut), 100% 100%, 0 100%);
  transition: background-color var(--hcm-dur), color var(--hcm-dur), transform var(--hcm-dur) var(--hcm-ease);
}
.hcm-btn:focus-visible { outline-offset: -4px; }
.hcm-btn .hcm-icon { width: 18px; height: 18px; transition: transform var(--hcm-dur) var(--hcm-ease); }
.hcm-btn:hover .hcm-icon:last-child { transform: translateX(4px); }
.hcm-btn:active { transform: translateY(1px); }
.hcm-btn--lime, a.hcm-btn--lime { background: var(--hcm-lime-400); color: var(--hcm-blue-900); }
.hcm-btn--lime:hover, a.hcm-btn--lime:hover { background: var(--hcm-lime-500); color: var(--hcm-blue-900); }
.hcm-btn--blue, a.hcm-btn--blue { background: var(--hcm-blue-700); color: var(--hcm-white); }
.hcm-btn--blue:hover, a.hcm-btn--blue:hover { background: var(--hcm-blue-600); color: var(--hcm-white); }
/* Outlined buttons keep square corners: a cut corner would cut their border. */
.hcm-btn--line, .hcm-btn--line-light { clip-path: none; }
.hcm-btn--line, a.hcm-btn--line { background: var(--hcm-white); color: var(--hcm-blue-800); box-shadow: inset 0 0 0 2px var(--hcm-blue-100); }
.hcm-btn--line:hover, a.hcm-btn--line:hover { color: var(--hcm-blue-700); box-shadow: inset 0 0 0 2px var(--hcm-blue-700); }
.hcm-btn--line-light, a.hcm-btn--line-light { background: transparent; color: var(--hcm-white); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.4); }
.hcm-btn--line-light:hover, a.hcm-btn--line-light:hover { color: var(--hcm-white); box-shadow: inset 0 0 0 2px var(--hcm-white); }

/* ---------- Header: the site's previous header rebuilt (top bar + white 70 px bar, live colours) ---------- */
.hcm-topbar { background: var(--hcm-live-blue); color: var(--hcm-white); font-size: 0.82rem; font-weight: 600; }
.hcm-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 40px; }
.hcm-topbar__in > * { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hcm-topbar .hcm-icon { width: 15px; height: 15px; }
.hcm-topbar__date { color: var(--hcm-lime-400); font-weight: 800; letter-spacing: 0.02em; }
.hcm-topbar__venue { text-transform: uppercase; font-weight: 800; letter-spacing: 0.04em; }
.hcm-topbar a, .hcm-topbar a:visited { color: var(--hcm-white); }
.hcm-topbar a:hover { color: var(--hcm-lime-400); }

.hcm-header { position: sticky; top: 0; z-index: 60; background: var(--hcm-white); transition: box-shadow 300ms var(--hcm-ease); }
.admin-bar .hcm-header { top: 32px; }
.hcm-header.is-scrolled { box-shadow: 0 4px 22px rgb(14 26 72 / 0.12); }
.hcm-bar { display: flex; align-items: center; height: var(--hcm-bar-h); }

/* The logo file is a square with wide margins: show the middle band, where the EXPO mark is. */
.hcm-logo, .hcm-header a.hcm-logo { display: block; flex: none; width: 96px; height: 50px; overflow: hidden; }
.hcm-logo img { width: 96px; height: 50px; object-fit: cover; }

.hcm-nav { flex: 1; height: 100%; margin-left: clamp(24px, 9vw, 130px); }
.hcm-nav__list { display: flex; align-items: stretch; height: 100%; }
.hcm-nav__item { position: relative; display: flex; align-items: center; }
.hcm-header .hcm-nav__link {
  position: relative; display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px; color: var(--hcm-live-navy);
  font-family: var(--hcm-font); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--hcm-dur);
}
.hcm-header .hcm-nav__item.has-sub > a.hcm-nav__link { padding-right: 2px; }
.hcm-nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 3px; border-radius: 2px; background: var(--hcm-lime-500); transform: scaleX(0); transform-origin: left; transition: transform var(--hcm-dur) var(--hcm-ease); }
.hcm-nav__item.has-sub > a.hcm-nav__link::after { right: 2px; }
.hcm-header .hcm-nav__link:hover, .hcm-header .hcm-nav__link[aria-current] { color: var(--hcm-blue-600); }
.hcm-nav__item:hover > .hcm-nav__link::after, .hcm-nav__item.is-open > .hcm-nav__link::after, .hcm-nav__link[aria-current]::after { transform: none; }
.hcm-header .hcm-nav__toggle { display: grid; place-items: center; width: 22px; height: 34px; margin-right: 12px; color: var(--hcm-live-navy); }
.hcm-nav__item > .hcm-icon, .hcm-nav__toggle .hcm-icon, .hcm-nav__lang > .hcm-icon { width: 13px; height: 13px; transition: transform var(--hcm-dur) var(--hcm-ease); }
.hcm-nav__item:hover .hcm-nav__toggle .hcm-icon, .hcm-nav__item.is-open .hcm-nav__toggle .hcm-icon, .hcm-nav__item:hover .hcm-nav__lang > .hcm-icon, .hcm-nav__item.is-open .hcm-nav__lang > .hcm-icon { transform: rotate(180deg); }
.hcm-nav__item--lang { margin-left: auto; }
.hcm-header button.hcm-nav__lang { gap: 8px; }
.hcm-nav__lang::after { display: none; }

.hcm-header .hcm-search-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 6px 0 4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--hcm-live-navy); }
.hcm-header .hcm-search-btn:hover { background: var(--hcm-blue-50); color: var(--hcm-live-blue); }
.hcm-search-btn .hcm-icon { width: 20px; height: 20px; }

/* "VISITORS / BUYERS" pill */
.hcm-pill { display: flex; align-items: center; flex: none; gap: 2px; padding: 0 18px 0 12px; height: 44px; border-radius: 999px; background: var(--hcm-live-blue); color: var(--hcm-white); box-shadow: 0 8px 20px rgb(28 52 132 / 0.28); transition: background-color var(--hcm-dur), box-shadow var(--hcm-dur); }
.hcm-pill:hover { background: var(--hcm-night-700); box-shadow: 0 10px 26px rgb(28 52 132 / 0.4); }
.hcm-pill a, .hcm-header .hcm-pill a { padding: 6px 8px; border-radius: 999px; color: var(--hcm-white); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transition: background-color var(--hcm-dur), color var(--hcm-dur); }
.hcm-pill a:hover, .hcm-header .hcm-pill a:hover { background: var(--hcm-white); color: var(--hcm-live-blue); }
.hcm-pill > span { opacity: 0.7; }
.hcm-pill > .hcm-icon { width: 18px; height: 18px; margin-left: 4px; }
.hcm-pill a:focus-visible { outline: 2px solid var(--hcm-white); outline-offset: 1px; }

/* Dropdown: white card (owner 2026-10-15: easier to read than blue), numbered items, register call at the bottom */
.hcm-header .hcm-sub {
  position: absolute; top: calc(100% - 4px); left: -8px; z-index: 5; width: 360px; overflow: hidden; border-radius: 14px;
  background: var(--hcm-white); box-shadow: 0 24px 56px rgb(20 36 92 / 0.18), 0 0 0 1px rgb(20 36 92 / 0.08);
  opacity: 0; visibility: hidden; transform: translateY(10px); transform-origin: top left;
  transition: opacity 200ms var(--hcm-ease), transform 220ms var(--hcm-ease), visibility 200ms;
}
.hcm-header .hcm-sub::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--hcm-blue-700), var(--hcm-lime-500)); }
.hcm-nav__item:nth-last-child(-n+2) > .hcm-sub { left: auto; right: -8px; transform-origin: top right; }
.hcm-nav__item:hover > .hcm-sub, .hcm-nav__item:focus-within > .hcm-sub, .hcm-nav__item.is-open > .hcm-sub { opacity: 1; visibility: visible; transform: none; }
.hcm-sub__list { position: relative; display: grid; gap: 2px; padding: 10px 8px 8px; }
.hcm-header .hcm-sub__list a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; color: var(--hcm-ink-900); transition: background-color var(--hcm-dur);
}
.hcm-sub__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--hcm-blue-50); color: var(--hcm-blue-700); font-size: 0.76rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: background-color var(--hcm-dur), color var(--hcm-dur); }
.hcm-sub__text { display: grid; gap: 2px; min-width: 0; }
.hcm-sub__text strong { color: var(--hcm-ink-900); font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.hcm-sub__text span { color: var(--hcm-text-muted); font-size: 0.76rem; font-weight: 500; line-height: 1.4; }
.hcm-sub__go { width: 16px; height: 16px; color: var(--hcm-blue-600); opacity: 0; transform: translateX(-6px); transition: opacity var(--hcm-dur), transform var(--hcm-dur) var(--hcm-ease); }
.hcm-header .hcm-sub__list a:hover, .hcm-header .hcm-sub__list a:focus-visible, .hcm-header .hcm-sub__list a[aria-current] { background: var(--hcm-blue-50); }
.hcm-sub__list a:hover .hcm-sub__num, .hcm-sub__list a[aria-current] .hcm-sub__num { background: var(--hcm-blue-700); color: var(--hcm-white); }
.hcm-sub__list a:hover .hcm-sub__go, .hcm-sub__list a:focus-visible .hcm-sub__go { opacity: 1; transform: none; }
.hcm-sub__list a:hover strong, .hcm-sub__list a[aria-current] strong { color: var(--hcm-blue-700); }
.hcm-sub__list > li { opacity: 0; transform: translateY(6px); transition: opacity 240ms var(--hcm-ease), transform 240ms var(--hcm-ease); }
.hcm-nav__item:hover .hcm-sub__list > li, .hcm-nav__item:focus-within .hcm-sub__list > li, .hcm-nav__item.is-open .hcm-sub__list > li { opacity: 1; transform: none; }
.hcm-sub__list > li:nth-child(2) { transition-delay: 35ms; }
.hcm-sub__list > li:nth-child(3) { transition-delay: 70ms; }
.hcm-sub__list > li:nth-child(4) { transition-delay: 105ms; }
.hcm-sub__list > li:nth-child(5) { transition-delay: 140ms; }
.hcm-sub__list > li:nth-child(6) { transition-delay: 175ms; }
.hcm-header .hcm-sub__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 8px 8px; padding: 12px 14px; border-radius: 10px; background: var(--hcm-blue-700); color: var(--hcm-white); transition: background-color var(--hcm-dur); }
.hcm-sub__cta span { color: rgb(255 255 255 / 0.8); font-size: 0.74rem; font-weight: 600; line-height: 1.35; }
.hcm-sub__cta strong { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--hcm-lime-400); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.hcm-sub__cta .hcm-icon { width: 15px; height: 15px; transition: transform var(--hcm-dur) var(--hcm-ease); }
.hcm-header .hcm-sub__cta:hover { background: var(--hcm-blue-600); color: var(--hcm-white); }
.hcm-sub__cta:hover .hcm-icon { transform: translateX(3px); }
.hcm-header .hcm-sub--lang { width: 210px; }
.hcm-sub--lang .hcm-sub__list a { grid-template-columns: 18px minmax(0, 1fr) 16px; }
.hcm-sub__check { width: 16px; height: 16px; color: var(--hcm-blue-700); }
@media (prefers-reduced-motion: reduce) { .hcm-sub__list > li { transform: none; transition-delay: 0ms !important; } .hcm-header .hcm-sub { transform: none; } }

/* Phones: logo · Buyers · Visitors · search · menu (as on the previous site) */
.hcm-mreg { display: none; gap: 6px; margin-left: auto; }
.hcm-mreg a { display: grid; place-items: center; height: 34px; padding: 0 12px; border-radius: 5px; background: var(--hcm-live-blue); color: var(--hcm-white); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.hcm-mreg a + a { background: var(--hcm-lime-400); color: var(--hcm-night-950); }
.hcm-header .hcm-burger { display: none; place-items: center; width: 40px; height: 40px; border: 2px solid var(--hcm-live-navy); border-radius: 50%; background: none; color: var(--hcm-live-navy); }
.hcm-burger__lines { position: relative; width: 16px; height: 2px; background: currentColor; }
.hcm-burger__lines::before, .hcm-burger__lines::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.hcm-burger__lines::before { top: -5px; }
.hcm-burger__lines::after { top: 5px; }

/* Search: native dialog */
.hcm-search { width: min(680px, calc(100% - 32px)); margin: 12vh auto auto; padding: 0; border: 0; border-radius: 18px; background: transparent; overflow: visible; }
.hcm-search::backdrop { background: rgb(5 11 36 / 0.75); backdrop-filter: blur(6px); }
.hcm-search[open] { animation: hcm-pop 220ms var(--hcm-ease); }
@keyframes hcm-pop { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: none; } }
.hcm-search__form { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 20px; border-radius: 18px; background: var(--hcm-white); box-shadow: 0 30px 80px rgb(0 0 0 / 0.35); }
.hcm-search__form > .hcm-icon { width: 22px; height: 22px; color: var(--hcm-live-blue); }
.hcm-search__form input { flex: 1; min-width: 0; height: 52px; margin: 0; border: 0; box-shadow: none; background: none; color: var(--hcm-ink-900); font-size: 1.05rem; }
.hcm-search__form input:focus { outline: none; box-shadow: none; }
.hcm-search__form button { height: 52px; margin: 0; padding: 0 22px; border: 0; border-radius: 12px; background: var(--hcm-live-blue); color: var(--hcm-white); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.hcm-search .hcm-search__close { position: absolute; top: -52px; right: 0; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.15); color: var(--hcm-white); }

@media (max-width: 1279px) {
  .hcm-nav { margin-left: 20px; }
  .hcm-header .hcm-nav__link { padding: 0 10px; font-size: 0.78rem; }
  .hcm-nav__link::after { left: 10px; right: 10px; }
  .hcm-header .hcm-nav__toggle { margin-right: 6px; }
  .hcm-nav__lang > span:not(.screen-reader-text) { display: none; }
  .hcm-pill { padding: 0 14px 0 8px; }
}
@media (max-width: 1100px) { .hcm-pill > .hcm-icon { display: none; } }
@media (max-width: 1023px) {
  :root { --hcm-bar-h: 62px; }
  .hcm-topbar__venue { display: none; }
  .hcm-nav, .hcm-pill { display: none; }
  .hcm-mreg, .hcm-header .hcm-burger { display: flex; }
  .hcm-header .hcm-burger { display: grid; }
  .hcm-header .hcm-search-btn { margin: 0 2px 0 6px; }
  .hcm-logo, .hcm-header a.hcm-logo, .hcm-logo img { width: 84px; height: 44px; }
}
@media (max-width: 600px) { .hcm-topbar__mail { display: none !important; } .hcm-topbar__in { justify-content: center; } }
@media (max-width: 400px) { .hcm-mreg a { padding: 0 8px; font-size: 0.68rem; } .hcm-logo, .hcm-header a.hcm-logo, .hcm-logo img { width: 72px; height: 38px; } }
@media (max-width: 782px) { .admin-bar .hcm-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .hcm-header { top: 0; } }

/* ---------- Mobile menu: white full-screen sheet (same look as the desktop dropdowns) ---------- */
.hcm-drawer { position: fixed; inset: 0; z-index: 120; overflow-y: auto; background: var(--hcm-white); color: var(--hcm-ink-900); }
.hcm-drawer[hidden] { display: none; }
.hcm-drawer__panel { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 100%; padding: 12px var(--hcm-gutter) calc(24px + env(safe-area-inset-bottom)); animation: hcm-drop 240ms var(--hcm-ease) both; }
@keyframes hcm-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.hcm-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--hcm-line); }
.hcm-logo--drawer, .hcm-logo--drawer img { width: 96px; height: 50px; }
.hcm-drawer .hcm-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--hcm-blue-50); color: var(--hcm-blue-800); }
.hcm-drawer__list > li { border-bottom: 1px solid var(--hcm-line); }
.hcm-drawer__list > li > a, .hcm-drawer__list summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; color: var(--hcm-blue-900); font-size: 0.98rem; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; cursor: pointer; list-style: none; }
.hcm-drawer__list summary::-webkit-details-marker { display: none; }
.hcm-drawer__list summary .hcm-icon { width: 18px; height: 18px; color: var(--hcm-blue-600); transition: transform var(--hcm-dur); }
.hcm-drawer__list details[open] summary { color: var(--hcm-blue-600); }
.hcm-drawer__list details[open] summary .hcm-icon { transform: rotate(180deg); }
.hcm-drawer__list details ul { display: grid; gap: 2px; margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--hcm-lime-500); }
.hcm-drawer__list details a { display: block; padding: 9px 0; color: var(--hcm-ink-700); font-size: 0.96rem; font-weight: 600; }
.hcm-drawer__list a:hover, .hcm-drawer__list a:focus-visible { color: var(--hcm-blue-600); }
/* Language: one compact two-option switch */
.hcm-drawer__langs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--hcm-blue-50); }
.hcm-drawer__langs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--hcm-blue-900); font-size: 0.9rem; font-weight: 700; }
.hcm-drawer__langs a[aria-current] { background: var(--hcm-white); color: var(--hcm-blue-700); box-shadow: 0 2px 8px rgb(20 36 92 / 0.15); }
.hcm-drawer__meta { display: flex; align-items: center; gap: 10px; margin-top: auto !important; padding-top: 14px; border-top: 1px solid var(--hcm-line); color: var(--hcm-text-muted); font-size: 0.86rem; }
.hcm-drawer__meta .hcm-icon { width: 18px; height: 18px; color: var(--hcm-blue-600); }
body.hcm-locked { overflow: hidden; }

/* ---------- Footer ---------- */
.hcm-footer { position: relative; overflow: hidden; background: var(--hcm-night-950); color: var(--hcm-on-dark-muted); font-size: 0.92rem; line-height: 1.6; content-visibility: auto; contain-intrinsic-size: auto 800px; }
.hcm-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--hcm-blue-500), var(--hcm-lime-400)); }
.hcm-footer__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding-top: clamp(56px, 7vw, 80px); padding-bottom: 40px; border-bottom: 1px solid var(--hcm-line-dark); }
.hcm-footer__org { display: flex; gap: 28px; align-items: flex-start; }
.hcm-footer__qr { flex: none; display: grid; gap: 8px; justify-items: center; padding: 10px; border-radius: var(--hcm-r); background: var(--hcm-white); }
.hcm-footer__qr img { width: 112px; height: 112px; }
.hcm-footer__qr figcaption { color: var(--hcm-blue-900); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.hcm-footer__eyebrow { color: var(--hcm-lime-400); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.hcm-footer__name { margin-top: 8px !important; color: var(--hcm-white); font-size: 1.15rem; font-weight: 800; line-height: 1.35; text-transform: uppercase; }
.hcm-footer__parent { margin-top: 4px !important; color: var(--hcm-white); font-weight: 700; text-transform: uppercase; }
.hcm-footer__facts { display: grid; gap: 8px; margin-top: 18px !important; }
.hcm-footer__facts li { display: flex; gap: 10px; }
.hcm-footer__facts .hcm-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--hcm-lime-400); }
.hcm-footer a, .hcm-footer__facts a { color: var(--hcm-on-dark-muted); transition: color var(--hcm-dur); }
.hcm-footer a:hover { color: var(--hcm-lime-400); }
.hcm-footer__title { margin-bottom: 16px !important; color: var(--hcm-white) !important; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.hcm-footer__people table { width: 100%; border-collapse: collapse; border: 0; }
.hcm-footer__people tr { border-bottom: 1px solid var(--hcm-line-dark); }
.hcm-footer__people :is(th, td) { padding: 12px 10px 12px 0; border: 0; color: inherit; font-size: 0.9rem; text-align: left; vertical-align: middle; }
.hcm-footer__people th { color: var(--hcm-white); font-weight: 700; text-transform: none; letter-spacing: 0; }
.hcm-footer__people td a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hcm-footer__people .hcm-icon { width: 16px; height: 16px; color: var(--hcm-lime-400); }
.hcm-footer__links { display: grid; grid-template-columns: repeat(3, 1fr) 1.6fr; gap: 32px; padding-top: 40px; padding-bottom: 32px; }
.hcm-footer__links ul { display: grid; gap: 10px; }
.hcm-footer__orgs dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.hcm-footer__orgs dt { color: var(--hcm-lime-400); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.hcm-footer__orgs dd { margin-top: 2px !important; color: var(--hcm-white); font-size: 0.86rem; font-weight: 600; line-height: 1.45; text-transform: none; }
.hcm-footer__wordmark { margin: 0 !important; padding: 0 var(--hcm-gutter); color: transparent; font-size: min(7.2vw, 7.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; text-align: center; white-space: nowrap; -webkit-text-stroke: 1px rgb(255 255 255 / 0.18); user-select: none; }
.hcm-footer__wordmark span { -webkit-text-stroke: 1px rgb(204 244 92 / 0.5); }
.hcm-footer__bottom { background: rgb(0 0 0 / 0.2); }
.hcm-footer__bottom .hcm-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; padding-bottom: 18px; font-size: var(--hcm-fs-small); }
@media (max-width: 1023px) {
  .hcm-footer__top { grid-template-columns: 1fr; }
  .hcm-footer__links { grid-template-columns: repeat(3, 1fr); }
  .hcm-footer__orgs { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hcm-footer__org { flex-direction: column; }
  .hcm-footer__links { grid-template-columns: 1fr 1fr; }
  .hcm-footer__people tr { display: grid; gap: 4px; padding: 10px 0; }
  .hcm-footer__people :is(th, td) { padding: 0; }
  .hcm-footer__bottom .hcm-wrap { padding-bottom: 80px; } /* room for the bottom bar */
}
@media (max-width: 479px) { .hcm-footer__orgs dl { grid-template-columns: 1fr; } }

/* ---------- Back to top (round, like the previous site) + slim registration bar on phones ---------- */
.hcm-totop, a.hcm-totop {
  position: fixed; right: 20px; bottom: 24px; z-index: 55; display: grid; place-items: center; width: 48px; height: 48px;
  border: 2px solid var(--hcm-blue-700); border-radius: 50%; background: var(--hcm-white); color: var(--hcm-blue-700);
  box-shadow: 0 8px 20px rgb(20 36 92 / 0.15); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 240ms, transform 240ms var(--hcm-ease), visibility 240ms, background-color var(--hcm-dur), color var(--hcm-dur);
}
.hcm-totop .hcm-icon { transform: rotate(-90deg); }
.hcm-totop.is-past { opacity: 1; visibility: visible; transform: none; }
.hcm-totop:hover { background: var(--hcm-blue-700); color: var(--hcm-white); }
.hcm-mbar { display: none; }
@media (max-width: 767px) {
  .hcm-totop, a.hcm-totop { bottom: 76px; right: 14px; width: 42px; height: 42px; }
  .hcm-mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--hcm-white); box-shadow: 0 -6px 20px rgb(20 36 92 / 0.12); transform: translateY(110%); transition: transform 260ms var(--hcm-ease);
  }
  .hcm-mbar.is-past { transform: none; }
  .hcm-mbar a { display: grid; place-items: center; min-height: 46px; border-radius: 10px; font-weight: 800; }
  .hcm-mbar__main, a.hcm-mbar__main { flex: 1; background: var(--hcm-blue-700); color: var(--hcm-white); font-size: 0.86rem; letter-spacing: 0.03em; text-transform: uppercase; }
  .hcm-mbar__call, a.hcm-mbar__call { width: 52px; background: var(--hcm-lime-400); color: var(--hcm-blue-900); }
}

/* ---------- Motion: reveal on scroll (JS adds .hcm-js), stagger children ---------- */
.hcm-js .hcm-reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--hcm-ease), transform 700ms var(--hcm-ease); }
.hcm-js .hcm-reveal.is-in { opacity: 1; transform: none; }
.hcm-js [data-hcm-stagger] > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--hcm-ease), transform 600ms var(--hcm-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.hcm-js .is-in[data-hcm-stagger] > *, .hcm-js .is-in [data-hcm-stagger] > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hcm-js .hcm-reveal, .hcm-js [data-hcm-stagger] > * { transform: none; transition-duration: 1ms; transition-delay: 0ms; }
}

/* ---------- UX Builder pages (inner pages keep their layout): brand colours for Flatsome parts ---------- */
.hcm-page #content :is(h1, h2, h3) { color: var(--hcm-blue-900); }
.hcm:not(.hcm-layout) #main .button.primary:not(.is-outline), .hcm:not(.hcm-layout) #main .button.alert:not(.is-outline) { background-color: var(--hcm-blue-700); }
.hcm:not(.hcm-layout) #main .button.primary:not(.is-outline):hover, .hcm:not(.hcm-layout) #main .button.alert:not(.is-outline):hover { background-color: var(--hcm-blue-600); box-shadow: none; }
.hcm #main .page-title, .hcm #main .page-header-wrapper { font-family: var(--hcm-font); }