/* The home page's navigation bar, shared by every page that is not built from
   index.html itself (the feature pages). Copied from features/features.css,
   which the industry pages use, so all three kinds of page show one bar.

   Its colour tokens are set on the bar itself rather than on :root, because the
   page stylesheet beside it (assets/site.css) defines the same names with
   different values. The buttons are scoped and fully restated for the same
   reason: site.css has its own .btn. */
nav,.nav-sheet{
  --navy:#00175E;--blue:#00248F;--gold:#FEBE20;--ink:#0B1226;--ink-2:#48506A;--ink-3:#8A90A6;
  --mist:#F4F6FB;--line:#E4E7F0;--w:1120px;--ease:cubic-bezier(.2,.7,.2,1);
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Inter","Inter Fallback",system-ui,sans-serif;
  font-family:var(--sans);line-height:1.55;
}
nav a,.nav-sheet a{text-decoration:none}
/* the bar is fixed, so the page starts below it */
body{padding-top:62px}
nav .btn,.nav-sheet .btn{height:auto;border:0;text-decoration:none}
nav .btn,.nav-sheet .btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border-radius:100px;font-weight:700;font-size:15px;cursor:pointer;border:0;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;font-family:var(--sans)}
nav .btn:hover,.nav-sheet .btn:hover{transform:translateY(-1px)}
nav .btn:active,.nav-sheet .btn:active{transform:translateY(0)}
nav .btn-gold,.nav-sheet .btn-gold{background:#0B1226;color:#fff;padding:14px 28px;box-shadow:0 6px 18px -8px rgba(11,18,38,.55)}
nav .btn-gold:hover,.nav-sheet .btn-gold:hover{background:#1A2340;box-shadow:0 10px 24px -10px rgba(11,18,38,.6)}
nav .btn-line,.nav-sheet .btn-line{background:transparent;color:#fff;padding:14px 24px;border:1.5px solid rgba(255,255,255,.35)}
nav .btn-line:hover,.nav-sheet .btn-line:hover{border-color:#fff}
nav .btn-sm,.nav-sheet .btn-sm{padding:9px 20px;font-size:13.5px}
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #E5E5E5;color:#000}
.nav-in{max-width:var(--w);margin:0 auto;padding:0 28px;height:62px;display:flex;align-items:center;gap:34px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:#000}
.logo img{width:auto;height:31px;border-radius:0;display:block}
.nav-links{display:flex;gap:30px;font-size:16px;color:#4A4A4A;font-weight:500;align-items:center}
.nav-links>a:hover,.nav-drop>a:hover{color:#000}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:15.5px;font-weight:600;color:#000}
@media(max-width:860px){.nav-links{display:none}}

.nav-drop{position:relative}
.nav-drop>a{display:inline-flex;align-items:center;gap:7px}
.caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);display:inline-block;position:relative;top:-2px}
.nav-menu{position:absolute;top:calc(100% + 12px);left:-16px;width:560px;background:#fff;border:1px solid #E5E5E5;border-radius:14px;padding:12px;display:none;grid-template-columns:1fr 1fr;gap:2px;box-shadow:0 30px 60px -22px rgba(0,0,0,.35)}
.nav-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{display:grid}
.nav-menu a{display:flex;align-items:baseline;gap:12px;padding:9px 12px;border-radius:9px;font-size:15.5px;color:#4A4A4A;font-weight:500}
.nav-menu a:hover{background:#F5F5F5;color:#000}
.nav-menu a i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:#8A8A8A;letter-spacing:.08em}
/* Industries carries 17 sectors, so its menu takes a third column. Two columns
   would be a 9-row list; three columns below 1180px would run off the right
   edge of the bar, so the width drops back there rather than the row count. */
.nav-menu-3{width:940px;grid-template-columns:1fr 1fr 1fr}
/* A mark, not a number: the slot is a fixed box so the labels still align in a
   column, and it takes its color from the row so it dims and darkens with it. */
.nav-menu-3 a{align-items:center}
.nav-menu-3 a i{flex:0 0 22px;width:22px;height:22px;color:#A6A6A6}
.nav-menu-3 a i svg{width:100%;height:100%;display:block}
.nav-menu-3 a:hover i{color:#00175E}
.nav-menu .nav-menu-all{grid-column:1/-1;margin-top:6px;padding-top:11px;border-top:1px solid #EFEFEF;color:#000;font-weight:600}
@media(max-width:1320px){.nav-menu-3{width:600px;grid-template-columns:1fr 1fr}}
.nav-menu a.on{color:#000}
.nav-menu a.on i{color:var(--gold)}

/* The bar carries brand color: the CTA keeps .btn-gold's own gold rather than
   being repainted black here, so the one action a visitor is asked to take looks
   the same in the header as it does in the page body. .btn-line stays monochrome. */
nav .btn-gold,.nav-sheet .btn-gold{box-shadow:0 6px 18px -8px rgba(11,18,38,.55)}
nav .btn-gold:hover,.nav-sheet .btn-gold:hover{box-shadow:0 10px 24px -10px rgba(11,18,38,.6)}
nav .btn-line,.nav-sheet .btn-line{color:#000;border-color:#D6D6D6}
nav .btn-line:hover,.nav-sheet .btn-line:hover{border-color:#000}

.lang-switch{display:flex;gap:2px;background:var(--mist);border:1px solid var(--line);border-radius:100px;padding:3px}
.lang-switch :is(button,a){background:transparent;border:0;color:var(--ink-2);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 10px;border-radius:100px;cursor:pointer;transition:background .15s ease,color .15s ease}
.lang-switch :is(button,a).on{background:var(--blue);color:#fff}
.lang-switch :is(button,a):not(.on):hover{color:var(--blue);background:rgba(0,36,143,.08)}

/* ---------- mobile nav ---------- */
.nav-burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid #E5E5E5;background:transparent;border-radius:10px;cursor:pointer;position:relative}
.nav-burger i{position:absolute;left:10px;width:18px;height:1.7px;background:#000;border-radius:2px;transition:transform .26s var(--ease),opacity .2s ease}
.nav-burger i:nth-child(1){top:14px}.nav-burger i:nth-child(2){top:19px}.nav-burger i:nth-child(3){top:24px}
body.menu-open .nav-burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .nav-burger i:nth-child(2){opacity:0}
body.menu-open .nav-burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-sheet{display:none;position:fixed;inset:62px 0 0;background:rgba(255,255,255,.985);backdrop-filter:blur(16px);z-index:49;overflow-y:auto;padding:26px 28px 60px}
body.menu-open .nav-sheet{display:block}
body.menu-open{overflow:hidden}
.nav-sheet a{display:block;color:#000;font-size:19px;font-weight:600;padding:13px 0;border-bottom:1px solid #E5E5E5}
.nav-sheet h6{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#767676;margin:26px 0 4px;font-weight:700}
.nav-sheet .sheet-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.nav-sheet .sheet-cta a{border-bottom:0;text-align:center;padding:15px}
@media(max-width:860px){.nav-burger{display:block}.nav-right .lang-switch{order:-1}.nav-right>a:not(.btn){display:none}.nav-right{gap:12px;margin-left:auto}}
/* on a phone the bar carries brand · language · menu; both CTAs live in the sheet */
@media(max-width:600px){.nav-right>a.btn{display:none}.nav-in{gap:16px}}
@media(min-width:861px){.nav-sheet{display:none!important}}
nav.stuck{background:rgba(255,255,255,.98);box-shadow:0 10px 30px -20px rgba(0,0,0,.35)}