/**
 * gh-shell.css
 * GUARDHOUND-EN-HEADER-SHARED-SHELL-CONSOLIDATION-V1
 * THE single stylesheet for the English public header shell.
 * Every EN page links this file; NO page re-declares shell CSS.
 * Derived from the boss-confirmed golden baseline https://guardhound.net/
 *
 * Rules are emitted in SOURCE ORDER so the cascade matches the golden.
 * Rules the shell merely INHERITS from page-global CSS are scoped under
 * the shell roots, so linking this file cannot restyle a page body.
 */

/* ---- inherited page-global rules, SCOPED to the shell ---- */
/* :where() adds ZERO specificity, so each scoped rule keeps the EXACT
   specificity of the page-global rule it replaces, while the descendant
   combinator guarantees it can never match outside the shell. */
:where(.topbar, nav.nav, .topbar *, nav.nav *) { margin:0;padding:0;box-sizing:border-box }
:where(.topbar, nav.nav) .wrap { max-width:1240px;margin:0 auto;padding:0 34px }
:where(.topbar, nav.nav) a { text-decoration:none;color:inherit }
:where(.topbar, nav.nav) input, :where(.topbar, nav.nav) textarea, :where(.topbar, nav.nav) select, :where(.topbar, nav.nav) button { font-family:inherit }
:where(.topbar, nav.nav) img, :where(.topbar, nav.nav) svg { display:block;max-width:100% }
:where(.topbar, nav.nav) .btn { display:inline-flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;font-size:15.5px;padding:13px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;transition:.2s }
:where(.topbar, nav.nav) .btn-blue { background:var(--blue);color:#fff }
:where(.topbar, nav.nav) .btn-blue:hover { background:var(--blue-hover) }

/* ---- self-hosted shell fonts (golden baseline). @font-face only
   REGISTERS a family, so it cannot restyle any page content. ---- */
@font-face { font-family: "GuardHound Sans SC"; src: url("/fonts/gh-sans-sc.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+2E80-2EFF, U+3000-303F, U+3040-30FF, U+3100-312F, U+31A0-31BF, U+3200-32FF, U+3300-33FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE10-FE1F, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "GuardHound Manrope"; src: url("/fonts/gh-manrope.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "GuardHound Inter"; src: url("/fonts/gh-inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "GuardHound Mono"; src: url("/fonts/gh-mono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

/* ---- design tokens (golden baseline values), scoped to the shell ---- */
.topbar, nav.nav {
  --foot: #05070D;
  --on-dark-2: #B4BAC4;
  --on-dark: #F5F5F7;
  --line-dark: rgba(255,255,255,.14);
  --r-pill: 999px;
  --mono: 'GuardHound Mono','GuardHound Sans SC',Consolas,monospace;
  --head: 'GuardHound Manrope','GuardHound Sans SC',-apple-system,'Segoe UI',sans-serif;
  --blue: #006BD6;
  --blue-hover: #0059BE;
  --ink: #1D1D1F;
  --line: rgba(0,0,0,.10);
  --bg: #F5F5F7;
}


/* ---- shell pins ----------------------------------------------------
   Values the shell must NOT inherit from a page's base CSS.  Measured on
   the CAT detail canary: its `body{line-height:1.5}` made the nav CTA
   2px shorter (38.25 vs 40.27) than the golden homepage, whose base is
   1.65.  Pinning the ratio keeps ONE shell height on every page.
   1.65 x 13.5px = 22.275px, i.e. byte-identical to the golden value. ---- */
:where(.topbar, nav.nav) .btn { line-height: 1.65; }

.topbar { background: var(--foot); color: var(--on-dark-2); font-size: 12px; position: relative; z-index: 120; }
.topbar .wrap { display: flex; align-items: center; gap: 18px; padding: 5px 34px; flex-wrap: wrap; min-height: 30px; }
.topbar a { color: var(--on-dark-2); transition: 0.2s; }
.topbar a:hover { color: rgb(255, 255, 255); }
.topbar .tb-left { display: flex; gap: 6px; align-items: center; }
.tb-lang { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-dark); color: var(--on-dark-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; }
.tb-lang.on { background: var(--blue); border-color: var(--blue); color: rgb(255, 255, 255); }
.topbar .tb-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.tb-more { position: relative; }
.tb-more .tb-more-btn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--on-dark-2); border: 1px solid var(--line-dark); border-radius: var(--r-pill); padding: 2px 10px; line-height: 1.6; cursor: pointer; white-space: nowrap; transition: 0.2s; background: none; }
.tb-more .tb-more-btn:hover { color: rgb(255, 255, 255); border-color: var(--blue); }
.tb-more .tb-more-btn i { font-style: normal; font-size: 8px; opacity: 0.75; transition: transform 0.2s; }
.tb-more.open .tb-more-btn { color: rgb(255, 255, 255); background: var(--blue); border-color: var(--blue); }
.tb-more.open .tb-more-btn i { transform: rotate(180deg); }
.tb-menu.tb-menu-lang { min-width: 216px; width: auto; padding: 14px; }
.tb-langs-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; padding: 0px 2px; }
.tb-langs-head b { font-size: 12.5px; font-weight: 600; color: rgb(245, 245, 247); white-space: nowrap; }
.tb-langs-head small { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--on-dark-2); white-space: nowrap; }
.tb-langs { display: flex; flex-direction: column; gap: 6px; }
.tb-lang-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tb-langs a { display: block; padding: 7px 11px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(245, 245, 247, 0.88); font-size: 12.5px; text-align: left; white-space: nowrap; transition: 0.15s; text-decoration: none; }
.tb-langs a:hover { color: rgb(255, 255, 255); border-color: var(--blue); background: rgba(0, 113, 227, 0.16); }
.tb-more.open .tb-menu { display: block; animation: 0.18s ease 0s 1 normal none running tbIn; }
.topbar .tb-right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.tb-drop { position: relative; }
.tb-dd { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 8px; border-radius: 8px; color: var(--on-dark-2); transition: 0.2s; font-size: 12px; }
.tb-dd:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.06); }
.tb-dd i { font-style: normal; font-size: 9px; opacity: 0.7; transition: transform 0.2s; }
.tb-drop.open .tb-dd { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.06); }
.tb-drop.open .tb-dd i { transform: rotate(180deg); }
.tb-menu { position: absolute; top: calc(100% + 8px); right: 0px; display: none; min-width: 240px; background: rgb(10, 16, 30); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 16px; box-shadow: rgba(0, 0, 0, 0.5) 0px 24px 60px; z-index: 300; }
.tb-drop.open .tb-menu { display: block; animation: 0.18s ease 0s 1 normal none running tbIn; }
.nav { position: sticky; top: 0px; z-index: 100; background: rgba(245, 245, 247, 0.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 64px; }
@media (min-width: 1440px) {
  .nav .wrap { width: calc(100% - 120px); max-width: 1680px; }
}
@media (min-width: 1440px) {
  .nav .nav-links { gap: 26px; }
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand svg { width: 30px; height: 30px; }
.brand-name { font-family: var(--head); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand-sub { display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.22em; color: var(--blue); text-transform: uppercase; margin-top: 2px; }
.nav-links { display: flex; gap: 20px; font-size: 13px; font-weight: 500; color: var(--ink); }
.nav-links a { opacity: 0.8; transition: 0.2s; white-space: nowrap; }
.nav-links a.on, .nav-links a:hover { opacity: 1; color: var(--blue); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-search { display: flex; align-items: center; gap: 0px; position: relative; }
.nav-search-toggle { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; transition: 0.2s; border: 1px solid transparent; background: none; }
.nav-search-toggle:hover { color: var(--blue); background: rgba(0, 113, 227, 0.07); }
.nav-search-input { width: 0px; opacity: 0; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0px; height: 34px; font-size: 13px; color: var(--ink); font-family: var(--body); background: rgb(255, 255, 255); transition: 0.25s; }
.nav-search.open .nav-search-input { width: 210px; opacity: 1; padding: 0px 14px; }
.nav-search-input:focus { outline: 0px; border-color: var(--blue); box-shadow: rgba(0, 113, 227, 0.1) 0px 0px 0px 4px; }
.nav-duo { display: flex; gap: 8px; flex: 0 0 auto; }
.nav-duo a { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 13px; transition: 0.2s; white-space: nowrap; }
.nav-duo a:hover { color: var(--blue); border-color: rgba(0, 113, 227, 0.4); }
.nav .btn { padding: 9px 20px; font-size: 13.5px; flex: 0 0 auto; }
.nav-menu-toggle { width: 34px; height: 34px; border-radius: 50%; display: none; place-items: center; color: var(--ink-2); cursor: pointer; transition: 0.2s; border: 1px solid transparent; background: none; flex: 0 0 auto; }
.nav-menu-toggle:hover { color: var(--blue); background: rgba(0, 113, 227, 0.07); }
.nav.dark { background: rgba(15, 21, 35, 0.72); border-bottom-color: rgba(255, 255, 255, 0.12); }
.nav.dark .brand-name { color: rgb(245, 245, 247); }
.nav.dark .brand-sub { color: rgb(127, 180, 240); }
.nav.dark .brand svg circle, .nav.dark .brand svg path { stroke: rgb(245, 245, 247); }
.nav.dark .brand svg path[fill="#1D1D1F"] { fill: rgb(245, 245, 247); }
.nav.dark .brand svg circle:last-child { stroke: rgb(41, 151, 255); fill: rgb(41, 151, 255); }
.nav.dark .nav-links a { color: rgba(245, 245, 247, 0.85); }
.nav.dark .nav-links a:hover { color: rgb(255, 255, 255); }
.nav.dark .nav-duo a { border-color: rgba(255, 255, 255, 0.22); color: rgba(245, 245, 247, 0.65); }
.nav.dark .nav-duo a:hover { color: rgb(255, 255, 255); border-color: rgba(255, 255, 255, 0.4); }
.nav.dark .nav-search-toggle { color: rgba(245, 245, 247, 0.75); }
.nav.dark .nav-search-toggle:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.08); }
.nav.dark .nav-search-input { background: rgba(245, 245, 247, 0.12); border-color: rgba(255, 255, 255, 0.2); color: rgb(245, 245, 247); }
.nav.dark .nav-search-input::placeholder { color: rgb(139, 147, 161); }
@media (max-width: 1280px) {
  .nav-links { gap: 14px; }
}
@media (max-width: 1280px) {
  .nav .wrap { gap: 20px; }
}
@media (max-width: 1280px) {
  .nav-duo { gap: 6px; }
}
@media (max-width: 1280px) {
  .nav-duo a { padding: 6px 12px; }
}
@media (max-width: 1120px) {
  .nav-links a:nth-child(n+5) { display: none; }
}
@media (min-width: 1121px) and (max-width: 1212px) {
  .nav-links { gap: 10px; }
}
@media (min-width: 1121px) and (max-width: 1212px) {
  .nav-links a:nth-child(n+6) { display: none; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
}
@media (max-width: 960px) {
  .nav-duo { display: none; }
}
@media (max-width: 960px) {
  .nav-menu-toggle { display: grid; }
}
.nav.dark .nav-menu-toggle { color: rgba(245, 245, 247, 0.75); }
.nav.dark .nav-menu-toggle:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.08); }
.nav-panel { position: absolute; top: 100%; left: 0px; right: 0px; z-index: 99; background: rgba(247, 248, 250, 0.98); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: none; box-shadow: rgba(15, 21, 35, 0.12) 0px 24px 60px; }
.nav-panel.open { display: block; animation: 0.22s cubic-bezier(0.2, 0.65, 0.2, 1) 0s 1 normal none running npIn; }
.np-scroll { max-height: calc(-64px + 100vh); overflow-y: auto; padding: 22px 22px 30px; }
.np-group { display: flex; flex-direction: column; gap: 8px; }
.np-title { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; color: var(--ink-3); margin: 2px 0px 6px; text-transform: uppercase; }
.np-pill { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 11px 16px; transition: 0.2s; text-decoration: none; }
.np-pill small { font-family: var(--body); font-size: 11px; font-weight: 400; letter-spacing: 0px; color: var(--ink-3); }
.np-pill:hover { color: var(--blue); border-color: rgba(0, 113, 227, 0.4); }
.np-links { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.07); }
.np-link { padding: 11px 14px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; border-radius: 10px; transition: 0.2s; opacity: 0.85; }
.np-link:hover { background: rgba(0, 113, 227, 0.06); color: var(--blue); opacity: 1; }
.np-cta { margin-top: 20px; justify-content: center; width: 100%; font-size: 14px; padding: 12px 22px; }
@media (min-width: 961px) {
  .nav-panel { display: none !important; }
}

/* ---- desktop dropdown (mega) panel · THE SHELL OWNS THIS VISUAL ----
   The shell emits the .nv-mega markup (see includes/gh-shell/render.php) but
   historically left its styling to each page's inline <style>. A page that
   linked this file WITHOUT re-declaring .nv-mega therefore painted the panel
   with the LIGHT base colours while nav.dark had already turned every label
   near-white. Measured on /design-preview/products/en-cat-products.html:
   panel rgba(255,255,255,.92) + item rgba(246,247,250,.93) = contrast 1.07.

   These are the dropdown's dark-state values, byte-identical to what the
   golden pages already carry inline, so a page that DOES declare them is
   unaffected (its later, equal-or-higher specificity rules still win) and a
   page that does not finally renders the same dropdown.

   Scope is dropdown APPEARANCE only: panel surface, item / subtitle / divider
   colour and the hover + current-item states. No size, spacing, position or
   navigation-content property is declared here. */
.nav.dark .nv-mega { background: rgba(15, 21, 35, 0.92); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); }
.nav.dark .nv-mega a { color: #F5F5F7; }
.nav.dark .nv-mega a:hover { background: rgba(41, 151, 255, 0.14); color: var(--blue-dark); }
.nav.dark .nv-mega a.on { background: rgba(41, 151, 255, 0.16); color: var(--blue-dark); }
.nav.dark .nv-mega small { color: rgba(245, 245, 247, 0.55); }
.nav.dark .nv-mega-sep { background: rgba(255, 255, 255, 0.10); }

.np-lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0px 6px; }
.np-lang { display: block; text-align: center; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); font-size: 12.5px; text-decoration: none; transition: 0.15s; }
.np-lang:hover { color: var(--blue); border-color: rgba(0, 113, 227, 0.4); }
.np-lang.on { background: var(--blue); border-color: var(--blue); color: rgb(255, 255, 255); font-weight: 600; }
@media (max-width: 480px) {
  .nav .wrap { gap: 14px; }
}
@media (max-width: 480px) {
  .nav .btn { padding: 8px 16px; font-size: 12.5px; }
}
@media (max-width: 420px) {
  .brand { gap: 8px; }
}
@media (max-width: 420px) {
  .brand-name { font-size: 15px; }
}
@media (max-width: 420px) {
  .nav .wrap { gap: 10px; }
}
@media (max-width: 420px) {
  .nav .btn { padding: 8px 14px; font-size: 12px; }
}
@media (max-width: 420px) {
  .nav-search-toggle, .nav-menu-toggle { width: 30px; height: 30px; }
}
.nav-pending { cursor: pointer; }
.nav-arrow { position: absolute; top: calc(50% - 44px); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 14px; display: grid; place-items: center; cursor: pointer; z-index: 5; transition: 0.2s; color: var(--ink); }
.nav-arrow:hover { background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 18px; }
.nav-arrow.prev { left: 10px; }
.nav-arrow.next { right: 10px; }
.nav-arrow.hidden { opacity: 0; pointer-events: none; }
.cat-nav .nav-arrow { top: 47%; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.95); }
.cat-nav .nav-arrow.prev { left: 12px; }
.cat-nav .nav-arrow.next { right: 12px; }
@media (max-width: 820px) {
  .topbar .wrap { padding: 8px 22px; }
}
@media (max-width: 920px) {
  .topbar { display: none; }
}
.gh-lang { display: flex; align-items: center; gap: 6px; font-family: var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace); font-size: 10.5px; letter-spacing: 0.08em; line-height: 1.6; white-space: nowrap; flex-wrap: wrap; }
.gh-lang a, .gh-lang button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: none; color: rgba(245, 245, 247, 0.82); font: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.gh-lang a:hover, .gh-lang button:hover { color: rgb(255, 255, 255); border-color: rgba(41, 151, 255, 0.75); }
.gh-lang a.on, .gh-lang a[aria-current="true"] { background: rgb(0, 107, 214); border-color: rgb(0, 107, 214); color: rgb(255, 255, 255); font-weight: 600; }
.gh-lang-more { position: relative; display: inline-flex; }
.gh-lang-more > button i { font-style: normal; font-size: 8px; opacity: 0.75; transition: transform 0.2s; }
.gh-lang-more.open > button { background: rgb(0, 107, 214); border-color: rgb(0, 107, 214); color: rgb(255, 255, 255); }
.gh-lang-more.open > button i { transform: rotate(180deg); }
.gh-lang-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0px; z-index: 2147483000; min-width: 236px; padding: 14px; background: rgb(10, 16, 30); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.5) 0px 24px 60px; text-align: left; }
.gh-lang-more.open .gh-lang-menu { display: block; }
.gh-lang { position: relative; z-index: 2147483000; }
.gh-lang-more.open { z-index: 2147483001; }
.gh-langs-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; padding: 0px 2px; }
.gh-langs-head b { font-size: 12.5px; font-weight: 600; color: rgb(245, 245, 247); white-space: nowrap; }
.gh-langs-head small { font-size: 8.5px; letter-spacing: 0.1em; color: rgb(180, 186, 196); white-space: nowrap; }
.gh-langs { display: flex; flex-direction: column; gap: 6px; }
.gh-lang-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gh-langs a { display: block; padding: 7px 11px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(245, 245, 247, 0.88); font-size: 12.5px; text-align: left; white-space: nowrap; text-decoration: none; transition: 0.15s; }
.gh-langs a:hover { color: rgb(255, 255, 255); border-color: rgb(0, 107, 214); background: rgba(0, 113, 227, 0.16); }
.gh-langs a.on, .gh-langs a[aria-current="true"] { border-color: rgba(41, 151, 255, 0.85); background: rgba(0, 113, 227, 0.22); color: rgb(255, 255, 255); font-weight: 600; }
.gh-lang--light a, .gh-lang--light button { color: rgb(62, 46, 35); border-color: rgba(62, 46, 35, 0.3); }
.gh-lang--light a:hover, .gh-lang--light button:hover { color: rgb(196, 107, 62); border-color: rgba(196, 107, 62, 0.7); }
.gh-lang--light a.on, .gh-lang--light a[aria-current="true"] { background: rgb(196, 107, 62); border-color: rgb(196, 107, 62); color: rgb(255, 255, 255); }
.tb-left > .tb-lang, .tb-lang-col, .tb-more, .tb-more-menu, .topbar .tb-lang { display: none !important; }
.tb-lang-select { display: none !important; }
#languageToggle, .top-bar .lang-item, .top-bar .language-grid, #languagePanel { display: none !important; }
@media (max-width: 920px) {
  .gh-lang { font-size: 10px; gap: 5px; }
}
@media (max-width: 920px) {
  .gh-lang a, .gh-lang button { padding: 2px 8px; }
}
@media (max-width: 920px) {
  .gh-lang-menu { position: fixed; inset: auto 12px 14px; min-width: 0px; width: auto; }
}
@media (max-width: 920px) {
  .topbar.gh-langbar-keep, .top-bar.gh-langbar-keep, .gh-langbar-keep { display: block !important; }
}
@media (max-width: 920px) {
  .gh-langbar-keep > .wrap, .gh-langbar-keep > .top-bar-container { display: flex !important; }
}
@media (max-width: 920px) {
  .gh-langbar-keep > .wrap > .tb-left { display: flex !important; }
}
@media (max-width: 430px) {
  .gh-lang-more > button .gh-ml-text { display: none; }
}
@media (max-width: 430px) {
  .gh-lang-more > button i { font-size: 10px; }
}
.gh-lang-panel { display: block; padding: 2px 0px 8px; }
.gh-lang-panel .gh-lang-panel-title { font-size: 11px; letter-spacing: 0.12em; color: rgb(110, 110, 115); margin: 0px 0px 6px; font-weight: 600; }
.gh-lang-panel .gh-lang-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 6px; }
.gh-lang-panel .gh-lang-grid a { display: block; text-align: center; padding: 9px 4px; border-radius: 10px; border: 1px solid rgba(128, 128, 128, 0.35); color: inherit; font-size: 12.5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-lang-panel .gh-lang-grid a.on { background: rgb(0, 107, 214); border-color: rgb(0, 107, 214); color: rgb(255, 255, 255); font-weight: 600; }
html[dir="rtl"] .gh-lang { direction: rtl; }
html[dir="rtl"] .gh-lang-menu { right: auto; left: 0px; text-align: right; }
html[dir="rtl"] .gh-langs a, html[dir="rtl"] .gh-langs-head { text-align: right; direction: rtl; }
html[dir="rtl"] .gh-lang-panel .gh-lang-grid { direction: rtl; }
@media (min-width: 1440px) {
  body:has(nav.nav) .topbar > .wrap.gh-langbar-right, body:has(nav.nav) .topbar > .wrap:has(> [data-gh-lang-switcher]) { width: calc(100% - 120px); max-width: 1680px; }
}
.gh-langbar-right { justify-content: flex-start !important; }
.gh-langbar-right > .tb-left, .gh-langbar-right > .tb-right { display: contents !important; }
.gh-langbar-right > .gh-lang, .gh-langbar-right > .gh-lang-slot { margin-left: auto !important; margin-right: 0px !important; }
.gh-langbar-right:dir(rtl) { flex-direction: row-reverse !important; }
.topbar .gh-lang, .topbar .gh-lang-slot, .top-bar .gh-lang, .top-bar .gh-lang-slot { flex: 0 0 auto !important; }
.nav .brand, .nav-container .brand, #mainHeader .brand, #mainHeader > a[href="/"], #mainHeader a[href="/"], header a[href="/"], .nav > a[href="/"], .nav .wrap > a[href="/"], .nav-container > a[href="/"] { display: inline-flex !important; flex-flow: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: auto !important; height: auto !important; text-decoration: none !important; flex: 0 0 auto !important; min-width: 0px !important; }
.nav .brand > img:not(.gh-brand-icon), .nav .brand svg, .nav-container .brand > img:not(.gh-brand-icon), .nav-container .brand svg, #mainHeader .brand > img:not(.gh-brand-icon), #mainHeader .brand svg, .nav .wrap > a[href="/"] > img:not(.gh-brand-icon), .nav .wrap > a[href="/"] > svg, .nav-container > a[href="/"] > img:not(.gh-brand-icon), .nav-container > a[href="/"] > svg, #mainHeader a[href="/"] > img:not(.gh-brand-icon), #mainHeader a[href="/"] > svg, header a[href="/"] > img:not(.gh-brand-icon), header a[href="/"] > svg { display: none !important; }
.nav .brand > span:not(.gh-brand-copy), .nav-container .brand > span:not(.gh-brand-copy), #mainHeader .brand > span:not(.gh-brand-copy), .nav .wrap > a[href="/"] > span:not(.gh-brand-copy), .nav-container > a[href="/"] > span:not(.gh-brand-copy), #mainHeader a[href="/"] > span:not(.gh-brand-copy), header a[href="/"] > span:not(.gh-brand-copy) { display: none !important; }
.nav .brand { color: var(--ink,currentColor) !important; }
.nav.dark .brand { color: rgba(246, 247, 250, 0.93) !important; }
.gh-brand-copy { color: currentcolor !important; }
.gh-brand-wordmark { color: currentcolor !important; }
.gh-brand-tagline { color: currentcolor !important; opacity: 0.62 !important; }
.gh-brand-icon { display: block !important; flex: 0 0 auto !important; height: 44px !important; width: 44px !important; max-height: none !important; max-width: none !important; object-fit: contain !important; border: 0px !important; border-radius: 0px !important; filter: none !important; }
.gh-brand-copy { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 2px !important; margin-left: 0px !important; min-width: 0px !important; flex: 0 0 auto !important; width: auto !important; }
.gh-brand-wordmark { display: block !important; font-family: var(--head,Manrope,-apple-system,"Segoe UI",sans-serif) !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1.06 !important; letter-spacing: -0.022em !important; white-space: nowrap !important; background: none border-box !important; -webkit-text-fill-color: currentcolor !important; text-shadow: none !important; }
.gh-brand-tagline { display: block !important; font-family: var(--head,Manrope,-apple-system,"Segoe UI",sans-serif) !important; font-size: 9.5px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: 0.155em !important; text-transform: uppercase !important; white-space: nowrap !important; background: none !important; -webkit-text-fill-color: currentcolor !important; text-shadow: none !important; }
@media (max-width: 1180px) {
  .gh-brand-icon { height: 36px !important; width: 36px !important; }
}
@media (max-width: 1180px) {
  .gh-brand-wordmark { font-size: 20px !important; }
}
@media (max-width: 1180px) {
  .gh-brand-tagline { font-size: 8.5px !important; letter-spacing: 0.13em !important; }
}
@media (max-width: 560px) {
  .gh-brand-tagline { display: none !important; }
}
@media (max-width: 560px) {
  .gh-brand-wordmark { font-size: 19px !important; }
}
@media (max-width: 360px) {
  .gh-brand-wordmark { font-size: 17px !important; }
}
.tb-dd i, .f-label, .qc-en, .gm-head small, .f-entry b, .f-exit b, .pf-tag, .cat em, .f-no, .rd-group-h, .qc-no, .pf-d em { font-size: 11px; }
.brand-sub, .gm-title small, .ab-en, .pf-part b, .rd-tag, .rd-no, .qc-gate em, .f2-no { font-size: 11.5px; }
.np-title, .foot-col h5, .pf-row b, .pf-evt b, .p-clock, .n-tag, .c-item strong, .st-en em, .rd-m b, .rm-rule b, .qc-g-h, .hero-grid .eyebrow, .p-sub, .s-badge, .tb-lang, .nav-duo a, .s-hint, .m-item p, .cert, .qc-foot, .st-in label, .gm-langs a, .np-pill, .np-pill small, .foot-hot b, .foot-bottom, .rm-cell, .qc-cert-h, .cat-chips span, .lamp b, .q-list li b, .qc-head, .n-date, .quote-by { font-size: 12px; }
@media (max-width: 520px) {
  .brand-sub { display: none; }
}
@media (max-width: 520px) {
  .nav .wrap { gap: 10px; }
}
@media (max-width: 520px) {
  nav.nav .wrap { padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  nav.nav .wrap { padding-left: 20px; padding-right: 20px; gap: 10px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  nav.nav .btn { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 1060px) {
  nav.nav .nav-links { display: none; }
}
@media (max-width: 760px) {
  .nav-search-toggle, .nav-menu-toggle { width: 44px; height: 44px; }
}
@media (max-width: 760px) {
  a.brand { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 760px) {
  nav.nav .btn { min-height: 44px; padding: 0px 16px; }
}
@media (max-width: 760px) {
  nav.nav .wrap { padding-left: 16px; padding-right: 16px; gap: 8px; }
}
@media (max-width: 760px) {
  input.st-ta, input.nav-search-input { min-height: 48px; }
}
.nav.dark { background: linear-gradient(rgba(27, 33, 45, 0.7) 0%, rgba(29, 36, 49, 0.5) 100%); backdrop-filter: blur(20px) saturate(0.88); border-bottom-color: rgba(255, 255, 255, 0.06); }
.topbar { background: rgb(42, 50, 63); }
.nav.dark .nav-links a { color: rgba(246, 247, 250, 0.93); }
.nav.dark .nav-duo a { color: rgba(246, 247, 250, 0.86); }
.nav.dark .nav-search-toggle { color: rgba(246, 247, 250, 0.85); }
@media (max-width: 520px) {
  body nav.nav .wrap { gap: 5px; }
}
@media (max-width: 520px) {
  .nav .nav-right { gap: 5px; }
}
@media (max-width: 520px) {
  body nav.nav .btn { padding-left: 11px; padding-right: 11px; }
}
@media (min-width: 521px) and (max-width: 760px) {
  .nav .brand-sub { letter-spacing: 0.03em; }
}
@media (min-width: 521px) and (max-width: 760px) {
  .nav .brand-sub { font-size: 11px; }
}
@media (min-width: 521px) and (max-width: 760px) {
  body nav.nav .wrap { gap: 6px; }
}
@media (min-width: 521px) and (max-width: 760px) {
  .nav .nav-right { gap: 6px; }
}
@media (min-width: 521px) and (max-width: 760px) {
  body nav.nav .btn { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1061px) and (max-width: 1100px) {
  .nav .brand-sub { letter-spacing: 0.03em; }
}
@media (min-width: 1061px) and (max-width: 1100px) {
  .nav .nav-links { gap: 10px; }
}
@media (min-width: 1061px) and (max-width: 1100px) {
  .nav .nav-right { gap: 8px; }
}
@media (min-width: 1061px) and (max-width: 1100px) {
  .nav .nav-duo a { padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 1061px) and (max-width: 1100px) {
  .nav .nav-duo { gap: 5px; }
}
@media (min-width: 1061px) and (max-width: 1100px) {
  body nav.nav .wrap { gap: 8px; }
}
@media (min-width: 1061px) and (max-width: 1100px) {
  body nav.nav .btn { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1101px) and (max-width: 1120px) {
  .nav .brand-sub { letter-spacing: 0.03em; }
}
@media (min-width: 1101px) and (max-width: 1120px) {
  .nav .nav-links { gap: 10px; }
}
@media (min-width: 1101px) and (max-width: 1120px) {
  .nav .nav-right { gap: 8px; }
}
@media (min-width: 1101px) and (max-width: 1120px) {
  .nav .nav-duo a { padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 1101px) and (max-width: 1120px) {
  .nav .nav-duo { gap: 5px; }
}
@media (min-width: 1101px) and (max-width: 1120px) {
  body nav.nav .wrap { gap: 12px; }
}
@media (min-width: 1101px) and (max-width: 1120px) {
  body nav.nav .btn { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav .brand-sub { letter-spacing: 0.03em; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav .nav-links { gap: 10px; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav .nav-links a { font-size: 12px; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav .nav-right { gap: 5px; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav .nav-duo a { padding-left: 8px; padding-right: 8px; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav .nav-duo a { letter-spacing: 0.04em; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav .nav-duo { gap: 3px; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  body nav.nav .wrap { gap: 12px; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  body nav.nav .btn { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1121px) and (max-width: 1280px) {
  .nav .nav-duo a.nav-pending[data-pending="true"] { display: none; }
}
@media (min-width: 1121px) and (max-width: 1212px) {
  body nav.nav .nav-links a:nth-child(n+6) { display: block; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  .nav .brand-sub { letter-spacing: 0.03em; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  .nav .nav-links { gap: 12px; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  .nav .nav-links a { font-size: 12px; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  .nav .nav-right { gap: 6px; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  .nav .nav-duo a { padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  .nav .nav-duo { gap: 5px; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  body nav.nav .wrap { gap: 16px; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  body nav.nav .btn { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  .nav .brand-sub { letter-spacing: 0.03em; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  .nav .nav-links { gap: 16px; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  .nav .nav-right { gap: 6px; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  .nav .nav-duo a { padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  .nav .nav-duo { gap: 5px; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  body nav.nav .wrap { gap: 18px; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  body nav.nav .btn { padding-left: 14px; padding-right: 14px; }
}

/* end gh-shell.css */

/* ---- PHASE F4 · page-level CTA pollution pin --------------------------------
   The shell's own CTA rules are written `:where(.topbar, nav.nav) …`, and
   `:where()` contributes ZERO specificity — so they sit at (0,1,0).  contact.php
   carries a bare `.btn { padding:15px 40px; background:#C46B3E; …;
   letter-spacing:1px }` in its own inline <style>, which comes LATER in the
   document, so at equal (0,1,0) it won the cascade: the header CTA rendered
   orange rgb(196,107,62) instead of the golden rgb(0,107,214) and 11px wider
   (letter-spacing 1px x 11 characters).  Re-stating the golden values at (0,2,0)
   gives the shell ownership of its own CTA without touching page content.
   Golden reference: bg rgb(0,107,214), width 104.56px @1440, letter-spacing normal.
   -------------------------------------------------------------------------- */
nav.nav .btn-blue { background: var(--blue); color: #fff; }
nav.nav .btn-blue:hover { background: var(--blue-hover); }
nav.nav .btn { letter-spacing: normal; }