/* ============================================================
   Secured Script — shared site styles
   Loaded on every page. Owns: CSS variables, base reset,
   nav (with Company dropdown), Google Translate widget styling,
   and the canonical footer. Page-specific styles still live
   inline inside each .php file's <style> block.
   ============================================================ */

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

:root{
  --bg:#f8f7f4;
  --bg2:#ffffff;
  --bg3:#f0efe9;
  --ink:#0d0d14;
  --ink2:#3a3a4a;
  --ink3:#7a7a8a;
  --blue:#1a5fff;
  --blue-light:#e8effe;
  --blue-mid:#4a7fff;
  --teal:#00c5a3;
  --teal-light:#e0faf4;
  --accent:#0a2fff;
  --border:#e4e3dc;
  --border2:#d0cfc8;
  --radius:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
  --shadow-lg:0 8px 40px rgba(0,0,0,.09),0 2px 8px rgba(0,0,0,.05);
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Outfit',sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ============================================================
   TOP NAV  (shared across every page — overrides per-page inline)
   ============================================================ */
nav#site-nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s ease;background:transparent}
nav#site-nav.scrolled{background:rgba(248,247,244,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
nav#site-nav .nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}

nav#site-nav .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
nav#site-nav .logo-mark{width:32px;height:32px;background:var(--ink);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
nav#site-nav .logo-mark svg{width:18px;height:18px}
nav#site-nav .logo-text{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.3px;color:var(--ink)}

nav#site-nav .nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
nav#site-nav .nav-links > li{position:relative}
nav#site-nav .nav-links a,
nav#site-nav .nav-links button.dropdown-toggle{
  font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink2);
  text-decoration:none;background:none;border:0;cursor:pointer;
  padding:6px 14px;border-radius:8px;transition:all .2s;
  display:inline-flex;align-items:center;gap:6px;line-height:1;
}
nav#site-nav .nav-links a:hover,
nav#site-nav .nav-links button.dropdown-toggle:hover{background:var(--bg3);color:var(--ink)}
nav#site-nav .nav-links a.active,
nav#site-nav .nav-links button.dropdown-toggle.active{background:var(--blue-light);color:var(--blue)}

nav#site-nav .dropdown-toggle .caret{width:10px;height:10px;transition:transform .2s}
nav#site-nav .nav-dropdown.open .dropdown-toggle .caret{transform:rotate(180deg)}

nav#site-nav .dropdown-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:180px;
  background:white;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:6px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:101;
}
nav#site-nav .nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
nav#site-nav .dropdown-menu li{display:block}
nav#site-nav .dropdown-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;
  color:var(--ink2);text-decoration:none;
}
nav#site-nav .dropdown-menu a:hover{background:var(--bg3);color:var(--ink)}
nav#site-nav .dropdown-menu a .ext-icon{width:12px;height:12px;opacity:.5;flex-shrink:0}

nav#site-nav .nav-ctas{display:flex;align-items:center;gap:10px;flex-shrink:0}
nav#site-nav .btn-ghost{
  font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink2);
  background:none;border:1px solid var(--border2);padding:8px 18px;
  border-radius:10px;cursor:pointer;text-decoration:none;transition:all .2s;
}
nav#site-nav .btn-ghost:hover{background:var(--bg3);color:var(--ink)}
nav#site-nav .btn-primary{
  font-family:var(--font-body);font-size:14px;font-weight:600;color:#fff;
  background:var(--ink);border:none;padding:9px 20px;border-radius:10px;
  cursor:pointer;text-decoration:none;transition:all .2s;letter-spacing:-.1px;
  display:inline-flex;align-items:center;gap:6px;
}
nav#site-nav .btn-primary:hover{background:#1a1a2a;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.18)}

/* ============================================================
   LANGUAGE PICKER  (custom dropdown — drives Google Translate via cookie)
   ============================================================ */
.lang-picker{position:relative;display:inline-flex;align-items:center}
.lang-flag,.lang-btn-flag{
  font-family:"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
  font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:16px;flex-shrink:0;letter-spacing:0;
  border-radius:3px;overflow:hidden;
}
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--ink2);background:white;border:1px solid var(--border2);
  padding:7px 10px 7px 10px;border-radius:10px;cursor:pointer;
  transition:all .18s ease;line-height:1;
}
.lang-btn:hover{border-color:var(--ink);color:var(--ink)}
.lang-btn .caret{transition:transform .18s;opacity:.7}
.lang-picker.open .lang-btn{border-color:var(--ink);color:var(--ink);background:var(--bg)}
.lang-picker.open .lang-btn .caret{transform:rotate(180deg)}
.lang-btn-label{letter-spacing:.2px}

.lang-picker .lang-menu{
  position:absolute !important;top:calc(100% + 8px) !important;right:0 !important;left:auto !important;
  width:260px;max-height:360px;overflow-y:auto;overscroll-behavior:contain;
  background:#fff !important;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);
  padding:6px !important;list-style:none !important;margin:0 !important;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:101;
}
.lang-picker.open .lang-menu{opacity:1 !important;visibility:visible !important;transform:translateY(0) !important}
.lang-picker .lang-menu::-webkit-scrollbar{width:6px}
.lang-picker .lang-menu::-webkit-scrollbar-track{background:transparent}
.lang-picker .lang-menu::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px}
.lang-picker .lang-menu li{display:block !important;list-style:none !important;margin:0 !important;padding:0 !important}
.lang-picker .lang-menu li::before,.lang-picker .lang-menu li::marker{content:none !important;display:none !important}
.lang-picker .lang-menu button{
  display:flex !important;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border-radius:9px;font-family:var(--font-body);font-size:13.5px;font-weight:500;
  color:var(--ink2);background:none !important;border:0 !important;outline:none;cursor:pointer;text-align:left;line-height:1.2;
  transition:background .12s ease,color .12s ease;
}
.lang-picker .lang-menu button:hover{background:var(--bg3) !important;color:var(--ink)}
.lang-picker .lang-menu button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.lang-picker .lang-menu .lang-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-picker .lang-menu button.active{background:var(--blue-light) !important;color:var(--blue);font-weight:600}
.lang-picker .lang-menu button.active::after{
  content:'';width:14px;height:14px;flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 7.5l2.5 2.5L11 4.5' stroke='%231a5fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:center;
}
.lang-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ink3);background:var(--bg3);border:1px solid var(--border);
  border-radius:100px;padding:2px 7px;flex-shrink:0;
}
.lang-picker .lang-menu button.active .lang-tag{display:none}

/* Hide Google's own widget — we drive it via the hidden <select>, the visible UI is ours. */
#google_translate_element{position:absolute !important;left:-9999px !important;top:-9999px !important;visibility:hidden !important;height:0 !important;width:0 !important;overflow:hidden !important;pointer-events:none}
/* Kill the sticky top "Translated into: X" banner Google injects.
   It appears under several different class/tag combos depending on GT version.
   Each selector is its own rule so a parser rejecting one (e.g. on older engines)
   doesn't invalidate the rest of the list. */
.goog-te-banner-frame{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;pointer-events:none !important}
iframe.goog-te-banner-frame{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;pointer-events:none !important}
.goog-te-banner{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important}
iframe[src*="translate.google"]{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;pointer-events:none !important}
.VIpgJd-ZVi9od-l4eHX-hSRGPd{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important}
.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important}
.VIpgJd-ZVi9od-ORHb{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important}
/* Structural catch-all: GT wraps the banner iframe in a .skiptranslate element that's
   a direct child of <body>. Our own #google_translate_element mount lives inside <nav>,
   so `body > .skiptranslate` only ever matches GT-injected wrappers/iframes. This works
   even when the iframe has no `src` attribute (newer GT builds use srcdoc). */
body > .skiptranslate{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;pointer-events:none !important}
body > iframe.skiptranslate{display:none !important;visibility:hidden !important;height:0 !important;width:0 !important;border:0 !important;position:absolute !important;top:-9999px !important;left:-9999px !important;pointer-events:none !important}
/* Undo the inline `top: 40px` and skiptranslate offset Google adds to make room for the banner. */
html{top:0 !important;margin-top:0 !important}
body{top:0 !important;margin-top:0 !important;padding-top:0 !important}
body.skiptranslate{top:0 !important;margin-top:0 !important;padding-top:0 !important;position:static !important}
.goog-tooltip,.goog-tooltip:hover{display:none !important}
.goog-text-highlight{background:transparent !important;box-shadow:none !important;border:0 !important;position:static !important;box-sizing:border-box !important}

/* ============================================================
   FOOTER  (canonical 4-col, dark)
   ============================================================ */
footer#site-footer{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);padding:60px 32px 40px;color:white}
footer#site-footer .footer-inner{max-width:1200px;margin:0 auto}
footer#site-footer .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
footer#site-footer .footer-brand{display:flex;flex-direction:column;gap:14px}
footer#site-footer .footer-brand-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:white}
footer#site-footer .footer-brand-logo .logo-mark{width:32px;height:32px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;display:flex;align-items:center;justify-content:center}
footer#site-footer .footer-brand-logo .logo-mark svg{width:18px;height:18px}
footer#site-footer .footer-brand-logo .logo-text{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.3px;color:white}
footer#site-footer .footer-brand p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.45);max-width:280px}
footer#site-footer .footer-col h5{font-family:var(--font-display);font-size:12px;font-weight:700;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px}
footer#site-footer .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer#site-footer .footer-col ul li a{font-size:14px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s;font-weight:400}
footer#site-footer .footer-col ul li a:hover{color:white}
footer#site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer#site-footer .footer-bottom p{font-size:13px;color:rgba(255,255,255,.35)}
footer#site-footer .footer-bottom-links{display:flex;gap:20px;flex-wrap:wrap}
footer#site-footer .footer-bottom-links a{font-size:13px;color:rgba(255,255,255,.35);text-decoration:none;transition:color .2s}
footer#site-footer .footer-bottom-links a:hover{color:rgba(255,255,255,.7)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  nav#site-nav .nav-links{display:none}
  nav#site-nav .btn-ghost{display:none}
  footer#site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:600px){
  footer#site-footer .footer-grid{grid-template-columns:1fr}
  nav#site-nav .gt-wrap{display:none}
  .lang-btn-label{display:none}
  .lang-btn{padding:7px 8px}
  .lang-menu{width:min(260px,calc(100vw - 24px));right:0}
}