:root {
  --navy: #153341;
  --blue: #28486c;
  --brand: #335596;
  --teal: #74c5b5;
  --sea: #167464;
  --ink: #243c47;
  --muted: #536972;
  --line: #d9e4e6;
  --soft: #f3f7fb;
  --white: #ffffff;
  --footer-height: 78px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; scroll-padding-bottom: calc(var(--footer-height) + 16px); }
body { margin: 0; min-height: 100vh; padding-bottom: var(--footer-height); display: flex; flex-direction: column; color: var(--ink); background: var(--white); font: 16px/1.65 "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
main { flex: 1 0 auto; min-width: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3 { color: var(--navy); margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: 0; overflow-wrap: break-word; }
h1 { max-width: 820px; font-size: 46px; margin-top: 12px; }
h2 { font-size: 34px; }
h3 { font-size: 20px; }
h4 { color: var(--navy); margin: 20px 0 6px; font-size: 15px; line-height: 1.35; letter-spacing: 0; }
p { color: var(--muted); margin: 14px 0; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; border-radius: 3px; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 18px; background: white; color: var(--navy); }
.skip-link:focus { top: 10px; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); }
.nav { width: 100%; min-height: 76px; margin: 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; width: 152px; height: 58px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 12px; }
.nav-links a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 14px; border-radius: 6px; color: var(--navy); font-size: 14px; font-weight: 650; transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { background: #eaf5f1; color: var(--sea); }
.glyph { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 10.189V14%22 /%3E%3Cpath d=%22M12 2v3%22 /%3E%3Cpath d=%22M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6%22 /%3E%3Cpath d=%22M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76%22 /%3E%3Cpath d=%22M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1%22 /%3E%3C/svg%3E"); display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.glyph-home { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22 /%3E%3Cpath d=%22M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22 /%3E%3C/svg%3E"); }
.glyph-method { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%228%22 height=%224%22 x=%228%22 y=%222%22 rx=%221%22 ry=%221%22 /%3E%3Cpath d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22 /%3E%3Cpath d=%22M12 11h4%22 /%3E%3Cpath d=%22M12 16h4%22 /%3E%3Cpath d=%22M8 11h.01%22 /%3E%3Cpath d=%22M8 16h.01%22 /%3E%3C/svg%3E"); }
.glyph-resources { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%228%22 height=%2218%22 x=%223%22 y=%223%22 rx=%221%22 /%3E%3Cpath d=%22M7 3v18%22 /%3E%3Cpath d=%22M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z%22 /%3E%3C/svg%3E"); }
.glyph-contact { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2220%22 height=%2216%22 x=%222%22 y=%224%22 rx=%222%22 /%3E%3Cpath d=%22m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7%22 /%3E%3C/svg%3E"); }
.glyph-ship { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M12 10.189V14%22 /%3E%3Cpath d=%22M12 2v3%22 /%3E%3Cpath d=%22M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6%22 /%3E%3Cpath d=%22M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76%22 /%3E%3Cpath d=%22M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1%22 /%3E%3C/svg%3E"); }
.glyph-waves { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1%22 /%3E%3Cpath d=%22M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1%22 /%3E%3Cpath d=%22M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1%22 /%3E%3C/svg%3E"); }
.glyph-users { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 21a8 8 0 0 0-16 0%22 /%3E%3Ccircle cx=%2210%22 cy=%228%22 r=%225%22 /%3E%3Cpath d=%22M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3%22 /%3E%3C/svg%3E"); }
.glyph-shield { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22 /%3E%3Cpath d=%22m9 12 2 2 4-4%22 /%3E%3C/svg%3E"); }
.glyph-arrow { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M7 7h10v10%22 /%3E%3Cpath d=%22M7 17 17 7%22 /%3E%3C/svg%3E"); }
.glyph-phone { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z%22 /%3E%3C/svg%3E"); }
.glyph-copy { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22 ry=%222%22 /%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22 /%3E%3C/svg%3E"); }
.glyph-menu { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cline x1=%224%22 x2=%2220%22 y1=%2212%22 y2=%2212%22 /%3E%3Cline x1=%224%22 x2=%2220%22 y1=%226%22 y2=%226%22 /%3E%3Cline x1=%224%22 x2=%2220%22 y1=%2218%22 y2=%2218%22 /%3E%3C/svg%3E"); }
.glyph-award { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526%22/%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%226%22/%3E%3C/svg%3E"); }
.glyph-building { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z%22/%3E%3Cpath d=%22M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2%22/%3E%3Cpath d=%22M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2%22/%3E%3Cpath d=%22M10 6h4%22/%3E%3Cpath d=%22M10 10h4%22/%3E%3Cpath d=%22M10 14h4%22/%3E%3Cpath d=%22M10 18h4%22/%3E%3C/svg%3E"); }
.glyph-calendar { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 2v4%22/%3E%3Cpath d=%22M16 2v4%22/%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22M3 10h18%22/%3E%3Cpath d=%22M8 14h.01%22/%3E%3Cpath d=%22M12 14h.01%22/%3E%3Cpath d=%22M16 14h.01%22/%3E%3Cpath d=%22M8 18h.01%22/%3E%3Cpath d=%22M12 18h.01%22/%3E%3Cpath d=%22M16 18h.01%22/%3E%3C/svg%3E"); }
.glyph-calendar-check { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 2v4%22/%3E%3Cpath d=%22M16 2v4%22/%3E%3Crect width=%2218%22 height=%2218%22 x=%223%22 y=%224%22 rx=%222%22/%3E%3Cpath d=%22M3 10h18%22/%3E%3Cpath d=%22m9 16 2 2 4-4%22/%3E%3C/svg%3E"); }
.glyph-check { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); }
.glyph-alert { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%228%22 y2=%2212%22/%3E%3Cline x1=%2212%22 x2=%2212.01%22 y1=%2216%22 y2=%2216%22/%3E%3C/svg%3E"); }
.glyph-leaf { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z%22/%3E%3Cpath d=%22M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12%22/%3E%3C/svg%3E"); }
.glyph-landmark { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 18v-7%22/%3E%3Cpath d=%22M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z%22/%3E%3Cpath d=%22M14 18v-7%22/%3E%3Cpath d=%22M18 18v-7%22/%3E%3Cpath d=%22M3 22h18%22/%3E%3Cpath d=%22M6 18v-7%22/%3E%3C/svg%3E"); }
.glyph-scale { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1%22/%3E%3Cpath d=%22m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1%22/%3E%3Cpath d=%22M7 21h10%22/%3E%3Cpath d=%22M12 3v18%22/%3E%3Cpath d=%22M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2%22/%3E%3C/svg%3E"); }
.glyph-gavel { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m14.5 12.5-8 8a2.119 2.119 0 1 1-3-3l8-8%22/%3E%3Cpath d=%22m16 16 6-6%22/%3E%3Cpath d=%22m8 8 6-6%22/%3E%3Cpath d=%22m9 7 8 8%22/%3E%3Cpath d=%22m21 11-8-8%22/%3E%3C/svg%3E"); }
.glyph-chart { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 7h6v6%22/%3E%3Cpath d=%22m22 7-8.5 8.5-5-5L2 17%22/%3E%3C/svg%3E"); }
.glyph-signature { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m18 5-2.414-2.414A2 2 0 0 0 14.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 .586 1.414%22/%3E%3Cpath d=%22M8 18h1%22/%3E%3Cpath d=%22M18.4 9.6a2 2 0 0 1 3 3L17 17l-4 1 1-4Z%22/%3E%3C/svg%3E"); }
.glyph-eye { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E"); }
.glyph-globe { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/%3E%3Cpath d=%22M2 12h20%22/%3E%3C/svg%3E"); }
.glyph-coins { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226%22/%3E%3Cpath d=%22M18.09 10.37A6 6 0 1 1 10.34 18%22/%3E%3Cpath d=%22M7 6h1v4%22/%3E%3Cpath d=%22m16.71 13.88.7.71-2.82 2.82%22/%3E%3C/svg%3E"); }
.glyph-refresh { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3Cpath d=%22M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16%22/%3E%3Cpath d=%22M8 16H3v5%22/%3E%3C/svg%3E"); }
.glyph-zap { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z%22/%3E%3C/svg%3E"); }
.glyph-database { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2212%22 cy=%225%22 rx=%229%22 ry=%223%22/%3E%3Cpath d=%22M3 5V19A9 3 0 0 0 21 19V5%22/%3E%3Cpath d=%22M3 12A9 3 0 0 0 21 12%22/%3E%3C/svg%3E"); }
.glyph-shield-plain { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/%3E%3C/svg%3E"); }
.glyph-chevron { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E"); }
.nav-icon { width: 21px; height: 21px; flex-basis: 21px; }
.nav-links a[aria-current="page"] .nav-icon { animation: icon-bob 3s ease-in-out infinite; }
.nav-links a:hover .nav-icon, .nav-links a:focus-visible .nav-icon { animation: icon-bob .8s ease-in-out infinite; }
.nav-links a:hover .glyph-method { animation-name: icon-tilt; }
.nav-links a:hover .glyph-resources { animation-name: icon-rise; }
.nav-links a:hover .glyph-contact { animation-name: icon-flight; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 9px; color: var(--navy); background: white; border: 1px solid var(--line); border-radius: 6px; }
.nav-toggle[aria-expanded="true"] .glyph { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 6 18%22 /%3E%3Cpath d=%22m6 6 12 12%22 /%3E%3C/svg%3E"); }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.section { position: relative; padding: 72px 0; }
.section.alt { background: var(--soft); }
.section-head { max-width: 810px; margin-bottom: 32px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { position: relative; margin-top: 9px; padding-bottom: 14px; }
.section-head h2::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--sea), var(--teal), var(--brand)); }
.section-head.center h2::after { margin-left: auto; margin-right: auto; }
.section-head p { font-size: 17px; }
.section-intro { margin: 0 0 8px; color: var(--navy); font-weight: 650; }
.kicker { display: block; color: var(--sea); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.section-note { margin-top: 22px; font-size: 14px; }
.page-intro { padding: 62px 0 46px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 20px; border: 1px solid var(--sea); border-radius: 6px; background: var(--sea); color: white; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; transition: background .2s, transform .2s; }
.btn:hover { background: #115c50; transform: translateY(-2px); }
.btn.secondary { color: var(--navy); background: #fff; border-color: #b9cbce; }
.btn.secondary:hover { background: #edf6f3; }
.btn .glyph { width: 20px; height: 20px; flex-basis: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.home-hero { position: relative; isolation: isolate; overflow: hidden; padding: 0; }
.home-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 48%, rgba(255,255,255,.42) 100%); pointer-events: none; }
.maritime-scene { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 64%; animation: heroDrift 18s ease-in-out infinite alternate; transform-origin: center; }
.home-hero-inner { position: relative; min-height: 610px; padding-top: 58px; padding-bottom: 54px; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-content-panel { position: relative; width: min(940px, 100%); margin: 0 auto; padding: 22px 0 24px; }
.hero-content-panel::before { content: ""; display: block; width: min(180px, 42vw); height: 3px; margin: 0 auto 22px; border-radius: 999px; background: linear-gradient(90deg, var(--sea), var(--teal), var(--brand)); box-shadow: 0 0 0 6px rgba(116, 197, 181, .1); }
.hero-content { max-width: 900px; margin: 0 auto; }
.home-hero h1 { font-size: 52px; max-width: 860px; margin: 10px auto 0; }
.hero-lead { max-width: 820px; color: var(--navy); font-size: 30px; font-weight: 650; line-height: 1.3; margin: 18px auto; }
.hero-lead span { font-size: 22px; color: #165c51; }
.hero-copy { max-width: 820px; margin-left: auto; margin-right: auto; font-size: 16px; color: #314f5c; }
.hero-provider { display: inline-flex; margin: 2px 0 0; color: #153341; font-size: 14px; font-weight: 750; }
.hero-caption { font-size: 12px; color: #315962; margin: 22px 0 0; font-weight: 600; }
.esg-chapter-band { position: relative; overflow: hidden; padding: 22px 0; background: linear-gradient(135deg, #153341, #28486c 58%, #167464); color: white; }
.esg-chapter-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 72%); transform: translateX(-100%); animation: bandSheen 8s ease-in-out infinite; }
.esg-chapter-band-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.esg-chapter-band span { flex: 0 0 auto; color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.esg-chapter-band p { margin: 0; color: white; font-size: 20px; font-weight: 750; line-height: 1.35; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-list { display: flex; flex-wrap: wrap; gap: 10px; }
.feature-list span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 13px; border: 1px solid #bad6ce; border-radius: 6px; background: #f8fbfa; color: var(--navy); font-size: 13px; font-weight: 650; }
.feature-title { margin: 4px 0 18px; color: var(--navy); font-size: 22px; letter-spacing: 0; }
.feature-list-compact { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.feature-list-compact li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 13px 16px 13px 18px; border: 1px solid #bad6ce; border-radius: 8px; background: #f8fbfa; color: var(--navy); font-size: 15px; font-weight: 750; line-height: 1.35; box-shadow: 0 10px 26px rgba(21, 51, 65, .055); overflow: hidden; transition: transform .25s, border-color .25s, background .25s, box-shadow .25s; }
.feature-list-compact li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--sea), var(--teal)); opacity: .82; }
.feature-list-compact li:hover { transform: translateY(-3px); border-color: #8fb9ad; background: white; box-shadow: 0 18px 34px rgba(21, 51, 65, .1); }
.feature-list-compact .glyph { position: relative; z-index: 1; color: var(--sea); width: 22px; height: 22px; flex-basis: 22px; }
.feature-list-compact li:hover .glyph { animation: icon-bob .85s ease-in-out infinite; }
.approach-pill-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 26px 0 8px; align-items: stretch; }
.approach-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 22px 18px 20px; overflow: hidden; border: 1px solid #dfe9ee; border-left: 4px solid var(--teal); border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%); box-shadow: 0 8px 24px rgba(51, 85, 150, .08); text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.approach-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(116, 197, 181, .18), transparent 34%); opacity: .82; pointer-events: none; }
.approach-card > * { position: relative; z-index: 1; }
.approach-card:hover { transform: translateY(-4px); border-color: #9fc8bf; box-shadow: 0 16px 34px rgba(51, 85, 150, .14); }
.approach-card h4, .vs-esg-card h4 { display: flex; align-items: center; justify-content: flex-start; flex-direction: column; gap: 10px; min-height: 124px; margin: 0 0 12px; color: var(--brand); font-size: 15.5px; font-weight: 800; line-height: 1.32; text-align: center; }
.approach-icon { width: 38px; height: 38px; flex-basis: 38px; color: var(--brand); filter: drop-shadow(0 3px 8px rgba(51, 85, 150, .16)); animation: icon-bob 4.5s ease-in-out infinite; }
.approach-card:hover .approach-icon { color: var(--sea); animation-duration: .85s; }
.approach-more[hidden], .vs-esg-card-more[hidden], .vs-esg-pillar-body[hidden] { display: none !important; }
.approach-more p, .vs-esg-card-more p { margin: 0 0 14px; color: #243c47; font-size: 14px; line-height: 1.58; }
.approach-more-btn, .vs-esg-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; margin-top: auto; padding: 8px 16px; border: 1px solid #0f695b; border-radius: 999px; background: linear-gradient(135deg, var(--teal), var(--sea)); color: white; font-size: 12.5px; font-weight: 750; line-height: 1.3; transition: filter .2s ease, transform .2s ease; }
.approach-more-btn:hover, .approach-more-btn:focus-visible, .vs-esg-more-btn:hover, .vs-esg-more-btn:focus-visible { filter: brightness(1.06); transform: translateY(-1px); }
.approach-more-btn .glyph, .vs-esg-more-btn .glyph { width: 15px; height: 15px; flex-basis: 15px; transition: transform .2s ease; }
.approach-more-btn[aria-expanded="true"] .glyph, .vs-esg-more-btn[aria-expanded="true"] .glyph { transform: rotate(180deg); }
.vs-esg-pill-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0 8px; align-items: stretch; }
.vs-esg-pill-row--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vs-esg-pill-row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vs-esg-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; padding: 22px 18px 20px; overflow: hidden; border: 1px solid #dfe9ee; border-left: 4px solid var(--teal); border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%); box-shadow: 0 8px 24px rgba(51, 85, 150, .08); text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.vs-esg-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(116, 197, 181, .18), transparent 34%); opacity: .82; pointer-events: none; }
.vs-esg-card > * { position: relative; z-index: 1; }
.vs-esg-card:hover { transform: translateY(-4px); border-color: #9fc8bf; box-shadow: 0 16px 34px rgba(51, 85, 150, .14); }
.vs-esg-pill-row--two .vs-esg-card h4 { min-height: 74px; }
.vs-esg-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; align-items: stretch; }
.vs-esg-pillars--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vs-esg-pillar { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #dfe9ee; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(51,85,150,.08); transition: transform .25s ease, box-shadow .25s ease; }
.vs-esg-pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(51,85,150,.14); }
.vs-esg-pillar-head { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 82px; padding: 18px; background: linear-gradient(135deg, var(--blue), var(--brand)); color: #fff; font-size: 16px; font-weight: 800; text-align: center; }
.vs-esg-pillar:nth-child(1) .vs-esg-pillar-head { background: linear-gradient(135deg, var(--sea), var(--teal)); }
.vs-esg-pillar:nth-child(2) .vs-esg-pillar-head { background: linear-gradient(135deg, #1565c0, #4a90d9); }
.vs-esg-pillar:nth-child(3) .vs-esg-pillar-head { background: linear-gradient(135deg, var(--blue), var(--brand)); }
.vs-esg-pillar-head .glyph { width: 24px; height: 24px; flex-basis: 24px; }
.vs-esg-pillar-body { padding: 18px 20px 4px; }
.vs-esg-pillar-body ul { margin: 0; padding-left: 18px; color: var(--muted); }
.vs-esg-pillar-body li { font-size: 14px; line-height: 1.7; }
.vs-esg-pillar-body li + li { margin-top: 7px; }
.vs-esg-pillar .vs-esg-more-btn { align-self: center; margin: 12px auto 16px; }
.vs-esg-pillars--two .vs-esg-pillar-body { text-align: center; }
.vs-esg-pillars--two .vs-esg-pillar-body ul { display: inline-block; list-style: none; padding-left: 0; text-align: left; }
.vs-esg-pillars--two .vs-esg-pillar-body li { position: relative; padding-left: 28px; }
.vs-esg-pillars--two .vs-esg-pillar-body li::before { content: "\2713"; position: absolute; left: 0; top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(63,163,146,.45); background: rgba(116,197,181,.16); color: var(--sea); font-size: 11px; font-weight: 900; }
.vs-esg-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 18px; margin: 44px 0 8px; }
.vs-esg-step { position: relative; min-width: 0; min-height: 112px; padding: 30px 10px 16px; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; border: 1px solid #dfe9ee; border-top: 3px solid var(--brand); border-radius: 12px; background: white; box-shadow: 0 6px 20px rgba(29,52,97,.09); text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
.vs-esg-step:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(29,52,97,.16); }
.vs-esg-step--final { border-top-color: var(--teal); }
.vs-esg-step-n { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: white; font-size: 13px; font-weight: 800; box-shadow: 0 5px 16px rgba(51,85,150,.18); }
.vs-esg-step--final .vs-esg-step-n { background: var(--sea); }
.vs-esg-step-t { display: block; margin-top: 10px; color: var(--navy); font-size: 13px; font-weight: 750; line-height: 1.45; }
.vs-esg-disclaimer { margin: 24px 0; padding: 20px 22px; border: 1px solid #d8e3f2; border-left: 4px solid var(--brand); border-radius: 12px; background: #f5f8fc; }
.vs-esg-disclaimer h4 { display: block; margin: 0 0 10px; color: var(--brand); font-size: 19px; font-weight: 800; text-align: center; }
.vs-esg-disclaimer ul { margin: 0; padding-left: 18px; }
.vs-esg-disclaimer li { color: var(--brand); font-size: 14px; line-height: 1.75; }
.pillar-callout { margin: 24px 0 0; padding: 22px; border: 1px solid #d8e8e5; border-left: 4px solid var(--teal); border-radius: 12px; background: #f7fbfa; }
.pillar-callout h4 { margin: 0 0 10px; color: var(--sea); font-size: 18px; font-weight: 800; text-align: center; }
.pillar-callout p { max-width: 980px; margin-left: auto; margin-right: auto; text-align: center; }
.pillar-callout .cta { justify-content: center; margin: 6px auto 0; width: fit-content; }
.card { position: relative; overflow: hidden; padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 10px 26px rgba(21, 51, 65, .055); transition: border-color .25s, transform .25s, box-shadow .25s; min-width: 0; }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sea), var(--teal), var(--brand)); opacity: .88; transform: scaleX(.34); transform-origin: left; transition: transform .25s ease; }
.card:hover { border-color: #90b7ab; transform: translateY(-3px); box-shadow: 0 20px 40px rgba(21, 51, 65, .09); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-size: 21px; }
.card p, .card li { font-size: 15px; }
.card ul { padding-left: 19px; margin: 18px 0 22px; color: var(--muted); }
.card li + li { margin-top: 8px; }
.icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 6px; color: var(--sea); background: #e6f3ee; margin-bottom: 18px; }
.icon .glyph { width: 27px; height: 27px; flex-basis: 27px; }
.pillar-card { display: flex; flex-direction: column; border-top: 3px solid var(--sea); }
.pillar-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pillar-weight { font-size: 12px; color: var(--muted); }
.pillar-weight strong { display: block; font-size: 25px; font-weight: 600; color: var(--sea); }
.pillar-s { border-top-color: #336995; }
.pillar-s .icon { background: #edf3fa; color: #336995; }
.pillar-s .pillar-weight strong { color: #336995; }
.pillar-g { border-top-color: #916628; }
.pillar-g .icon { background: #fbf4e7; color: #916628; }
.pillar-g .pillar-weight strong { color: #916628; }
.pillar-e .icon .glyph { animation: icon-bob 4s ease-in-out infinite; }
.pillar-s .icon .glyph { animation: icon-rise 4s ease-in-out infinite; }
.pillar-g .icon .glyph { animation: icon-tilt 4s ease-in-out infinite; }
.pillar-card .text-link { margin-top: auto; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--sea); font-size: 14px; font-weight: 650; line-height: 1.5; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link .glyph { width: 18px; height: 18px; flex-basis: 18px; }
.table-scroll { overflow-x: auto; }
.vs-ratingscore { position: relative; margin: 26px 0 8px; border: 1px solid #e8eef5; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 42px rgba(51, 85, 150, .12); background: #fff; }
.vs-ratingscore::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sea), var(--teal), var(--brand)); }
.vs-ratingscore-head { padding: 20px 22px; background: linear-gradient(135deg, #0b2140, #1d3461 55%, #335596); color: #fff; text-align: center; }
.vs-ratingscore-head h3 { margin: 0 0 6px; color: #fff; font-size: 24px; font-weight: 800; text-align: center; }
.vs-ratingscore-head p { max-width: 920px; margin: 0 auto; color: #fff; font-size: 14.5px; font-weight: 800; line-height: 1.65; text-align: center; }
.vs-bs-scroll { overflow-x: auto; }
.vs-bs-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.vs-bs-table th { padding: 12px 14px; border-bottom: 1px solid #e8eef5; background: #f6f9fc; color: #335596; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.vs-bs-table td { padding: 14px; border-bottom: 1px solid #eef2f7; color: #5a6a7d; font-size: 13.5px; line-height: 1.6; vertical-align: middle; }
.vs-bs-row { opacity: 0; transform: translateY(14px); animation: vsBsIn .55s ease forwards; }
.vs-bs-band { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 800; letter-spacing: .3px; }
.vs-bs-dots { display: inline-flex; align-items: center; gap: 3px; min-height: 8px; }
.vs-bs-dots i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vs-bs-range { display: inline-block; min-width: 74px; padding: 8px 12px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.vs-bs-level { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.vs-bs-bar { height: 4px; margin-bottom: 7px; overflow: hidden; border-radius: 4px; background: #e8eef5; }
.vs-bs-bar span { display: block; width: 0; height: 100%; border-radius: 4px; animation: vsBsBar 1.1s ease forwards; }
@keyframes vsBsIn { to { opacity: 1; transform: translateY(0); } }
@keyframes vsBsBar { to { width: var(--w); } }
.rating-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 8px 26px #15334114; }
.rating-panel-head { padding: 22px 24px; text-align: center; background: linear-gradient(135deg, #153341, #28486c 58%, #167464); }
.rating-panel-head p { max-width: 980px; margin: 0 auto; color: white; font-size: 15px; font-weight: 750; line-height: 1.65; }
.rating-table { width: 100%; border-collapse: collapse; text-align: left; }
.rating-table caption { text-align: left; padding-bottom: 16px; font-size: 14px; color: var(--muted); }
.rating-table th, .rating-table td { padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rating-table thead { background: #e8eff2; color: #3c5e6b; font-size: 12px; text-transform: uppercase; }
.rating-table tbody tr { background: white; transition: background .2s; }
.rating-table tbody tr:hover { background: #eaf5f1; }
.rating-table tbody th { width: 29%; font-size: 15px; font-weight: 650; }
.rating-table td { color: var(--muted); font-size: 14px; }
.rating-table td:nth-child(2) { width: 14%; white-space: nowrap; color: var(--navy); font-size: 17px; font-variant-numeric: tabular-nums; font-weight: 600; }
.rating-score-table { min-width: 780px; }
.rating-score-table tbody tr:nth-child(odd) { background: #f7fafd; }
.rating-score-table tbody tr:nth-child(5) { background: #fffdf6; }
.rating-score-table tbody tr:nth-child(6) { background: #fff8f1; }
.rating-score-table tbody tr:nth-child(7) { background: #fdf4f3; }
.rating-score-table tbody th { width: 22%; }
.rating-band, .score-level { display: block; color: var(--navy); font-weight: 800; letter-spacing: 0; }
.rating-dots { display: block; margin-top: 6px; font-size: 18px; line-height: 1; letter-spacing: 3px; }
.score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; padding: 8px 10px; border-radius: 6px; color: white; background: var(--navy); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-bar { display: block; height: 4px; margin: 8px 0 7px; overflow: hidden; border-radius: 999px; background: #e7edf0; }
.score-bar span { display: block; width: var(--w); height: 100%; border-radius: inherit; background: currentColor; }
.level-1 { color: #0d2b52; background-color: #0d2b52; }
.level-2 { color: #1565c0; background-color: #1565c0; }
.level-3 { color: #4a90d9; background-color: #4a90d9; }
.level-4 { color: #4f8f5f; background-color: #5f9e6e; }
.level-5 { color: #a8861a; background-color: #c9a227; }
.level-6 { color: #c2610f; background-color: #e2711d; }
.level-7 { color: #a53023; background-color: #c0392b; }
.rating-band.level-1, .score-level.level-1, .rating-dots .level-1 { background: transparent; }
.rating-band.level-2, .score-level.level-2 { background: transparent; }
.rating-band.level-3, .score-level.level-3 { background: transparent; }
.rating-band.level-4, .score-level.level-4 { background: transparent; }
.rating-band.level-5, .score-level.level-5 { background: transparent; }
.rating-band.level-6, .score-level.level-6 { background: transparent; }
.rating-band.level-7, .score-level.level-7 { background: transparent; }
.rating-dots { background: transparent !important; }
.score-pill.level-1, .score-pill.level-2, .score-pill.level-3, .score-pill.level-4, .score-pill.level-5, .score-pill.level-6, .score-pill.level-7 { color: white; }
.vs-esg-h3-title { margin: 28px 0 14px; color: var(--navy); font-size: 22px; font-weight: 750; text-align: center; }
.vs-esg-scope { width: 100%; border: 1px solid var(--line); border-collapse: collapse; margin: 18px 0; background: white; box-shadow: 0 12px 30px rgba(21, 51, 65, .065); }
.vs-esg-scope th { padding: 13px 14px; background: linear-gradient(135deg, var(--sea), var(--teal)); color: white; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-align: center; text-transform: uppercase; }
.vs-esg-scope td { padding: 13px 14px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: center; vertical-align: middle; }
.vs-esg-scope tr:hover td { background: #f6fbfa; }
.vs-esg-inscope { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--brand); font-size: 13px; font-weight: 800; }
.scope-note-inline { max-width: 920px; margin: 10px auto 0; color: var(--muted); font-size: 14px; text-align: center; }
.scope-materiality-cards { margin-top: 18px; }
.scope-note { margin-top: 26px; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; gap: 18px; }
.scope-note > .glyph { color: var(--sea); }
.scope-note h3 { font-size: 18px; }
.scope-note p { font-size: 14px; margin: 8px 0 12px; max-width: 920px; }
.segment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.segment-card { min-width: 0; min-height: 188px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: white; transition: border-color .25s, transform .25s, background .25s; }
.segment-card:hover { border-color: #8fb9ad; background: #fbfdfc; transform: translateY(-3px); }
.segment-card .glyph { color: var(--sea); margin-bottom: 16px; }
.segment-card:hover .glyph { animation: icon-bob .85s ease-in-out infinite; }
.segment-card h3 { font-size: 18px; }
.segment-card p { font-size: 14px; margin-bottom: 0; }
.voyage { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; margin: 0; gap: 28px; }
.voyage li { border-top: 2px solid #bfdad3; padding-top: 18px; }
.voyage li > span { font-size: 13px; color: var(--sea); font-weight: 700; }
.voyage h3 { font-size: 17px; margin-top: 12px; }
.voyage p { font-size: 14px; }
.closing-band { display: flex; align-items: center; justify-content: space-between; gap: 38px; }
.closing-band > div { max-width: 740px; }
.closing-band .btn { flex-shrink: 0; }
.closing-title { margin: 8px 0 0; color: var(--navy); font-size: 34px; font-weight: 700; line-height: 1.2; }
.disclosure-band { padding: 34px 0; border-top: 1px solid var(--line); }
.disclosure-band h2 { font-size: 16px; }
.disclosure-band p { font-size: 13px; margin-bottom: 0; }
.footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; border-top: 1px solid var(--line); background: #edf3f3; padding: 12px 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--muted); }
.footer-inner { width: 100%; margin: 0; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.copyright { order: 0; margin: 0; max-width: 100%; overflow-wrap: anywhere; font-size: inherit; text-align: left; }
.footer-nav { order: 1; display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--navy); }
.footer a:hover { text-decoration: underline; }
.contact-direct { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; border-top: 1px solid var(--line); padding-top: 28px; }
.contact-direct > div { display: flex; align-items: center; gap: 16px; min-width: 0; }
.contact-direct > div > .glyph { color: var(--sea); }
.contact-direct h2 { font-size: 14px; margin-bottom: 5px; }
.contact-direct a { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.contact-direct > div > div { min-width: 0; }
.icon-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; color: var(--sea); background: white; border: 1px solid var(--line); border-radius: 6px; }
.tooltip { position: absolute; bottom: calc(100% + 8px); right: 0; white-space: nowrap; font-size: 12px; padding: 5px 8px; color: white; background: var(--navy); border-radius: 4px; pointer-events: none; visibility: hidden; }
.icon-button:hover .tooltip, .icon-button:focus-visible .tooltip { visibility: visible; }
.copy-status { min-height: 24px; margin: 8px 0 0; font-size: 13px; color: var(--sea); }
.vs-cb-banner { position: fixed; left: 0; right: 0; bottom: calc(var(--footer-height) + 18px); z-index: 35; padding: 0 16px; }
.vs-cb-inner { width: min(1080px, 100%); margin: 0 auto; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #bcd2d4; border-left: 4px solid var(--sea); border-radius: 8px; background: rgba(255, 255, 255, .98); box-shadow: 0 18px 42px #15334126; }
.vs-cb-text { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.vs-cb-icon-wrap { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 6px; color: var(--sea); background: #e6f3ee; }
.vs-cb-icon { width: 25px; height: 25px; flex-basis: 25px; animation: icon-tilt 4s ease-in-out infinite; }
.vs-cb-text strong { display: block; color: var(--navy); font-size: 16px; line-height: 1.35; }
.vs-cb-text p { margin: 5px 0 0; max-width: 680px; font-size: 13px; line-height: 1.55; }
.vs-cb-preferences { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.vs-cb-preferences p { margin-top: 6px; }
.vs-cb-preferences a { display: inline-flex; margin-top: 8px; color: var(--sea); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vs-cb-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.vs-cb-btn { min-height: 42px; padding: 10px 14px; border: 1px solid #b9cbce; border-radius: 6px; background: white; color: var(--navy); font-size: 13px; font-weight: 750; line-height: 1.35; transition: background .2s, transform .2s, border-color .2s; }
.vs-cb-btn:hover, .vs-cb-btn:focus-visible { transform: translateY(-2px); border-color: #8fb9ad; }
.vs-cb-accept { border-color: var(--sea); background: var(--sea); color: white; }
.vs-cb-accept:hover { background: #115c50; }
.vs-cb-reject:hover, .vs-cb-manage:hover { background: #edf6f3; }
.office-card h3 { margin-top: 8px; }
.office-card address { font-style: normal; color: var(--muted); margin: 20px 0; font-size: 15px; }
.office-meta { padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px !important; }
.regional-offices { margin-top: 22px; }
.resource-section { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
.resource-section h2 { font-size: 32px; margin-top: 9px; }
.resource-section p, .resource-section li { font-size: 15px; color: var(--muted); }
.resource-section ul { padding-left: 20px; }
.resource-section li + li { margin-top: 8px; }
.resource-section .icon { margin-bottom: 12px; }
.resource-details details { border-bottom: 1px solid var(--line); }
.resource-details details:first-child { border-top: 1px solid var(--line); }
.resource-details summary { padding: 18px 0; cursor: pointer; font-weight: 650; color: var(--navy); }
.resource-details details[open] summary { color: var(--sea); }
.resource-details details p { padding: 0 0 10px 18px; margin-top: 0; }
.topic-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.topic-nav a { color: var(--sea); font-weight: 650; border-bottom: 2px solid #bad6ce; padding: 8px 0; }
.topic-nav a:hover { border-color: var(--sea); }
.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.process.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.process-step { position: relative; border-top: 2px solid #bad6ce; padding: 16px 4px; }
.process-step::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border: 2px solid var(--sea); border-radius: 50%; background: white; box-shadow: 0 0 0 4px #e6f3ee; }
.process-step b { font-size: 13px; color: var(--sea); }
.process-step span { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; }
.process-support { margin-top: 30px; }
.callout { margin-top: 30px; border-left: 3px solid var(--sea); padding: 12px 24px; background: #f1f8f5; }
.callout p { font-size: 15px; }
.dimension-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dimension-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: white; transition: transform .25s, border-color .25s; }
.dimension-card:hover { transform: translateY(-3px); border-color: #90b7ab; }
.dimension-card span { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; min-height: 40px; margin-bottom: 16px; border-radius: 6px; color: var(--sea); background: #e6f3ee; font-weight: 750; }
.dimension-card h3 { font-size: 18px; }
.dimension-card p { font-size: 14px; margin-bottom: 0; }
.weight-tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.weight-table { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.weight-table h3 { font-size: 19px; margin-bottom: 14px; }
.weight-table table { width: 100%; border-collapse: collapse; }
.weight-table caption { padding-bottom: 10px; color: var(--muted); text-align: left; font-size: 13px; }
.weight-table th, .weight-table td { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; vertical-align: top; }
.weight-table th { color: var(--ink); font-weight: 600; text-align: left; padding-right: 14px; }
.weight-table td { width: 58px; color: var(--sea); font-weight: 750; text-align: right; white-space: nowrap; }
.evidence-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.evidence-ladder > div { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.evidence-ladder b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 6px; color: white; background: var(--sea); font-size: 14px; }
.evidence-ladder h3 { font-size: 18px; }
.evidence-ladder p { font-size: 14px; margin-bottom: 0; }
.reveal { opacity: 1; }
.motion-ready .reveal { opacity: 0; transform: translateY(16px); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
@keyframes icon-bob { 50% { transform: translateY(-3px); } }
@keyframes icon-tilt { 50% { transform: rotate(-9deg); } }
@keyframes icon-rise { 50% { transform: translateY(-3px) scale(1.06); } }
@keyframes icon-flight { 50% { transform: translate(2px, -2px); } }
@keyframes heroDrift { 0% { transform: scale(1) translate3d(0, 0, 0); } 100% { transform: scale(1.035) translate3d(-10px, -4px, 0); } }
@keyframes bandSheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (min-width: 1600px) { .home-hero-inner { min-height: 650px; } .maritime-scene { object-position: center 62%; } }
@media (max-width: 1100px) {
  .hero-content-panel { width: min(850px, 100%); }
  .hero-content { max-width: 100%; }
  .home-hero h1 { font-size: 42px; }
  .hero-lead { font-size: 25px; }
  .hero-lead span { font-size: 20px; }
  .nav-links { gap: 3px; }
  .approach-pill-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vs-esg-pill-row--five, .vs-esg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { padding: 22px; }
  .contact-direct a { font-size: 17px; }
}
@media (max-width: 800px) {
  .nav { min-height: 72px; }
  .brand img { width: 138px; height: 54px; }
  .nav-toggle { display: inline-flex; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; max-height: calc(100vh - 72px - var(--footer-height)); overflow-y: auto; padding: 12px 20px 18px; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 12px 18px #15334112; }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 12px 10px; }
  .nav:has(.nav-links:focus-within) { z-index: 21; }
  .section { padding: 52px 0; }
  .home-hero { padding: 0; }
  .home-hero::after { background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 55%, rgba(255,255,255,.22) 100%); }
  .home-hero-inner { min-height: 650px; padding-top: 34px; padding-bottom: 265px; align-items: flex-start; }
  .hero-content-panel { width: 100%; padding: 0; }
  .hero-content-panel::before { margin-bottom: 18px; }
  .hero-content { max-width: 100%; }
  .maritime-scene { object-fit: cover; height: 350px; top: auto; bottom: 0; object-position: center 70%; }
  .home-hero h1 { font-size: 38px; }
  .hero-lead { font-size: 24px; line-height: 1.35; margin: 14px 0; }
  .hero-lead span { font-size: 20px; }
  .hero-copy { max-width: 560px; font-size: 15px; }
  .hero-actions { margin-top: 20px; }
  .hero-caption { margin-top: 14px; }
  .esg-chapter-band-inner { align-items: flex-start; flex-direction: column; gap: 6px; }
  .esg-chapter-band p { font-size: 18px; }
  .grid, .grid.two { grid-template-columns: 1fr; }
  .approach-pill-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-esg-pill-row, .vs-esg-pill-row--five, .vs-esg-pill-row--two, .vs-esg-pillars, .vs-esg-pillars--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-esg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .approach-card h4, .vs-esg-card h4 { min-height: 98px; }
  .feature-list-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { gap: 18px; }
  .pillar-card .text-link { margin-top: 12px; }
  .segment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weight-tables { grid-template-columns: 1fr; }
  .evidence-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voyage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closing-band { align-items: flex-start; flex-direction: column; gap: 20px; }
  .closing-band .hero-actions { margin: 0; }
  .contact-direct { grid-template-columns: 1fr; gap: 24px; }
  .contact-direct a { font-size: 18px; }
  .vs-cb-inner { align-items: stretch; flex-direction: column; padding: 16px; }
  .vs-cb-actions { justify-content: flex-start; width: 100%; }
  .vs-cb-btn { flex: 1 1 130px; }
  .resource-section { grid-template-columns: 1fr; gap: 24px; }
  .process, .process.seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-ratingscore-head { padding: 18px; }
  .vs-ratingscore-head h3 { font-size: 22px; }
  .rating-table th, .rating-table td { padding: 15px 10px; }
  .rating-table tbody th { width: 36%; font-size: 14px; }
  .rating-mark { margin-right: 7px; width: 5px; height: 18px; }
  h1 { font-size: 38px; } h2, .resource-section h2 { font-size: 29px; }
}
@media (max-width: 480px) {
  .container { width: calc(100% - 32px); }
  .nav { padding: 0 14px; }
  .home-hero-inner { padding-bottom: 225px; }
  .maritime-scene { height: 260px; object-position: 65% 66%; }
  .home-hero h1 { font-size: 34px; }
  .hero-lead { font-size: 23px; }
  .hero-lead span { font-size: 18px; }
  .hero-actions { gap: 8px; }
  .btn { padding: 11px 14px; font-size: 13px; }
  .esg-chapter-band { padding: 18px 0; }
  .esg-chapter-band p { font-size: 16px; }
  .segment-grid, .dimension-grid, .evidence-ladder { grid-template-columns: 1fr; }
  .approach-pill-row { grid-template-columns: 1fr; }
  .vs-esg-pill-row, .vs-esg-pill-row--five, .vs-esg-pill-row--two, .vs-esg-pillars, .vs-esg-pillars--two { grid-template-columns: 1fr; }
  .approach-card { padding: 20px; }
  .approach-card h4, .vs-esg-card h4, .vs-esg-pill-row--two .vs-esg-card h4 { min-height: 0; }
  .feature-list-compact { grid-template-columns: 1fr; }
  .segment-card, .dimension-card, .weight-table, .evidence-ladder > div { padding: 20px; }
  .rating-table th, .rating-table td { padding: 14px 7px; }
  .rating-table tbody th { font-size: 13px; }
  .rating-table td { font-size: 12px; }
  .rating-table td:nth-child(2) { font-size: 14px; }
  .rating-mark { display: none; }
  .contact-direct > div { gap: 10px; }
  .contact-direct a { font-size: 16px; }
  .contact-direct > div > .glyph { display: none; }
  .vs-cb-banner { bottom: calc(var(--footer-height) + 10px); padding: 0 10px; }
  .vs-cb-text { gap: 10px; }
  .vs-cb-icon-wrap { display: none; }
  .vs-cb-actions { gap: 7px; }
  .vs-cb-btn { min-height: 40px; padding: 9px 10px; font-size: 12px; }
  .vs-ratingscore { border-radius: 10px; }
  .vs-ratingscore-head { padding: 16px; }
  .vs-ratingscore-head h3 { font-size: 20px; }
  .vs-ratingscore-head p { font-size: 13.5px; }
  .vs-esg-scope th, .vs-esg-scope td { padding: 10px 8px; font-size: 12.5px; }
  .vs-esg-inscope { font-size: 12px; }
  .topic-nav { gap: 16px; font-size: 14px; }
  .voyage { gap: 18px; }
  .footer-inner { padding: 0 14px; }
}
@media (max-width: 620px) {
  :root { --footer-height: 124px; }
  .footer { padding: 8px 0; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-nav { order: 0; }
  .copyright { order: 1; }
}
@media (max-width: 380px) {
  .home-hero-inner { min-height: 0; padding-top: 26px; padding-bottom: 185px; }
  .home-hero h1 { font-size: 26px; }
  .hero-lead { font-size: 21px; }
  .hero-lead span { font-size: 17px; }
  .hero-copy { font-size: 14px; line-height: 1.55; }
  .hero-caption { font-size: 11px; }
  .home-hero .btn { padding: 10px 12px; font-size: 12px; }
  .maritime-scene { height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .vs-bs-row { opacity: 1; transform: none; }
  .vs-bs-bar span { width: var(--w); }
}
@media (max-width: 800px) {
  html:not(.js-ready) .nav { flex-wrap: wrap; padding-top: 8px; }
  html:not(.js-ready) .nav-links { display: flex; position: static; flex-basis: 100%; box-shadow: none; }
  html:not(.js-ready) .nav-toggle { display: none; }
}
html:not(.js-ready) body { padding-bottom: 0; }
html:not(.js-ready) .footer { position: static; margin-top: auto; }
@media print {
  body { padding-bottom: 0; }
  .site-header, .footer { position: static; }
  .motion-ready .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   SOURCE-PARITY LAYOUT (home page only)
   Mirrors the structure, sequence and format of the public corporate
   page https://www.varuna-sentinels.com/esg-ratings :
   pillar-hero -> pillar-meta -> chapter band -> pillar-body (880px
   article column, wider breakout components) -> chapter band ->
   pillar-faq -> pillar-cta-band.
   Scoped to these wrappers so the other ESG pages (.section layout)
   are untouched. Icons use the local .glyph masks, never an icon font,
   so the no-third-party smoke scans keep passing.
   ===================================================================== */

/* ---- hero badge (light hero retained: the light section theme and
   .hero-content-panel are a deliberate earlier decision, enforced by
   scripts/esg-platform-smoke.cjs - only the badge is new) ----------- */
.home-hero .pillar-pill { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; padding: 6px 15px; border: 1px solid rgba(51,85,150,.22); border-radius: 30px; background: #eef4fc; color: #335596; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.home-hero .pillar-pill .glyph { width: 15px; height: 15px; flex-basis: 15px; color: var(--sea); }

/* ---- byline strip -------------------------------------------------- */
.pillar-meta { padding: 20px 0; border-bottom: 1px solid #eef2f7; background: #fff; }
.pillar-meta .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; width: min(880px, calc(100% - 40px)); color: #6c7a8d; font-size: 13px; }
.pillar-meta > .container > div { display: inline-flex; align-items: center; gap: 8px; color: #6c7a8d; }
.pillar-meta strong { color: #1d3461; }
.pillar-meta .pillar-meta-author .glyph { width: 18px; height: 18px; flex-basis: 18px; color: #335596; }
.pillar-meta .pillar-meta-date .glyph { width: 17px; height: 17px; flex-basis: 17px; color: #74c5b5; }

/* ---- chapter bands ------------------------------------------------- */
.vs-esg-band { position: relative; display: block; height: clamp(170px, 22vw, 210px); overflow: hidden; }
.vs-esg-band--plain { background: linear-gradient(180deg, #ffffff 0%, #f6fafd 62%, #eef4fa 100%); border-top: 1px solid rgba(51,85,150,.12); border-bottom: 1px solid rgba(51,85,150,.12); }
.vs-esg-band--alt { background: #1d3461; }
.vs-esg-band--alt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.vs-esg-band--alt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,51,65,.45), rgba(21,51,65,.78)); }
.vs-esg-band-sheen { position: absolute; top: 0; bottom: 0; left: -30%; z-index: 1; width: 22%; pointer-events: none; background: linear-gradient(100deg, rgba(51,85,150,0) 0%, rgba(51,85,150,.10) 50%, rgba(51,85,150,0) 100%); animation: band-sheen 7s ease-in-out infinite; }
@keyframes band-sheen { 0% { left: -30%; } 60%, 100% { left: 115%; } }
.vs-esg-band-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: min(1180px, calc(100% - 48px)); margin: 0 auto; text-align: center; }
.vs-esg-band-kicker { margin-bottom: 11px; font-size: clamp(13px, 1.3vw, 17px); font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.vs-esg-band--plain .vs-esg-band-kicker { color: #335596; }
.vs-esg-band--plain p { max-width: 760px; margin: 0; color: #4d6280; font-size: clamp(15px, 1.5vw, 18px); }
.vs-esg-band--alt .vs-esg-band-kicker { color: #fff; text-shadow: 0 2px 12px rgba(6,16,32,.65); }
.vs-esg-band--alt p { max-width: 760px; margin: 0; color: rgba(255,255,255,.95); font-size: clamp(15px, 1.5vw, 18px); text-shadow: 0 2px 12px rgba(6,16,32,.5); }

/* ---- article column ------------------------------------------------ */
.pillar-body { padding: 76px 0 84px; background: #fff; overflow-x: clip; }
.pillar-body .container { width: min(880px, calc(100% - 40px)); }
.pillar-body h2 { margin: 44px 0 16px; color: #335596; font-size: clamp(22px, 3vw, 28px); font-weight: 700; }
.pillar-body h2:first-of-type { margin-top: 0; }
.pillar-body > .container > h2::after { content: ""; display: block; width: 66px; height: 3px; margin-top: 13px; border-radius: 999px; background: linear-gradient(90deg, var(--sea), var(--teal), var(--brand)); }
.pillar-body h2.vs-esg-h2-green { color: #1f7d6b; }
.pillar-body h3 { color: #335596; }
/* colour MUST be explicit on every nested text node: the column sets
   .pillar-body p/li/strong, which otherwise wins inside components. */
.pillar-body p { color: #444; font-size: 16px; line-height: 1.8; margin-bottom: 14px; }
.pillar-body > .container > ul:not(.vs-esg-keyfeatures), .pillar-body > .container > ol { margin: 0 0 14px; padding-left: 24px; color: #444; font-size: 15.5px; line-height: 1.8; }
.pillar-body strong { color: #1d3461; }
.pillar-body .vs-esg-pillar-head, .pillar-body .vs-esg-pillar-head strong { color: #fff; }
.pillar-body .vs-esg-pillar-body li { color: #5a6a7d; font-size: 13.5px; }
.pillar-body .vs-esg-card h4, .pillar-body .vs-esg-card h4 strong { color: #335596; }
.pillar-body .vs-esg-card-more p { color: #243c47; font-size: 14px; line-height: 1.58; }
/* Rating Process - filled colour boxes with white labels, exactly as on the
   source page. The base .vs-esg-step (L168) is a WHITE card with navy text;
   forcing the label to #fff without also filling the box made the seven step
   names invisible (white on white). Background and text must move together.
   Steps appear on index.html only, so this is scoped to .pillar-body. */
.pillar-body .vs-esg-step { justify-content: center; min-height: 104px; padding: 26px 10px 18px; border: 0; border-radius: 6px; background: linear-gradient(160deg, #14506e, #0e3f59); box-shadow: 0 6px 18px rgba(14,63,89,.22); }
.pillar-body .vs-esg-step--final { background: linear-gradient(160deg, #4fb3bf, #3d9aa6); box-shadow: 0 6px 18px rgba(79,179,191,.32); }
.pillar-body .vs-esg-step:hover { box-shadow: 0 14px 30px rgba(14,63,89,.32); }
.pillar-body .vs-esg-step-t { margin-top: 0; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.pillar-body .vs-esg-step-n { position: absolute; top: 7px; left: 9px; transform: none; width: auto; height: auto; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: rgba(255,255,255,.78); font-size: 12px; font-weight: 700; }
.pillar-body .vs-esg-step--final .vs-esg-step-n { background: none; color: rgba(255,255,255,.85); }
.pillar-body .vs-esg-disclaimer li { color: #3b4b63; }
.vs-esg-p-wide { max-width: none; }
.vs-esg-p-note { color: #5a6a7d !important; font-size: 14.5px !important; font-style: italic; }
.vs-esg-p-oneline { margin-bottom: 6px; }
.vs-esg-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; margin-bottom: 4px; }
.vs-esg-two-col p { margin: 0; }

/* Key Features - single-pointer checklist, as on the source page */
.vs-esg-kf-title { margin: 26px 0 14px; color: #335596; font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.vs-esg-keyfeatures { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.vs-esg-keyfeatures li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; border: 1px solid #e8eef5; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(51,85,150,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.vs-esg-keyfeatures li:hover { transform: translateX(4px); border-color: #74c5b5; box-shadow: 0 10px 24px rgba(51,85,150,.13); }
.vs-esg-keyfeatures.feature-list-compact li .glyph, .vs-esg-keyfeatures li .glyph { width: 19px; height: 19px; flex-basis: 19px; margin-top: 1px; color: #74c5b5; }
.vs-esg-keyfeatures li span { color: #1d3461; font-size: 15px; font-weight: 600; line-height: 1.5; }

/* wide components break out of the 880px text column, as on the source */
/* Transform-free breakout. It MUST NOT use `transform`: the reveal
   animation rule `.motion-ready .reveal.is-visible` (0,3,0) sets
   `transform: none`, which outranked an earlier translateX(-50%) here
   and left margin-left:50% uncompensated - every wide block shot ~440px
   right and broke the page width once each block animated in. */
.pillar-body .vs-esg-steps, .pillar-body .vs-esg-pillars, .pillar-body .vs-esg-pill-row, .pillar-body .vs-ratingscore { width: min(1080px, calc(100vw - 40px)); margin-left: calc(50% - min(540px, (100vw - 40px) / 2)); }
.pillar-body .vs-esg-scope { width: min(1000px, calc(100vw - 40px)); margin-left: calc(50% - min(500px, (100vw - 40px) / 2)); }

/* ---- FAQ ----------------------------------------------------------- */
.pillar-faq { padding: 76px 0 84px; background: #f8fafd; }
.pillar-faq .container { width: min(880px, calc(100% - 40px)); }
.pillar-faq h2 { margin-bottom: 22px; color: #335596; font-size: clamp(22px, 3vw, 28px); font-weight: 700; text-align: center; }
.pillar-faq h2::after { content: ""; display: block; width: 60px; height: 3px; margin: 10px auto 0; border-radius: 3px; background: #74c5b5; }
.pillar-faq details { margin-bottom: 12px; border: 1px solid #e8eef5; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(51,85,150,.05); transition: box-shadow .25s ease, border-color .25s ease; }
.pillar-faq details[open] { border-color: rgba(116,197,181,.55); box-shadow: 0 8px 24px rgba(51,85,150,.12); }
.pillar-faq summary { display: flex; justify-content: space-between; gap: 14px; padding: 18px 22px; color: #335596; font-size: 16px; font-weight: 600; list-style: none; cursor: pointer; }
.pillar-faq summary::-webkit-details-marker { display: none; }
.pillar-faq summary::after { content: "+"; flex-shrink: 0; color: #74c5b5; font-size: 22px; line-height: 1; }
.pillar-faq details[open] summary::after { content: "\2212"; }
.pillar-faq details > p { margin: 0; padding: 4px 22px 20px; color: #555; font-size: 14.5px; line-height: 1.7; }

/* ---- closing CTA band ---------------------------------------------- */
.pillar-cta-band { padding: 76px 0; background: linear-gradient(135deg, #335596, #1a3a6e); color: #fff; text-align: center; }
.pillar-cta-band h2 { margin-bottom: 12px; color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 700; }
.pillar-cta-band p { max-width: 640px; margin: 0 auto 24px; color: rgba(255,255,255,.9); font-size: 15px; }
.pillar-cta-band .cta-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; margin: 0 6px 8px; padding: 13px 32px; border: 2px solid #74c5b5; border-radius: 30px; background: #74c5b5; color: #fff; font-size: 14px; font-weight: 700; transition: background .3s ease, color .3s ease, transform .3s ease; }
.pillar-cta-band .cta-btn:hover { background: #fff; border-color: #fff; color: #335596; transform: translateY(-3px); }
.pillar-cta-band .cta-btn.outline { border-color: #fff; background: transparent; color: #fff; }
.pillar-cta-band .cta-btn.outline:hover { background: #fff; color: #335596; }
.pillar-cta-band .cta-btn .glyph { width: 17px; height: 17px; flex-basis: 17px; }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 991px) {
  .pillar-hero { padding: 72px 0 64px; }
  .pillar-body { padding: 52px 0 60px; }
  .pillar-faq { padding: 52px 0 60px; }
  .pillar-cta-band { padding: 56px 0; }
  .vs-esg-two-col { grid-template-columns: 1fr; gap: 0; }
  .pillar-body .vs-esg-steps, .pillar-body .vs-esg-pillars, .pillar-body .vs-esg-pill-row, .pillar-body .vs-ratingscore, .pillar-body .vs-esg-scope { width: auto; margin-left: 0; }
}
@media (max-width: 767px) {
  .vs-esg-band { height: clamp(150px, 30vw, 190px); }
  .pillar-meta .container { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-esg-band-sheen { animation: none; }
  .vs-esg-keyfeatures li:hover { transform: none; }
  .pillar-cta-band .cta-btn:hover { transform: none; }
}

/* ---- glyph sizing for the source-parity icons -------------------- */
.vs-esg-inscope .glyph { width: 15px; height: 15px; flex-basis: 15px; color: var(--sea); }
.vs-esg-disclaimer h4, .pillar-callout h4 { display: flex; align-items: center; justify-content: center; gap: 9px; }
.vs-esg-disclaimer h4 .glyph { width: 19px; height: 19px; flex-basis: 19px; color: var(--brand); }
.pillar-callout h4 .glyph { width: 19px; height: 19px; flex-basis: 19px; color: var(--sea); }
.vs-esg-pillar-head .glyph { width: 20px; height: 20px; flex-basis: 20px; }
.vs-esg-card h4 .approach-icon.glyph { width: 26px; height: 26px; flex-basis: 26px; color: var(--sea); }
.vs-esg-more-btn .glyph-chevron { width: 15px; height: 15px; flex-basis: 15px; transition: transform .2s ease; }
.vs-esg-more-btn[aria-expanded="true"] .glyph-chevron { transform: rotate(180deg); }

/* ---- Contact: direct phone/mobile line under the page heading ------ */
.contact-direct-lines { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 14px 0 10px; }
.contact-direct-lines a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sea); font-size: 16px; font-weight: 700; }
.contact-direct-lines a:hover, .contact-direct-lines a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.contact-direct-lines .glyph { width: 18px; height: 18px; flex-basis: 18px; }
.contact-line-sep { color: var(--line); font-weight: 400; }
@media (max-width: 480px) {
  .contact-direct-lines { gap: 0 14px; }
  .contact-line-sep { display: none; }
  .contact-direct-lines a { width: 100%; }
}

/* =====================================================================
   TEXT + TITLE ENTRANCE ANIMATIONS (source parity)
   The source page uses wow.js: fadeInDown 0.8s on the hero block,
   fadeInUp 0.6s with 0.08-0.2s stagger on grid items, and h2/p fadeInUp.
   Reproduced here on the portal's own IntersectionObserver .reveal
   mechanism - no wow.js, no jQuery, so the no-third-party scans stay
   clean. prefers-reduced-motion is honoured because esg.js only adds
   .motion-ready when the user has not asked for reduced motion.

   Children stagger with OPACITY ONLY, deliberately. Giving cards/steps
   a transform here would outrank their :hover lift and any layout
   transform - the same specificity trap that broke the breakout
   centring and hid the Rating Process labels.
   ===================================================================== */

/* hero block: fadeInDown 0.8s */
.reveal-down { opacity: 1; }
.motion-ready .reveal-down { opacity: 0; transform: translateY(-18px); }
.motion-ready .reveal-down.is-visible { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; }

/* title -> intro paragraph cascade (source: h2 fadeInUp, p delay 0.1s) */
.motion-ready .reveal-delay-1.is-visible { transition-delay: .1s; }
.motion-ready .reveal-delay-2.is-visible { transition-delay: .18s; }

/* staggered children inside a revealed grid */
.motion-ready .reveal-stagger > * { opacity: 0; }
.motion-ready .reveal-stagger.is-visible > * { opacity: 1; transition: opacity .6s ease; }
.motion-ready .reveal-stagger.is-visible > :nth-child(1) { transition-delay: .04s; }
.motion-ready .reveal-stagger.is-visible > :nth-child(2) { transition-delay: .12s; }
.motion-ready .reveal-stagger.is-visible > :nth-child(3) { transition-delay: .20s; }
.motion-ready .reveal-stagger.is-visible > :nth-child(4) { transition-delay: .28s; }
.motion-ready .reveal-stagger.is-visible > :nth-child(5) { transition-delay: .36s; }
.motion-ready .reveal-stagger.is-visible > :nth-child(6) { transition-delay: .44s; }
.motion-ready .reveal-stagger.is-visible > :nth-child(7) { transition-delay: .52s; }

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal-down,
  .motion-ready .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .motion-ready .reveal-delay-1.is-visible,
  .motion-ready .reveal-delay-2.is-visible { transition-delay: 0s; }
}

/* ---- touch targets: raise the smaller controls to 44px on touch-sized
   viewports only, so desktop density is unchanged ------------------- */
@media (max-width: 767px) {
  .approach-more-btn, .vs-esg-more-btn { min-height: 44px; }
  .text-link, .contact-direct-lines a { min-height: 44px; }
  .footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* =====================================================================
   KEY FEATURES - matched to the source page
   The source renders these as a single ROW of 6 equal cards (icon badge
   centred above centred bold text), not a left-aligned checklist.
   Measured on the source: 6 x 186px at desktop, 2 columns at phone.
   ===================================================================== */
.vs-esg-keyfeatures { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0 0 8px; }
.vs-esg-keyfeatures li { flex-direction: column; align-items: center; justify-content: flex-start; gap: 11px; padding: 20px 12px 18px; text-align: center; }
.vs-esg-keyfeatures li:hover { transform: translateY(-4px); }
.vs-esg-keyfeatures li span:last-child { font-size: 13px; font-weight: 800; line-height: 1.34; color: #335596; }
/* green check badge, as on the source */
.vs-esg-keyfeatures .kf-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #2fa36a; box-shadow: 0 4px 12px rgba(47,163,106,.28); }
.vs-esg-keyfeatures li .kf-badge .glyph { width: 18px; height: 18px; flex-basis: 18px; margin: 0; color: #fff; }

/* the row breaks out of the 880px column so six cards have room, exactly
   like the other grids on this page */
.pillar-body .vs-esg-keyfeatures { width: min(1080px, calc(100vw - 40px)); margin-left: calc(50% - min(540px, (100vw - 40px) / 2)); }

@media (max-width: 1100px) {
  .vs-esg-keyfeatures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .pillar-body .vs-esg-keyfeatures { width: auto; margin-left: 0; }
}
@media (max-width: 767px) {
  .vs-esg-keyfeatures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vs-esg-keyfeatures li { padding: 16px 10px 14px; }
  .vs-esg-keyfeatures li span:last-child { font-size: 12.5px; }
}

/* =====================================================================
   VS RATING SCORE - make every column reachable on small screens
   The table is 760px wide. Inside a ~350px viewport that pushed
   "Performance Level" and "What It Means" entirely off-screen behind a
   horizontal scrollbar, so the two most explanatory columns were
   effectively unreadable. Below 900px each row becomes a labelled card
   (labels come from the data-label on every cell), so all four values
   are reachable by normal vertical scrolling. Desktop is untouched and
   still matches the source.
   ===================================================================== */
@media (max-width: 900px) {
  .vs-bs-scroll { overflow-x: visible; }
  .vs-bs-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; }
  .vs-bs-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vs-bs-table tbody, .vs-bs-table tr, .vs-bs-table td { display: block; width: auto; }
  .vs-bs-table tr { margin: 0 0 14px; padding: 16px 16px 6px; border: 1px solid #dfe9ee; border-left: 4px solid var(--brand); border-radius: 12px; box-shadow: 0 6px 18px rgba(29,52,97,.07); }
  .vs-bs-table tr:last-child { margin-bottom: 0; }
  .vs-bs-table td { padding: 0 0 12px; border: 0; text-align: left; }
  .vs-bs-table td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #6c7a8d; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .vs-bs-table td:first-child::before { display: none; }
  .vs-bs-table .vs-bs-band { display: block; font-size: 15px; }
  .vs-bs-table .vs-bs-dots { display: inline-flex; gap: 4px; margin-top: 6px; }
  .vs-bs-table .vs-bs-range { display: inline-block; }
  .vs-bs-table .vs-bs-bar { max-width: 220px; }
}

/* The rating panel header sits on a dark navy gradient and declares its own
   white text, but `.pillar-body h3` / `.pillar-body p` (equal specificity,
   later in the file) were winning and rendering it #335596 / #444 on navy -
   effectively unreadable. Same trap as the Rating Process labels: a wrapper
   colour rule must never reach a component that owns its own background. */
.pillar-body .vs-ratingscore-head h3,
.pillar-body .vs-ratingscore-head p,
.pillar-body .vs-ratingscore-head { color: #fff; }