/* ==========================================================================
   Lake Group  shared design-system + motion layer (theme.css)
   Loaded AFTER each page's inline <style> so it wins ties in the cascade.
   Purpose:
     1. Re-assert canonical brand tokens from assets/tokens.css (Deep Blue +
        Sunrise Yellow, no red) over any legacy inline navy/amber copies.
     2. Unify component styling (buttons, cards, forms, tabs, nav, footer).
     3. Provide the motion vocabulary used by assets/motion.js.
   NOTE: never style .experience-3d-* or #fuel-experience  owned elsewhere.
   ========================================================================== */

@import url("tokens.css?v=20260828-01");
@import url("fonts/fonts.css?v=20260828-01");
@import url("ui-icons.css?v=20260828-01");

/* --------------------------------------------------------------------------
   1. THEME-ONLY TOKENS (motion + shadows; brand lives in tokens.css)
   -------------------------------------------------------------------------- */
:root {
  /* Motion tokens - snappy 300–500ms range */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-med:  0.35s;
  --dur-slow: 0.45s;
}

/* --------------------------------------------------------------------------
   Brand scrollbar — darkest-blue track + mid-blue thumb (medium rail)
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: auto;
  scrollbar-color: var(--color-brand-blue) var(--color-brand-blue-darkest);
}
* {
  scrollbar-width: auto;
  scrollbar-color: var(--color-brand-blue) var(--color-brand-blue-darkest);
}
::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
::-webkit-scrollbar-track {
  background: var(--color-brand-blue-darkest);
}
::-webkit-scrollbar-thumb {
  background: var(--color-brand-blue);
  border-radius: 999px;
  border: 3px solid var(--color-brand-blue-darkest);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand-blue-light);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY RHYTHM (Jost — tokens.css scale)
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: var(--body-size, 17px);
  line-height: var(--body-line-height, 1.65);
}
.section-title {
  font-size: var(--fs-display);
  letter-spacing: var(--display-letter-spacing, -0.01em);
  line-height: var(--display-line-height, 1.05);
  margin-bottom: 14px;
}
.section-subtitle { font-size: var(--fs-lede); line-height: 1.7; max-width: 620px; }
.page-hero {
  background: var(--color-hero-bg);
  position: relative;
  overflow: hidden;
  /* Match flagship: fill viewport below fixed nav (page-wrapper clears nav). */
  min-height: calc(100vh - var(--nav-h, var(--navbar-height, 72px)));
  min-height: calc(100dvh - var(--nav-h, var(--navbar-height, 72px)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 32px 0 48px;
}
/* Shared hero photography + gradient (also defined in flagship.css) */
.page-hero .hero-media,
.page-hero .page-hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 1; filter: saturate(0.92) contrast(1.05); pointer-events: none;
  transform-origin: center center;
}
.page-hero .hero-overlay,
.page-hero .page-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--hero-overlay-gradient);
}
.page-hero .container { position: relative; z-index: 2; width: 100%; }
.page-hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: var(--display-letter-spacing, -0.01em);
  line-height: var(--display-line-height, 1.05);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.page-hero p { font-size: var(--fs-lede); line-height: 1.7; max-width: 600px; }
body[data-company-logo] .page-hero h1 { font-size: var(--fs-hero-company); }
.card-body p { line-height: 1.65; }

/* Section rhythm: consistent scale, calmer on small screens */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
@media (max-width: 960px) {
  .section { padding: 76px 0; }
  .section-sm { padding: 52px 0; }
}
@media (max-width: 720px) {
  .section { padding: 60px 0; }
  .section-sm { padding: 44px 0; }
  .page-hero { padding: 24px 0 40px; }
  .container { padding: 0 20px; }
}

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY  visible focus states everywhere
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--yellow2);
  outline-offset: 2px;
  border-radius: 3px;
}
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
#chat-input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   4. NAV  unified brand bar + scroll behaviour hooks (motion.js)
   -------------------------------------------------------------------------- */
/* Never put transform/filter/perspective on html/body — that re-parents
   position:fixed and makes the bar float mid-page over content. */
html, body {
  transform: none;
  filter: none;
  perspective: none;
}
.page-wrapper {
  padding-top: var(--nav-h, var(--navbar-height, 72px));
}
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  height: var(--navbar-height, 72px);
  background: var(--color-navbar-bg, #0181BB);
  border-bottom: 3px solid var(--color-navbar-border, #FFF200);
  backdrop-filter: none;
  transition: transform 0.38s var(--ease-smooth), box-shadow 0.3s ease, background-color 0.3s ease, height 0.3s var(--ease-smooth);
}
.site-nav.nav-scrolled {
  background: var(--color-navbar-bg-scrolled, rgba(1, 102, 148, 0.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(4,10,34,0.35);
}
.site-nav.nav-scrolled .nav-logo img {
  height: var(--nav-logo-height-scrolled, 36px) !important;
  max-height: var(--nav-logo-height-scrolled, 36px);
  max-width: min(200px, 50vw) !important;
}
.site-nav.nav-hidden { transform: translateY(-100%); }

/* Desktop nav rhythm - home sentence-case + soft pill active */
.nav-links { gap: 4px; }
.nav-links > li > a {
  color: var(--nav-link-color);
  padding: var(--nav-link-padding);
  font-size: var(--nav-link-size);
  font-weight: var(--nav-link-weight);
  letter-spacing: var(--nav-link-letter-spacing);
  text-transform: var(--nav-link-transform);
  font-family: var(--font-body);
  gap: 5px;
  border-radius: var(--nav-link-radius);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links > li > a:hover,
.nav-links > li > a.active {
  color: var(--nav-link-active-color);
  background: var(--nav-link-active-bg);
  transform: none;
}
.nav-links > li > a.active {
  outline: var(--nav-link-active-outline, 1px solid rgba(255,255,255,0.9));
  outline-offset: -1px;
}

.nav-logo { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; }
.nav-logo:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-md); }
.nav-logo img,
.site-nav .nav-logo img {
  /* Hard px fallbacks: if tokens.css is missing (stale/broken SW), logo must not go intrinsic. */
  height: var(--nav-logo-height, 38px) !important;
  width: auto !important;
  max-width: 130px !important;
  max-height: var(--nav-logo-height, 38px);
  object-fit: contain;
  transition: transform var(--dur-fast) var(--ease-out), height 0.3s var(--ease-smooth);
}
/* Company pages: same token height; letterboxed squares get optical scale via site.js class */
body[data-company-logo] {
  --nav-h: var(--navbar-height, 72px);
}
body[data-company-logo] .site-nav {
  height: var(--nav-h);
  overflow: visible;
}
.nav-logo.nav-logo--company,
body[data-company-logo] .site-nav .nav-logo {
  max-width: min(280px, 70vw);
  overflow: visible;
}
.nav-logo.nav-logo--company img,
body[data-company-logo] .site-nav .nav-logo img {
  height: var(--nav-logo-height, 48px) !important;
  width: auto !important;
  max-width: min(260px, 65vw) !important;
  max-height: var(--nav-logo-height, 48px);
  object-fit: contain;
}
body[data-company-logo] .site-nav .nav-logo img.nav-logo-img--letterboxed,
.nav-logo.nav-logo--company img.nav-logo-img--letterboxed {
  height: calc(var(--nav-logo-height, 48px) * var(--nav-logo-letterbox-scale, 1.15)) !important;
  max-height: calc(var(--nav-logo-height, 48px) * var(--nav-logo-letterbox-scale, 1.15)) !important;
}
body[data-company-logo] .site-nav.nav-scrolled .nav-logo img.nav-logo-img--letterboxed,
.site-nav.nav-scrolled .nav-logo.nav-logo--company img.nav-logo-img--letterboxed {
  height: calc(var(--nav-logo-height-scrolled, 36px) * var(--nav-logo-letterbox-scale, 1.15)) !important;
  max-height: calc(var(--nav-logo-height-scrolled, 36px) * var(--nav-logo-letterbox-scale, 1.15)) !important;
}
/* Company pages inherit full-viewport .page-hero; keep logo letterbox scale only */

/* Language switcher - globe + English|Swahili + dropdown */
.lang-switcher {
  position: relative;
  display: flex; align-items: center;
  margin-left: 10px; margin-right: 6px;
  border: none; border-radius: 0; overflow: visible;
  background: transparent;
}
.lang-trigger {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 0;
  padding: 6px 4px;
  color: rgba(255,255,255,0.9); cursor: pointer; line-height: 1;
  font-family: inherit;
  border-radius: 8px;
  transition: color 0.16s ease, background 0.16s ease;
}
.lang-trigger:hover { color: #fff; background: rgba(255,255,255,0.08); }
.lang-trigger:focus-visible {
  outline: 2px solid var(--color-yellow-accent, var(--yellow));
  outline-offset: 3px;
}
.lang-current,
.lang-pair {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lang-pair-selected {
  color: var(--color-yellow-accent, var(--yellow));
}
.lang-pair-sep {
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.lang-pair-suggest {
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  cursor: pointer;
}
.lang-pair-suggest:hover { color: #fff; }
.lang-icons {
  display: inline-flex; align-items: center; gap: 2px;
  color: rgba(255,255,255,0.88);
}
.lang-globe, .lang-chevron { display: block; flex: none; }
.lang-chevron { opacity: 0.85; transition: transform 0.2s ease; }
.lang-switcher.is-open .lang-chevron { transform: rotate(180deg); }
.lang-menu-item,
.lang-btn {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0;
  color: rgba(255,255,255,0.9);
  padding: 0; font-size: 0.84rem; font-weight: 500;
  cursor: pointer; line-height: 1.2; text-decoration: none;
  border-radius: 0; font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0; left: auto;
  min-width: 176px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(5, 153, 211, 0.98) 0%, rgba(1, 129, 187, 0.99) 100%);
  border: 0;
  border-radius: 12px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.38),
    0 4px 12px rgba(0,0,0,0.22);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  z-index: 1200;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-switcher.is-open .lang-menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-menu[hidden] { display: none !important; }
.lang-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  text-align: start;
  padding: 10px 12px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.9);
  border-radius: 8px;
  border: 0;
  position: relative;
}
.lang-menu-check {
  width: 14px; height: 14px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  color: var(--color-yellow-accent, var(--yellow));
}
.lang-menu-check::before {
  content: "";
  width: 8px; height: 4px;
  border-inline-start: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}
.lang-menu-label { flex: 1; min-width: 0; }
.lang-menu-item:hover {
  background: rgba(255,242,0,0.1);
  color: #fff;
}
.lang-menu-item:focus-visible {
  outline: 2px solid var(--color-yellow-accent, var(--yellow));
  outline-offset: 1px;
}
.lang-menu-item.active,
.lang-btn.active {
  color: var(--color-yellow-accent, var(--yellow));
  background: rgba(255,242,0,0.12);
  border: 0;
  font-weight: 650;
}
.lang-menu-item.active .lang-menu-check { opacity: 1; }
/* Launch controls: language selection and the assistant remain implemented
   but are intentionally unavailable until their content is approved. */
.site-nav[data-phase01-navbar] .lang-switcher,
.mob-lang-static,
#chat-widget,
#chat-widget.la-widget,
#chat-btn,
#chat-box { display: none !important; }

/* Home also uses theme.css rather than flagship.css. */
.lake-back-to-top{--btt-nudge:0px;position:fixed;right:max(28px,calc(env(safe-area-inset-right) + 18px));bottom:max(86px,calc(env(safe-area-inset-bottom) + 76px));z-index:9997;width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:var(--lake-deep-blue);color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.14);opacity:0;pointer-events:none;transform:translate3d(0,12px,0) scale(.92);transition:opacity .24s ease,transform .38s cubic-bezier(.22,1.28,.36,1),box-shadow .2s ease,border-color .2s ease}.lake-back-to-top span{font:500 1.35rem/1 Arial,sans-serif;transform:translateY(1px);transition:transform .2s ease}.lake-back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translate3d(0,var(--btt-nudge),0) scale(1)}.lake-back-to-top.is-react-down{--btt-nudge:6px}.lake-back-to-top.is-react-up{--btt-nudge:-5px}.lake-back-to-top:hover{border-color:rgba(255,242,0,.78);box-shadow:0 14px 32px rgba(0,0,0,.18)}.lake-back-to-top:hover span{transform:translateY(-2px)}.lake-back-to-top:active{transform:translate3d(0,var(--btt-nudge),0) scale(.95)}.lake-back-to-top:focus-visible{outline:3px solid #fff200;outline-offset:3px}@media(max-width:600px){.lake-back-to-top{right:max(16px,calc(env(safe-area-inset-right) + 12px));bottom:max(76px,calc(env(safe-area-inset-bottom) + 62px));width:44px;height:44px}}@media(prefers-reduced-motion:reduce){.lake-back-to-top{transition:opacity .18s ease}.lake-back-to-top span{transition:none}.lake-back-to-top.is-react-down,.lake-back-to-top.is-react-up{--btt-nudge:0px}}
/* Header chrome stays LTR in all languages: logo LEFT, tabs RIGHT. */
.site-nav,
.site-nav .nav-inner,
.site-nav .nav-links,
.site-nav .lang-switcher,
.site-nav .lang-trigger,
.site-nav .lang-pair,
.site-nav .nav-megamenu,
.site-nav .nav-dropdown {
  direction: ltr !important;
}
.site-nav .nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
}
.site-nav .nav-links {
  margin-left: auto !important;
  margin-right: 0 !important;
}
/* Lang lives in sticky header chrome (sibling of .nav-links), not only drawer */
.site-nav .lang-switcher {
  flex: none;
  margin-left: 10px;
  margin-right: 6px;
  align-self: center;
}
.site-nav .lang-menu { right: 0; left: auto; }
html[dir="rtl"] .nav-mobile { direction: rtl; }
html[dir="rtl"] .nav-mobile a { border-left: 0; border-right: 2px solid transparent; }
html[dir="rtl"] .nav-mobile a:hover { border-right-color: var(--yellow, var(--gold)); }
html[dir="rtl"] .mm-ext-icon,
html[dir="rtl"] .mob-ext-icon { margin-left: 0; margin-right: 6px; }
.site-nav .nav-megamenu {
  direction: ltr !important;
  scrollbar-gutter: stable;
}
.site-nav .nav-megamenu .mm-cat,
.site-nav .nav-megamenu .mm-company span {
  unicode-bidi: plaintext;
}

.breadcrumb a { transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.breadcrumb a:hover { color: var(--yellow); transform: translateX(2px); }

/* Dropdown: elevated glass panel + micro slide on links */
.nav-dropdown {
  background: linear-gradient(180deg, rgba(5,153,211,0.96), rgba(1,129,187,0.98));
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow:
    0 28px 56px -20px rgba(0,0,0,0.55),
    0 10px 22px -12px rgba(0,0,0,0.4);
  transition: opacity 0.22s var(--ease-smooth), transform 0.22s var(--ease-smooth);
}
.nav-dropdown a {
  color: rgba(255,255,255,0.8);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--ease-out);
}
.nav-dropdown a:hover {
  background: rgba(255,242,0,0.12);
  color: var(--yellow);
  transform: translateX(3px);
}

/* Open via JS `.is-open` (hover-intent on the trigger) or keyboard
   `:focus-within`. No `li:hover` — full-height nav columns were opening
   panels before the cursor reached the label. */
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.is-open .nav-dropdown {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* MEGA MENU  "Subsidiaries" (two-pane: category rail + company grid)
   Position relative to .site-nav (not the trigger li) so a ~1180px panel
   stays viewport-centered. Clamp height to the visible area and scroll
   inside the panel on short laptop viewports. */
.nav-links > li.has-megamenu { position: static; }
.nav-megamenu {
  display: block;
  width: min(96vw, 1180px);
  min-width: 0;
  max-width: min(96vw, 1180px);
  max-height: calc(100vh - var(--nav-h) - 24px);
  max-height: calc(100dvh - var(--nav-h) - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 28px;
  left: 50%;
  right: auto;
  transform: translate(-50%, -8px) scale(0.985);
  transform-origin: top center;
  scrollbar-width: auto;
  scrollbar-color: var(--color-brand-blue-light) var(--color-brand-blue-darkest);
}
.nav-megamenu::-webkit-scrollbar { width: 10px; }
.nav-megamenu::-webkit-scrollbar-track {
  background: var(--color-brand-blue-darkest);
  border-radius: 999px;
  margin: 6px 0;
}
.nav-megamenu::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-brand-blue-light) 0%, var(--color-brand-blue) 100%);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background-clip: padding-box;
}
.nav-megamenu::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--color-yellow-accent) 0%, var(--color-brand-blue-light) 55%, var(--color-brand-blue) 100%);
  border-color: rgba(255, 255, 255, 0.35);
}
.has-dropdown.is-open .nav-megamenu,
.has-dropdown:focus-within .nav-megamenu {
  transform: translate(-50%, 0) scale(1);
}

.mm-layout {
  display: grid;
  grid-template-columns: minmax(220px, 268px) minmax(0, 1fr);
  gap: 20px 28px;
  align-items: stretch;
  min-height: 300px;
}
.mm-cats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  align-self: start;
}
.mm-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 8px;
  background: rgba(1, 129, 187, 0.06); /* near-transparent idle */
  color: #fff;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.mm-cat::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2.25px solid rgba(255, 255, 255, 0.95);
  border-top: 2.25px solid rgba(255, 255, 255, 0.95);
  transform: rotate(45deg);
  opacity: 1;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.mm-cat:hover,
.mm-cat:focus-visible {
  background: rgba(5, 153, 211, 0.22);
  color: #FFF200;
  outline: none;
}
.mm-cat:hover::after,
.mm-cat:focus-visible::after {
  border-color: #FFF200;
  opacity: 1;
}
.mm-cat.is-active {
  background: rgba(1, 102, 148, 0.92);
  color: #FFF200;
  border-left: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 242, 0, 0.18);
}
.mm-cat.is-active::after {
  border-color: #FFF200;
  opacity: 1;
}
.mm-cat.is-active:hover,
.mm-cat.is-active:focus-visible {
  background: rgba(5, 153, 211, 0.55);
  color: #FFF200;
}

.mm-panes {
  position: relative;
  min-width: 0;
  min-height: 240px;
}
.mm-pane { display: none; }
.mm-pane.is-active { display: block; }
.mm-companies {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 16px;
  min-width: 0;
}
.mm-pane.is-active .mm-companies.is-entering {
  animation: mmPaneEnter 0.52s var(--ease-out) both;
}
@keyframes mmPaneEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-megamenu .mm-company,
.mm-company {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 0 auto;
  width: 148px;
  padding: 14px 12px !important;
  border-radius: var(--radius);
  border-left: 0 !important;
  color: rgba(255,255,255,0.82);
  font-size: 0.78rem; font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  position: relative;
  background: transparent;
  transition: background-color 160ms ease-out;
}
.mm-company span {
  display: block;
  max-width: 100%;
}
.mm-company img {
  height: 68px; width: auto; max-width: 132px; flex: none;
  object-fit: contain;
  object-position: center;
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}
/* Light chip behind navy/low-contrast logos (do not filter/recolor PNGs).
   AFICD (blue), ACFS (gray) and Cross Country (navy) read too dark against the
   dark megamenu — the white chip keeps them visible, same as ATL / Lake Agro. */
.mm-company img[src*="lake-agro-new.webp"],
.mm-company img[src*="atl.png"],
.mm-company img[src*="aficd.png"],
.mm-company img[src*="acfs.png"] {
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
}
.mm-company img[src*="atl.png"] {
  height: 64px;
  width: auto;
  max-width: 132px;
  max-height: 64px;
  object-fit: contain;
  overflow: visible;
}
.mm-company img[src*="lake-agro-new.webp"] {
  height: 64px;
  max-width: 132px;
}
/* Tall stacked mark — taller than peers so visual weight matches Ocean Galleria. */
.mm-company img[src*="Ocean-Galleria-logo.webp"] {
  height: 78px;
  max-width: 150px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Logos already include the wordmark — hide duplicate megamenu labels.
   Accessible name comes from the img alt on the .mm-company link.
   Scoped to .nav-megamenu so mobile accordion labels stay visible. */
.nav-megamenu .mm-company > span {
  display: none;
}
@media (max-height: 900px) {
  .nav-megamenu { padding: 18px 22px; }
  .mm-layout { gap: 16px 22px; min-height: 260px; }
  .mm-cats { gap: 12px; padding: 0; }
  .mm-cat { padding: 12px 14px; font-size: 0.82rem; }
  .nav-megamenu .mm-company,
  .mm-company { width: 136px; padding: 12px 10px !important; gap: 6px; }
  .mm-company img { height: 56px; max-width: 116px; }
  .mm-company img[src*="atl.png"] {
    height: 52px;
    max-width: 116px;
    max-height: 52px;
    padding: 6px 8px;
  }
  .mm-company img[src*="lake-agro-new.webp"] {
    height: 52px;
    max-width: 116px;
    padding: 6px 8px;
  }
  .mm-company img[src*="Ocean-Galleria-logo.webp"] {
    height: 66px;
    max-width: 138px;
    padding: 0;
  }
}
/* Hover: subtle tile background darken only — no lift, scale, shadow, brightness, or underline flash */
.nav-megamenu .mm-company:hover,
.nav-megamenu .mm-company:focus-visible,
.mm-company:hover, .mm-company:focus-visible {
  border-left: 0 !important;
  border-left-color: transparent;
  background: rgba(0, 0, 0, 0.34);
}
/* Hover: darken the tile so light logos pop, and lift the logo with a soft
   drop-shadow so it no longer blends into the darkened background. */
.mm-company:hover img,
.mm-company:focus-visible img {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}
.mm-ext-icon {
  position: absolute; top: 8px; right: 8px;
  flex: none; margin-left: 0; opacity: 0.5;
}

@media (max-width: 1060px) {
  .nav-megamenu { display: none; }
}

/* Unified responsive breakpoint (canonical 1060px) */
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .site-nav .nav-toggle { display: flex; margin-left: 0; }
  /* Keep compact lang control in sticky header (not only in drawer) */
  .site-nav .lang-switcher { margin-left: auto; margin-right: 2px; }
  .site-nav .lang-pair-sep,
  .site-nav .lang-pair-suggest { display: none !important; }
  .site-nav .lang-pair { gap: 0; }
  .site-nav .lang-trigger { gap: 6px; padding: 6px 2px; }
}

/* Mobile menu: class-driven open state. !important intentionally beats the
   legacy `@media(max-width:1024px){ .nav-mobile{display:flex !important} }`
   rule that kept the menu permanently expanded on 22 pages. */
.nav-mobile { display: none !important; background: var(--blue2); border-bottom: 2px solid var(--yellow); }
.nav-mobile.open { display: flex !important; }
.nav-mobile a {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: none;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Keep Home above About if mobile layout rounding briefly overlaps their
   adjacent tap areas during drawer paint. */
.nav-mobile > a:first-child { z-index: 3; }
.nav-mobile > a:nth-child(2) { z-index: 2; }
.nav-mobile a:hover { background: rgba(255,255,255,0.06); color: var(--yellow); }
.mob-section { color: var(--yellow); }

/* "Subsidiaries" mobile accordion: one collapsible category per button */
.mob-accordion { display: flex; flex-direction: column; }
.mob-acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: none; border: none; border-left: 2px solid transparent;
  color: rgba(255,255,255,0.85);
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  text-align: left; cursor: pointer;
}
.mob-acc-btn::after {
  content: '';
  width: 0.6em; height: 0.6em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-smooth);
  flex: none;
}
.mob-acc-btn[aria-expanded="true"]::after { transform: rotate(-135deg); }
.mob-acc-btn:hover, .mob-acc-btn[aria-expanded="true"] {
  color: var(--yellow); border-left-color: var(--yellow); background: rgba(255,255,255,0.06);
}
.mob-acc-panel {
  display: flex; flex-direction: column;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height 0.34s var(--ease-smooth), opacity 0.2s ease;
}
.mob-acc-panel.is-open { max-height: 540px; opacity: 1; }
.mob-acc-panel[hidden] { display: none; }
.mob-acc-panel a { padding: 10px 16px 10px 30px; color: rgba(255,255,255,0.75); font-size: 0.82rem; }
.mob-acc-panel a:hover { color: var(--yellow); background: rgba(255,255,255,0.06); }
.mob-external { justify-content: flex-start; }
.mob-ext-icon { flex: none; margin-left: 6px; opacity: 0.55; }

/* --------------------------------------------------------------------------
   5. PAGE HERO  brand accent unified
   -------------------------------------------------------------------------- */
.page-hero::before {
  background: radial-gradient(ellipse 60% 60% at 80% 50%, rgba(255,242,0,0.08) 0%, transparent 65%);
}
.page-hero .eyebrow { border-color: var(--yellow); color: var(--yellow); }

/* --------------------------------------------------------------------------
   6. BUTTONS  one geometry, refined hover/press/focus
   -------------------------------------------------------------------------- */
.btn {
  padding: var(--btn-padding, 13px 28px);
  border-radius: var(--radius);
  font-weight: var(--btn-weight, 600);
  font-size: var(--btn-size, 0.875rem);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) ease,
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
}
.btn-sm { padding: 9px 20px; font-size: 0.83rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }
.btn:focus-visible { outline: 3px solid var(--yellow2); outline-offset: 2px; }

.btn-primary { background: var(--yellow); color: var(--blue3); }
.btn-primary:hover { background: var(--yellow2); box-shadow: 0 8px 24px rgba(255,242,0,0.4); }
.btn-outline:hover { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 8px 24px rgba(0,0,0,0.18); transform: translateY(-2px); }
.btn-outline-dark { color: var(--blue); border-color: var(--blue); }
.btn-outline-dark:hover { background: var(--blue); color: var(--white); box-shadow: 0 8px 24px rgba(1,129,187,0.3); }
.btn-blue:hover { background: var(--blue2); box-shadow: 0 8px 24px rgba(1,129,187,0.35); }
.btn-white:hover { box-shadow: 0 8px 24px rgba(1,63,92,0.18); }
.nav-cta { background: var(--yellow) !important; color: var(--blue3) !important; }
.nav-cta:hover { background: var(--yellow2) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,242,0,0.35) !important; }
.nav-cta:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,242,0,0.35) !important;
}

/* --------------------------------------------------------------------------
   7. CARDS  unified radius/shadow/elevation + tilt hooks (motion.js)
   -------------------------------------------------------------------------- */
.card, .div-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(1,63,92,0.04);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover, .div-card:hover {
  --lift: -4px;
  box-shadow: var(--shadow-lg);
  border-color: rgba(1,129,187,0.22);
}
.card.is-tilting, .div-card.is-tilting { transition: transform 0.12s linear, box-shadow 0.35s ease; }

/* Legacy amber icon chips -> brand */
.card-icon { background: rgba(255,242,0,0.16); border-radius: var(--radius-lg); }
.card-icon svg { color: var(--blue); }

/* Photo zoom pattern unified (cards, gallery, photo strips) */
.photo-card img, .g-item img, .photo-feature img, .div-card-img,
.img-hover-zoom, .hero-photo-grid img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.photo-card:hover img, .g-item:hover img, .photo-feature img:hover,
.img-hover-zoom:hover, .hero-photo-grid img:hover { transform: scale(1.04); }
.photo-card, .g-item, .hero-photo-grid { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. SEMANTIC SECTION SURFACES + LABELS
   -------------------------------------------------------------------------- */
.section-dark { background: var(--blue); }
.section-bone { background: var(--offwhite); }
/* Yellow text directly on light surfaces is a contrast risk with the brighter
   Sunrise Yellow brand token, so on-light labels use --blue2 instead; the
   small ::before tick stays yellow since it's a decorative mark, not text. */
.section-label { color: var(--blue2); font-weight: 700; }
.section-label::before { background: var(--yellow); }
.section-label.dark { color: var(--blue); }
.section-label.dark::before { background: var(--blue); }
.section-dark .section-label { color: var(--yellow); }
.section-dark .section-label::before { background: var(--yellow); }

/* Stat counters: blue on light surfaces for contrast, pure brand
   yellow on dark bands. */
.stat-number { color: var(--blue2); }
.section-dark .stat-number, .page-hero .stat-number { color: var(--yellow); }

/* Timeline: brand dots */
.timeline-item::before { background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.timeline-year { color: var(--blue2); }

/* Badges / tags: brand */
.badge-amber { background: rgba(255,242,0,0.18); color: var(--blue); }
.badge-navy { background: var(--blue); color: var(--white); }
.country-tag { background: rgba(1,129,187,0.08); color: var(--blue); white-space: nowrap; max-width: 100%; }
@media (max-width: 600px) {
  .country-tag { white-space: normal; line-height: 1.25; }
}

/* Alerts (no red in the brand palette: dark-blue emphasis stands in for error/alert states) */
.alert-info { background: rgba(1,129,187,0.06); border-color: var(--blue); color: var(--blue); }

/* --------------------------------------------------------------------------
   9. TABS  brand active state + pane fade
   -------------------------------------------------------------------------- */
.tab-nav button { transition: color 0.2s ease, border-color 0.2s ease; }
.tab-nav button.active { color: var(--blue); border-bottom-color: var(--yellow); }
.tab-nav button:hover { color: var(--blue); }
.tab-pane.active { animation: lg-fade-up 0.4s var(--ease-out); }

/* --------------------------------------------------------------------------
   10. FORMS  unified focus transition
   -------------------------------------------------------------------------- */
.form-group input, .form-group select, .form-group textarea {
  border: 1.5px solid var(--border);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(1,129,187,0.12);
}
.form-group label { transition: color 0.2s ease; }
.form-group:focus-within label { color: var(--blue); }

/* --------------------------------------------------------------------------
   11. FOOTER  brand surface + animated link underlines
   -------------------------------------------------------------------------- */
.site-footer { background: var(--blue3); border-top: 3px solid var(--yellow); }
.footer-bottom p {
  color: #f5f7fb;
  font-weight: 500;
}
.footer-col h5 { color: var(--yellow); }
.footer-col ul a, .footer-bottom-links a {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 0.25s ease, background-size 0.3s var(--ease-out);
}
.footer-col ul a:hover, .footer-bottom-links a:hover { color: var(--yellow); background-size: 100% 1px; }
.social-link:hover { color: var(--yellow); }

/* --------------------------------------------------------------------------
   12. CHAT WIDGET  brand (legacy fallback - assistant.js replaces mount DOM)
   -------------------------------------------------------------------------- */
#chat-btn {
  background: transparent;
  color: var(--color-yellow-accent, var(--yellow));
  box-shadow: none;
  transition: transform 0.2s var(--ease-out), color 0.2s ease, filter 0.2s ease;
}
#chat-btn:hover { transform: translateY(-2px) scale(1.04); color: var(--color-yellow-deep, #E6D900); filter: brightness(0.97); }
#chat-btn svg { filter: none; }
#chat-head {
  background: linear-gradient(135deg, var(--color-brand-blue, var(--blue)) 0%, var(--color-brand-blue-light, var(--blue-light)) 100%);
  border-bottom: 2px solid var(--color-yellow-accent, var(--yellow));
}
#chat-send { background: var(--color-yellow-accent, var(--yellow)); color: var(--color-brand-blue-darkest, var(--blue3)); }
.msg-bot { background: var(--color-white, var(--white)); border-left: 3px solid var(--color-yellow-accent, var(--yellow)); }
.msg-user { background: var(--color-brand-blue, var(--blue)); }

/* --------------------------------------------------------------------------
   13. SCROLL REVEAL SYSTEM (site.js + motion.js)
   No-JS safety: motion.js adds .lg-motion to <html> at execution time; only
   then may reveal styles hide anything. Without the marker (JS off/failed),
   this block overrides the unconditional inline `.reveal{opacity:0}` rules
   still present in every page's inline styles, keeping content visible.
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
html.lg-motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
html.lg-motion .reveal.reveal-scale { transform: translateY(12px) scale(0.97); }
html.lg-motion .reveal.reveal-left { transform: translateX(-28px); }
html.lg-motion .reveal.reveal-right { transform: translateX(28px); }
html.lg-motion .reveal.visible { opacity: 1; transform: none; will-change: auto; }

/* Image reveal: scale-settle (home hero media feel) */
html.lg-motion .reveal-img {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--dur-slow) var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
html.lg-motion .reveal-img.visible,
html.lg-motion .reveal-img.in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
html.lg-motion .reveal-img.visible.img-hover-zoom:hover,
html.lg-motion .reveal-img.in.img-hover-zoom:hover {
  transform: scale(1.04);
}

/* Page-load fade on content wrapper — not body (protects fixed nav) */
html.lg-motion.lg-ready .page-wrapper { animation: lg-page-fade 0.4s ease-out both; }

/* --------------------------------------------------------------------------
   14. INDEX-ONLY POLISH (safe no-ops elsewhere)
   -------------------------------------------------------------------------- */
/* Marquee: pause on hover (text marquees on interior pages; home uses LogoLoop) */
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* Nav settle on load (backwards only - must not block .nav-hidden) */
html.lg-motion .site-nav {
  animation: lg-nav-settle 0.4s var(--ease-out) backwards;
}

/* Hero media: opacity fade on the frame, continuous Ken Burns on the photo.
   Keep opacity and transform on separate targets so they never fight — that
   conflict was reading as stacked / stepped growth on the home hero. */
html.lg-motion .hero .hero-photo,
html.lg-motion .page-hero .hero-media,
html.lg-motion .page-hero .page-hero-photo {
  animation: lg-hero-media-in .35s var(--ease-out) both;
  transform-origin: center center;
  will-change: opacity;
  overflow: hidden;
}

/* Home: scale the <img>, not the full-bleed frame (avoids layered edge stacking) */
html.lg-motion .hero .hero-photo img {
  animation: lg-hero-ken 28s linear 0.7s infinite alternate;
  transform-origin: 68% 42%;
  will-change: transform;
  backface-visibility: hidden;
}

/* Inner pages: background-image lives on the frame itself */
html.lg-motion .page-hero .hero-media,
html.lg-motion .page-hero .page-hero-photo {
  animation:
    lg-hero-media-in .35s var(--ease-out) both,
    lg-hero-ken 28s linear 0.7s infinite alternate;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Hero: staggered entrance (opacity/transform only, no CLS) */
.hero .hero-eyebrow, .hero h1, .hero .hero-sub, .hero .hero-stats, .hero .hero-right {
  animation: lg-fade-up 0.45s var(--ease-out) both;
}
.hero h1 { animation-delay: 0.08s; }
.hero .hero-sub { animation-delay: 0.14s; }
.hero .hero-stats { animation-delay: 0.22s; }
.hero .hero-right { animation-delay: 0.16s; }

/* Page-load: gentle fade on content only (never on body/html) */
.page-wrapper { animation: lg-page-fade 0.35s ease-out both; }
html.lg-motion.lg-ready .page-wrapper { animation: lg-page-fade 0.4s ease-out both; }

@keyframes lg-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lg-page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lg-nav-settle {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lg-hero-media-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lg-hero-ken {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -0.5%, 0) scale(1.06); }
}

/* --------------------------------------------------------------------------
   14b. MOBILE OVERFLOW GUARD
   Many pages use inline-styled multi-column grids
   (style="display:grid;grid-template-columns:1.4fr 1fr...") that have no
   mobile breakpoint of their own; long unbreakable content (emails, phone
   numbers, country names) blows them past the 390px viewport and causes
   horizontal scrolling. Collapse every inline-templated grid to a single
   column on phones (!important is required to beat the inline style) and
   let children shrink below their min-content width.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] > * { min-width: 0; }

  /* our-story embed captions are nowrap for the cinematic look; on phones
     they were wider than the screen  let them wrap instead. */
  .ose-label { white-space: normal; max-width: calc(100% - 2.5rem); text-align: center; }

  /* Defense-in-depth: any residual overflow from future content must never
     produce a horizontal scrollbar on phones. `clip` (not `hidden`) so no
     scroll container is created and position:sticky keeps working. */
  html, body { overflow-x: clip; }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION  single gate
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body, .hero .hero-eyebrow, .hero h1, .hero .hero-sub,
  .hero .hero-stats, .hero .hero-right, .tab-pane.active,
  html.lg-motion .site-nav,
  html.lg-motion .hero .hero-photo,
  html.lg-motion .hero .hero-photo img,
  html.lg-motion .page-hero .hero-media,
  html.lg-motion .page-hero .page-hero-photo { animation: none !important; }
  .reveal, .reveal-img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-nav, .btn, .card, .div-card, .nav-dropdown, .nav-dropdown a,
  .photo-card img, .g-item img, .photo-feature img, .div-card-img, .img-hover-zoom,
  .footer-col ul a, .footer-bottom-links a, #chat-btn { transition: none !important; }
  .site-nav.nav-hidden { transform: none; }
  .nav-dropdown { transform: none !important; }
  .nav-megamenu,
  .has-dropdown:focus-within .nav-megamenu,
  .has-dropdown.is-open .nav-megamenu { transform: translateX(-50%) !important; }
  .nav-megamenu .mm-pane.is-active .mm-companies.is-entering,
  .mm-companies {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mm-cat { transition: none !important; }
  .mm-company, .mm-company img, .mm-company span, .mm-ext-icon,
  .site-nav .nav-logo img, .mob-acc-panel, .mob-acc-btn::after { transition: none !important; }
  .marquee-track { animation-play-state: paused !important; }
  .hero-scroll { animation: none !important; }
  .card, .div-card, .img-hover-zoom { transform: none !important; }
  .page-wrapper,
  html.lg-motion.lg-ready .page-wrapper { animation: none !important; }
}

/* --------------------------------------------------------------------------
   16. MICRO-INTERACTIONS  universal hover & transition polish
   -------------------------------------------------------------------------- */

/* Badges & tags */
.badge, .country-tag, .badge-amber, .badge-green, .badge-navy, .badge-yellow {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
  display: inline-block;
}
.badge:hover, .country-tag:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* Division & timeline */
.division-item, .timeline-item {
  transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast) ease;
}
.division-item:hover, .timeline-item:hover { transform: translateX(6px); }
.division-dot { transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease; }
.division-item:hover .division-dot { transform: scale(1.3); background: var(--yellow); }

/* Stats */
.hero-stat, .stat-number {
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast) ease;
}
.hero-stat:hover, .fs-stat:hover { transform: translateY(-3px); }
.hero-stat:hover .hero-stat-num { color: var(--yellow2); }

/* Marquee */
.marquee-item {
  transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.marquee-wrap:hover .marquee-item { opacity: 0.65; }
.marquee-item:hover { opacity: 1; color: var(--yellow); transform: scale(1.04); }

/* Section labels & dividers */
.section-label { transition: letter-spacing var(--dur-med) var(--ease-out), color var(--dur-fast) ease; }
.section-label:hover { letter-spacing: 0.06em; }
.divider-yellow { transition: transform var(--dur-slow) var(--ease-out); transform-origin: left center; }
.section:hover .divider-yellow { transform: scaleX(1.08); }

/* Inline prose links (blue, not yellow, for legible contrast on light body copy) */
.section a:not(.btn):not(.nav-logo):not(.social-link):not(.card):not(.div-card) {
  background-image: linear-gradient(var(--blue2), var(--blue2));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--dur-fast) ease, background-size var(--dur-med) var(--ease-out);
}
.section a:not(.btn):not(.nav-logo):not(.social-link):not(.card):hover {
  color: var(--blue2);
  background-size: 100% 1px;
}

/* Card icons */
.card-icon { transition: transform var(--dur-med) var(--ease-out), background-color var(--dur-fast) ease; }
.card:hover .card-icon { transform: scale(1.08) rotate(-3deg); background: rgba(255,242,0,0.24); }

/* Flags */
.flag-icon, .flag-icon-lg { transition: transform var(--dur-fast) var(--ease-out); }
.country-tag:hover .flag-icon { transform: scale(1.08); }

/* Footer logo */
.footer-logo img { transition: transform var(--dur-fast) var(--ease-out); }
.footer-logo:hover img { transform: translateY(-2px) scale(1.02); }

/* Nav CTA */
.nav-cta { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease !important; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,242,0,0.35) !important; }

/* News items */
.news-item { transition: transform var(--dur-med) var(--ease-out); }
.news-item:hover { transform: translateY(-2px); }
.news-read-more { transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.news-read-more:hover { transform: translateX(4px); }

/* Form hover */
.form-group input:hover, .form-group select:hover, .form-group textarea:hover {
  border-color: rgba(1,129,187,0.35);
}

/* Leader cards */
.leader-card { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) ease; }
.leader-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Chat */
#chat-send { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease; }
#chat-send:hover { transform: scale(1.05); }

/* Magnetic buttons (motion.js sets --mx/--my) */
html.lg-motion .fs-magnetic, html.lg-motion .btn-primary {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.3s var(--ease-out);
}

/* Footer copyright contrast on dark teal */
.site-footer .footer-bottom p,
.footer-bottom p { color: #f5f7fb; font-weight: 500; }

/* ==========================================================================
   Lake Group — MOBILE UX (assets/mobile.css)
   Imported by theme.css + flagship.css. Keep phones even, fast, and smooth.
   ========================================================================== */

/* Base: prevent sideways scroll, keep type readable, respect notches */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

@media (min-width: 721px) and (max-width: 1024px) {
  .page-hero .hero-media {
    background-color: var(--blue2, #012f49);
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .page-hero .hero-media img,
  .page-hero .hero-media picture > img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--blue2, #012f49);
  }
  html.lg-motion .page-hero .hero-media,
  html.lg-motion .page-hero .page-hero-photo { animation: lg-hero-media-in .35s var(--ease-out) both; }
}

@media (max-width: 720px) {
  html,
  body {
    overflow-x: clip;
  }

  /* Preserve the complete approved frame on small screens. Landscape heroes
     are letterboxed against the existing Lake navy rather than zoom-cropped. */
  .page-hero .hero-media {
    background-color: var(--blue2, #012f49);
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .page-hero .hero-media img,
  .page-hero .hero-media picture > img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--blue2, #012f49);
  }
  html.lg-motion .page-hero .hero-media,
  html.lg-motion .page-hero .page-hero-photo {
    animation: lg-hero-media-in .35s var(--ease-out) both;
  }

  /* Kill staggered hero fade-up on phones (conflicts with split-text / feels laggy) */
  .hero .hero-eyebrow,
  .hero h1,
  .hero .hero-sub,
  .hero .hero-stats,
  .hero .hero-right,
  html.fs-motion .page-hero h1 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .container,
  .nav-inner,
  .page-wrapper > .container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  /* Even vertical rhythm */
  .section {
    padding: 52px 0;
  }
  .section-sm {
    padding: 40px 0;
  }

  h1,
  h2,
  .section-title,
  .page-hero h1,
  .hero h1 {
    text-wrap: balance;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  p,
  .section-subtitle,
  .hero-sub,
  .page-hero p {
    text-wrap: pretty;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* Touch-friendly controls */
  .btn,
  .btn-primary,
  .btn-outline,
  .btn-blue,
  .btn-white,
  .btn-lg,
  .action-filter,
  .action-nav-btn,
  .tab-btn,
  .mm-cat {
    min-height: 44px;
    min-width: 44px;
  }

  .btn,
  .btn-primary,
  .btn-outline,
  .btn-blue,
  .btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
    width: auto;
    max-width: 100%;
  }

  .btn-lg {
    width: 100%;
  }

  /* Cards / grids: even single column */
  .card,
  .div-card,
  .photo-card,
  .leader-card,
  .g-item,
  .ld-person-card {
    width: 100%;
    max-width: 100%;
  }

  .div-card,
  .card {
    padding: 20px 16px;
  }

  /* Media that can bleed past the viewport */
  iframe,
  table {
    max-width: 100%;
  }

  .table-wrap,
  .data-table-wrap,
  .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Footer: clearer stacking */
  .footer-grid {
    gap: 28px;
  }

  .footer-brand p {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* CTA bands */
  .cta-band,
  .cta-inner {
    text-align: center;
  }

  .cta-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .cta-inner > div {
    width: 100%;
  }

  /* Chat FAB: clear home indicator */
  #chat-btn,
  #chat-widget #chat-btn {
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
  }

  #chat-box {
    width: min(100vw - 24px, 380px);
    max-height: min(70dvh, 520px);
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 72px));
  }

  /* Soften expensive motion on phones for smoother scroll */
  html.lg-motion .hero .hero-photo img,
  html.lg-motion .page-hero .hero-media,
  html.lg-motion .page-hero .page-hero-photo {
    animation: none !important;
  }

  .reveal,
  .reveal-img {
    transition-duration: 0.35s;
  }

  /* Marquee / logo loops: contain overflow, shorter track feel */
  .marquee-wrap,
  .logoloop,
  [data-logo-loop] {
    overflow: hidden;
    max-width: 100%;
  }

  /* Forms */
  .form-group input,
  .form-group select,
  .form-group textarea,
  input,
  select,
  textarea {
    font-size: 16px; /* avoid iOS zoom-on-focus */
    max-width: 100%;
  }

  /* Page heroes: fill phone viewport without oversized empty space */
  .page-hero {
    min-height: auto;
    padding: 28px 0 36px;
  }

  .page-hero .container {
    padding-top: 8px;
  }

  /* Country tags / chips wrap evenly */
  .country-tag,
  .badge {
    max-width: 100%;
  }
}

/* Extra-narrow phones */
@media (max-width: 400px) {
  .section {
    padding: 44px 0;
  }

  .section-sm {
    padding: 36px 0;
  }

  .btn {
    font-size: 0.9rem;
  }
}

/* Prefer reduced data / low power: skip decorative motion */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   SMOOTHNESS LAYER - touch & motion polish (home page / theme.css)
   Mirrors the layer in flagship.css so index.html (which loads theme.css
   instead of flagship.css) gets identical touch & motion smoothing.
   -------------------------------------------------------------------------- */
* {
  -webkit-tap-highlight-color: transparent;
}

a,
button,
[role="button"],
input,
select,
textarea,
summary {
  touch-action: manipulation;
}

@media (hover: none), (pointer: coarse) {
  .nav-logo:hover,
  .btn:hover,
  .btn:hover .fs-arrow,
  .photo-card:hover img,
  .img-hover-zoom:hover,
  .badge:hover,
  .country-tag:hover,
  .division-item:hover,
  .timeline-item:hover,
  .division-item:hover .division-dot,
  .fs-stat:hover,
  .kpi:hover,
  .fs-stat:hover .fs-stat-no,
  .kpi:hover .kpi-no,
  .leader-card:hover .leader-photo img,
  .sus-item:hover,
  .sus-item:hover .sus-emoji,
  .section:hover .divider-yellow,
  .fs-section:hover .fs-rule,
  .marquee-item:hover,
  .card:hover .card-icon,
  .country-cell:hover .flag-icon-lg,
  .country-tag:hover .flag-icon,
  .footer-logo:hover img,
  .mm-company:hover,
  .mm-company:hover img,
  .mm-company:hover span,
  .div-row:hover,
  .ev-row:hover,
  .fs-marker:hover,
  .nav-link:hover,
  .nav-links a:hover,
  .footer a:hover,
  .breadcrumb a:hover {
    transform: none !important;
  }
  .leader-card:hover,
  .badge:hover,
  .country-tag:hover {
    box-shadow: none !important;
  }
  .nav-megamenu .mm-company:hover,
  .mm-company:hover {
    background: transparent !important;
  }

  .btn:active,
  button:active,
  .mm-company:active,
  .photo-card:active,
  .nav-logo:active,
  .footer-logo:active,
  .div-row:active,
  .ev-row:active {
    opacity: 0.78;
  }

  html,
  body {
    overscroll-behavior-y: contain;
  }
}

/* Fine-pointer: merge transition properties instead of replacing lists so
   border-color/background transitions set elsewhere are preserved. */
@media (hover: hover) and (pointer: fine) {
  .photo-card,
  .img-hover-zoom,
  .badge,
  .country-tag,
  .division-item,
  .timeline-item,
  .fs-stat,
  .kpi,
  .sus-item,
  .marquee-item,
  .card,
  .country-cell,
  .footer-logo,
  .mm-company,
  .div-row,
  .ev-row,
  .leader-card {
    transition-property: transform, box-shadow, opacity, background-color,
      border-color, color;
    transition-duration: var(--dur-med), var(--dur-med), var(--dur-fast),
      var(--dur-fast), var(--dur-fast), var(--dur-fast);
    transition-timing-function: var(--ease-out), ease, ease, ease, ease, ease;
  }
}

/* Promote the compositing layer only during hover/zoom, not permanently,
   so photo grids don't pin dozens of GPU layers. */
.photo-card:hover img,
.img-hover-zoom:hover,
.gallery-tile:hover .gallery-tile__img {
  will-change: transform;
}

.site-nav a,
.nav-mobile a,
.nav-dropdown a,
.mm-company a {
  -webkit-tap-highlight-color: transparent;
}