/* Navigate the Future - site stylesheet */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{

--ntf-white:#FFFFFF;
--ntf-navy:#061528;
--ntf-blue:#309AD6;

--ntf-cloud:#EDEFF7;
--ntf-smoke:#D3D6E0;
--ntf-steel:#BCBFCC;
--ntf-space:#9DA2B3;
--ntf-graphite:#6E7180;
--ntf-arsenic:#40424D;
--ntf-phantom:#1E1E24;
--ntf-black:#000000;

--ntf-blue-tint:oklch(from var(--ntf-blue) 96% 0.02 h);
--ntf-blue-soft:oklch(from var(--ntf-blue) 88% 0.06 h);
--ntf-blue-hover:oklch(from var(--ntf-blue) 58% c h);
--ntf-blue-press:oklch(from var(--ntf-blue) 50% c h);

--ntf-navy-lift:oklch(from var(--ntf-navy) 22% c h);
--ntf-navy-press:oklch(from var(--ntf-navy) 12% c h);

--surface-page:var(--ntf-white);
--surface-page-inverse:var(--ntf-navy);
--surface-card:var(--ntf-white);
--surface-card-inverse:var(--ntf-navy);
--surface-subtle:var(--ntf-cloud);
--surface-muted:var(--ntf-arsenic);
--surface-accent:var(--ntf-blue);
--surface-accent-tint:var(--ntf-blue-tint);

--text-heading:var(--ntf-navy);
--text-body:var(--ntf-arsenic);
--text-muted:var(--ntf-graphite);
--text-accent:var(--ntf-blue);
--text-on-dark:var(--ntf-white);
--text-on-dark-body:var(--ntf-cloud);
--text-on-dark-muted:var(--ntf-steel);
--text-on-dark-caption:var(--ntf-space);
--text-on-accent:var(--ntf-white);
--text-link:var(--ntf-blue);
--text-link-hover:var(--ntf-blue-hover);

--line-hairline:var(--ntf-smoke);
--line-hairline-inverse:var(--ntf-arsenic);
--line-strong:var(--ntf-steel);
--line-accent:var(--ntf-blue);
--line-focus:var(--ntf-blue);

--action-primary:var(--ntf-blue);
--action-primary-hover:var(--ntf-blue-hover);
--action-primary-press:var(--ntf-blue-press);
--action-secondary:var(--ntf-navy);
--action-secondary-hover:var(--ntf-navy-lift);
--action-secondary-press:var(--ntf-navy-press);
--action-disabled-bg:var(--ntf-smoke);
--action-disabled-fg:var(--ntf-space);

--status-info:var(--ntf-blue);
--status-success:oklch(58% 0.11 162);
--status-warning:oklch(70% 0.13 68);
--status-danger:oklch(55% 0.16 25);
}

:root{
--font-core:"Manrope","Helvetica Neue",Arial,sans-serif; 
--font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; 

--fw-light:300; 
--fw-regular:400; 
--fw-medium:500; 
--fw-semibold:600; 
--fw-bold:700; 
--fw-extrabold:800; 

--fs-h1:64px; 
--fs-h2:48px; 
--fs-sub1:32px; 
--fs-sub2:24px; 
--fs-p1:18px; 
--fs-p2:16px; 

--fs-caption:14px; 
--fs-micro:12px; 

--lh-tight:0.98;    
--lh-snug:1.02; 
--lh-heading:1.1; 
--lh-body:1.5; 
--lh-relaxed:1.6; 
--lh-deck-body:1.08;  

--ls-display:-0.02em; 
--ls-heading:-0.01em; 
--ls-body:0; 
--ls-eyebrow:0.14em;  

--type-eyebrow:var(--fw-bold) var(--fs-micro)/1 var(--font-core); 
--type-h1:var(--fw-extrabold) var(--fs-h1)/var(--lh-tight) var(--font-core); 
--type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-core); 
--type-sub1:var(--fw-bold) var(--fs-sub1)/var(--lh-heading) var(--font-core); 
--type-sub2:var(--fw-bold) var(--fs-sub2)/var(--lh-heading) var(--font-core); 
--type-p1:var(--fw-regular) var(--fs-p1)/var(--lh-body) var(--font-core); 
--type-p2:var(--fw-regular) var(--fs-p2)/var(--lh-body) var(--font-core); 
--type-caption:var(--fw-regular) var(--fs-caption)/var(--lh-body) var(--font-core); 
}

:root{

--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:28px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-14:56px;
--space-16:64px;
--space-18:72px;   
--space-20:80px;
--space-24:96px;
--space-32:128px;

--gutter-card:24px;      
--gutter-card-lg:32px;
--gap-grid:32px;         
--slide-margin:72px;     
--page-max:1200px; 
--measure-body:64ch; 
}

:root{

--radius-none:0;
--radius-xs:4px;
--radius-sm:8px;
--radius-md:12px;   
--radius-lg:18px;   
--radius-xl:24px;
--radius-pill:999px;
--radius-control:8px; 
}

:root{
--border-hairline:1px solid var(--line-hairline); 
--border-hairline-inverse:1px solid var(--line-hairline-inverse); 
--border-strong:1px solid var(--line-strong); 
--border-accent:1px solid var(--line-accent); 
--border-width-rule:1px;      
--border-width-rule-strong:2px; 
--accent-bar-w:100px;         
--accent-bar-h:5px; 
--accent-tick-w:56px;         
--accent-tick-h:4px; 
}

:root{

--shadow-none:none;
--shadow-overlay:0 8px 24px -8px oklch(from var(--ntf-navy) l c h / 0.18);
--shadow-modal:0 24px 64px -16px oklch(from var(--ntf-navy) l c h / 0.32);
--scrim-modal:oklch(from var(--ntf-navy) l c h / 0.6); 
--focus-ring:0 0 0 3px oklch(from var(--ntf-blue) l c h / 0.35); 
}

:root{

--dur-instant:80ms; 
--dur-fast:120ms; 
--dur-base:180ms; 
--dur-slow:260ms; 
--dur-page:400ms; 
--ease-standard:cubic-bezier(0.2,0,0,1); 
--ease-out:cubic-bezier(0.16,1,0.3,1); 
--ease-in-out:cubic-bezier(0.4,0,0.2,1); 
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard); 
--lift-hover:translateY(-1px); 
--press-scale:0.99; 
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-p2);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--text-heading);margin:0;letter-spacing:var(--ls-heading);text-wrap:pretty}
h1{font:var(--type-h1);letter-spacing:var(--ls-display)}
h2{font:var(--type-h2);letter-spacing:var(--ls-display)}
h3{font:var(--type-sub1)}
h4{font:var(--type-sub2)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid oklch(from var(--ntf-blue) l c h / 0.35);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--line-focus);outline-offset:2px}
::selection{background:var(--ntf-blue);color:var(--ntf-white)}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ntf-white); color: var(--text-body); font-family: var(--font-core); }
img { max-width: 100%; }
a { color: var(--text-accent); text-decoration: none; border-bottom: none; }
a:hover { color: var(--action-primary-press); }
button { white-space: nowrap; font-family: inherit; }
:focus-visible { outline: 2px solid var(--ntf-blue); outline-offset: 2px; }
.rail { max-width: 1240px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 56px); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px;
  font: var(--fw-bold) var(--fs-p2)/1 var(--font-core); letter-spacing: 0.01em;
  border-radius: var(--radius-control); cursor: pointer; text-decoration: none;
  transition: var(--transition-control); border: 1px solid transparent; }
.btn-sm { height: 36px; padding: 0 14px; font: var(--fw-bold) var(--fs-caption)/1 var(--font-core); }
.btn-lg { height: 52px; padding: 0 28px; font: var(--fw-bold) var(--fs-p1)/1 var(--font-core); }
.btn-primary { background: var(--action-primary); color: var(--text-on-accent); border-color: var(--action-primary); }
.btn-primary:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); color: var(--text-on-accent); }
.btn:active { transform: scale(var(--press-scale)); }

.site-header { position: sticky; top: 0; z-index: 30; background: var(--ntf-white);
  border-bottom: 1px solid var(--line-hairline); }
.header-rail { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; flex: 0 0 auto; padding: 12px 0; border: 0; }
.logo img { height: 30px; width: auto; display: block; }
.nav-wide { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 26px); flex-wrap: wrap;
  justify-content: flex-end; padding: 8px 0; }
.nav-link { position: relative; padding: 6px 0; font: var(--fw-medium) var(--fs-p2)/1 var(--font-core);
  color: var(--text-heading); }
.nav-link:hover { color: var(--text-accent); }
.nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--ntf-blue); }
.lang { display: flex; align-items: center; gap: 7px; font: var(--fw-bold) var(--fs-caption)/1 var(--font-core); }
.lang-on { color: var(--text-heading); }
.lang-sep { color: var(--line-strong); }
.lang a { color: var(--ntf-steel); }
.lang a:hover { color: var(--text-accent); }

.menu { display: none; }
.menu > summary { list-style: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px; cursor: pointer; border-radius: var(--radius-sm); }
.menu > summary::-webkit-details-marker { display: none; }
.burger { display: flex; flex-direction: column; gap: 5px; }
.burger i { display: block; width: 20px; height: 2px; background: var(--ntf-navy);
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
.menu[open] .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu[open] .burger i:nth-child(2) { opacity: 0; }
.menu[open] .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--ntf-white);
  border-top: 1px solid var(--line-hairline); border-bottom: 1px solid var(--line-hairline);
  max-height: calc(100vh - 72px); overflow-y: auto; }
.menu-inner { display: flex; flex-direction: column; padding-block: 4px 22px; }
.menu-link { position: relative; padding: 15px 0 15px 15px; border-bottom: 1px solid var(--line-hairline);
  font: var(--fw-medium) var(--fs-p1)/1.2 var(--font-core); color: var(--text-heading); }
.menu-link:hover { color: var(--text-accent); }
.menu-link.is-active::after { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px;
  width: 3px; background: var(--ntf-blue); }
.menu-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 16px; padding: 20px 0 0 15px; }
@media (max-width: 899px) {
  .site-header { position: sticky; }
  .nav-wide { display: none; }
  .menu { display: block; }
}

.site-footer { background: var(--ntf-phantom); }
.foot-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: clamp(26px, 3vw, 44px); padding-block: clamp(48px, 6vw, 76px) 34px; }
.foot-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; }
.foot-brand img { height: 30px; width: auto; }
.foot-brand p { margin: 0; max-width: 46ch; font: var(--type-caption); color: var(--text-on-dark-body); }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-h { font: var(--fw-bold) var(--fs-micro)/1 var(--font-core); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ntf-space); }
.foot-col a { font: var(--type-caption); color: var(--text-on-dark-body); }
.foot-col a:hover { color: var(--ntf-blue); }
.foot-addr { font: var(--type-caption); color: var(--text-on-dark-muted); }
.foot-base { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  padding-block: 22px; border-top: 1px solid var(--line-hairline-inverse);
  font: var(--type-caption); color: var(--text-on-dark-muted); }
.foot-base a { color: var(--text-on-dark-body); }
.foot-base a:hover { color: var(--ntf-blue); }

input:focus, textarea:focus { outline: none; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ntf-blue); outline-offset: 1px; }

[data-h="0"]:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
[data-h="1"]:hover { background: var(--surface-subtle); border-color: var(--ntf-navy); }
[data-h="2"]:hover { background: var(--ntf-cloud); border-color: var(--ntf-cloud); }
[data-h="3"]:hover { color: var(--ntf-blue); }