/* NATA Dynamics — production theme CSS, ported from the design preview
   (design-preview/nata-preview.html). Fonts are loaded from Google Fonts here instead of
   inlined as base64 — this is a normal server-hosted site, not a sandboxed artifact. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Blue-and-white is the fixed brand default regardless of OS/browser preference — a bright,
   confident navy-on-white identity, bookended by a fixed dark-navy header/footer. The manual
   toggle button still allows switching to the full dark variant on demand. */
:root{
  --navy:#062559; --navy-2:#123A7C;
  --ink:#F7F9FC; --ink-2:#EAF1FB; --panel:#FFFFFF; --panel-2:#FBFCFE;
  --border:rgba(6,37,89,0.12); --border-strong:rgba(6,37,89,0.24);
  --blue:#1F55B8; --blue-dim:rgba(31,85,184,0.10);
  --brass:#966425; --brass-dim:rgba(150,100,37,0.12);
  --paper:#0E1F3D; --slate:#51607A; --slate-dim:#7A8AA3;
  --success:#1E9E5A; --error:#C23A3A;
  --r-sm:4px; --r-md:8px; --r-lg:14px;
  --shadow:0 20px 60px -20px rgba(6,37,89,0.18);
  --maxw:1200px;
  color-scheme: light;
}
:root[data-theme="light"]{
  --navy:#062559; --navy-2:#123A7C;
  --ink:#F7F9FC; --ink-2:#EAF1FB; --panel:#FFFFFF; --panel-2:#FBFCFE;
  --border:rgba(6,37,89,0.12); --border-strong:rgba(6,37,89,0.24);
  --blue:#1F55B8; --blue-dim:rgba(31,85,184,0.10);
  --brass:#966425; --brass-dim:rgba(150,100,37,0.12);
  --paper:#0E1F3D; --slate:#51607A; --slate-dim:#7A8AA3;
  --success:#1E9E5A; --error:#C23A3A;
  color-scheme: light;
}
:root[data-theme="dark"]{
  --navy:#062559; --navy-2:#123A7C;
  --ink:#0A1424; --ink-2:#0E1B30; --panel:#12213B; --panel-2:#16294A;
  --border:rgba(150,175,210,0.16); --border-strong:rgba(150,175,210,0.30);
  --blue:#4C8CF5; --blue-dim:rgba(76,140,245,0.16);
  --brass:#D9A857; --brass-dim:rgba(217,168,87,0.16);
  --paper:#E9EDF5; --slate:#8D98AC; --slate-dim:#5F6B80;
  --success:#4ADE80; --error:#F27272;
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;} }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; font-weight:700; line-height:1.12; margin:0; text-wrap:balance;}
p{margin:0;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:10px; font-weight:500;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--blue);display:inline-block;transform:rotate(45deg);}

:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:2px;}

/* ---------- Nav ---------- */
/* Header stays fixed dark navy regardless of the light/dark theme toggle — a constant
   "masthead" so the reversed-white logo always has the dark ground it needs, and the
   brand's own navy is always present somewhere on screen even in light mode. */
header.site{
  --paper:#E9EDF5; --slate:#8D98AC; --slate-dim:#5F6B80; --border-strong:rgba(150,175,210,0.30); --blue:#4C8CF5; --ink:#0A1424;
  position:sticky; top:0; z-index:100; background:rgba(6,17,34,0.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(150,175,210,0.16); transition:background .3s ease;
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none;}
.brand-logo{height:30px; width:auto; display:block;}
.brand-text{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:9.5px; letter-spacing:.14em; color:var(--slate); text-transform:uppercase;}
@media (max-width:560px){ .brand-logo{height:24px;} }
nav.primary{display:flex; align-items:center; gap:36px;}
nav.primary a{font-size:14.5px; font-weight:500; text-decoration:none; color:var(--slate); position:relative; padding:6px 0;}
nav.primary a:hover{color:var(--paper);}
nav.primary a.active{color:var(--paper);}
nav.primary a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--blue);border-radius:2px;}
.nav-actions{display:flex;align-items:center;gap:18px;}
.theme-toggle{background:none;border:1px solid var(--border-strong);color:var(--slate);width:34px;height:34px;border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.theme-toggle:hover{color:var(--paper);border-color:var(--blue);}
.hamburger{display:none; background:none;border:1px solid var(--border-strong);width:40px;height:40px;border-radius:var(--r-md);cursor:pointer;align-items:center;justify-content:center;}
.hamburger span, .hamburger span::before, .hamburger span::after{content:"";display:block;width:16px;height:1.5px;background:var(--paper);position:relative;transition:.25s;}
.hamburger span::before{position:absolute;top:-5px;}
.hamburger span::after{position:absolute;top:5px;}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14.5px;
  padding:13px 24px; border-radius:var(--r-md); text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue); color:var(--ink);}
.btn-primary:hover{box-shadow:0 8px 24px -6px var(--blue-dim), 0 0 0 1px var(--blue) inset; filter:brightness(1.06);}
.btn-ghost{background:transparent; border-color:var(--border-strong); color:var(--paper);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue);}
.btn-sm{padding:9px 16px; font-size:13.5px;}
.btn-block{width:100%;}

/* ---------- Hero ---------- */
.hero{position:relative; padding:96px 0 80px; overflow:hidden; border-bottom:1px solid var(--border);}
.hero-grid{position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 70% 30%, black 10%, transparent 75%);
}
.hero-glow{position:absolute; top:-180px; right:-120px; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, var(--blue-dim), transparent 70%); filter:blur(10px); pointer-events:none;}
.hero-inner{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
@media (max-width:980px){ .hero-inner{grid-template-columns:1fr;} }
.hero-copy h1{font-size:clamp(34px,4.6vw,58px); margin:18px 0 22px; letter-spacing:-.01em;}
.hero-copy p.lead{font-size:17.5px; color:var(--slate); max-width:56ch; margin-bottom:34px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-meta{display:flex; gap:28px; margin-top:44px; flex-wrap:wrap;}
.hero-meta .item{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--slate-dim); letter-spacing:.06em;}
.hero-meta .item b{display:block; color:var(--paper); font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; letter-spacing:0; margin-bottom:2px;}

.netviz{position:relative; aspect-ratio:1/1; max-width:440px; margin:0 auto; width:100%;}
.netviz canvas{position:absolute; inset:0; width:100%; height:100%;}
.netviz-frame{position:absolute; inset:0; border:1px solid var(--border); border-radius:var(--r-lg); }
.netviz-corner{position:absolute; width:16px; height:16px; }
.netviz-corner.tl{top:-1px;left:-1px;border-top:2px solid var(--blue);border-left:2px solid var(--blue);}
.netviz-corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--brass);border-right:2px solid var(--brass);}
.netviz-label{position:absolute; bottom:14px; left:14px; right:14px; display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--slate); letter-spacing:.06em;}

/* ---------- section basics ---------- */
section{padding:88px 0;}
@media (max-width:640px){ section{padding:60px 0;} }
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(26px,3vw,38px); margin-top:14px;}
.section-head p{color:var(--slate); margin-top:14px; font-size:15.5px; max-width:58ch;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.border-top{border-top:1px solid var(--border);}
.tint{background:var(--ink-2);}

/* trust strip */
.trust{padding:40px 0; border-bottom:1px solid var(--border);}
.trust .label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:18px;}
.badge-row{display:flex; flex-wrap:wrap; gap:10px;}
.badge{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--slate); border:1px solid var(--border-strong); border-radius:999px; padding:7px 14px; letter-spacing:.02em;}

/* pillars / service cards */
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){ .pillars{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pillars{grid-template-columns:1fr;} }
.pillar{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px 24px;
  display:flex; flex-direction:column; gap:16px; transition:border-color .2s ease, transform .2s ease, background .2s ease;
  opacity:0; transform:translateY(16px); text-decoration:none;
}
.pillar.in{opacity:1; transform:translateY(0);}
.pillar:hover{border-color:var(--blue); transform:translateY(-3px); background:var(--panel-2);}
.pillar .num{font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:12.5px; letter-spacing:.1em;}
.pillar .icon{width:38px;height:38px; color:var(--blue);}
.pillar h3{font-size:18px; margin-top:2px; color:var(--paper);}
.pillar p{color:var(--slate); font-size:14px; line-height:1.55;}
.pillar .offerings{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--slate-dim); line-height:1.8; border-top:1px solid var(--border); padding-top:14px; margin-top:auto;}
.pillar .cta-link{font-size:13.5px; font-weight:600; color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-top:4px;}
.pillar .cta-link:hover{gap:9px;}

/* differentiators */
.diffgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;}
@media (max-width:900px){ .diffgrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .diffgrid{grid-template-columns:1fr;} }
.diff-item{background:var(--panel); padding:28px 26px;}
.diff-item .tag{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; color:var(--brass); text-transform:uppercase;}
.diff-item h4{font-size:16px; margin:10px 0 8px; color:var(--paper);}
.diff-item p{color:var(--slate); font-size:13.8px;}

/* methodology */
.method-track{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative;}
@media (max-width:900px){ .method-track{grid-template-columns:1fr; gap:0;} }
.method-step{
  border-left:1px solid var(--border); padding:0 22px 0 24px; position:relative; cursor:pointer;
}
.method-track > .method-step:first-child{border-left:none; padding-left:0;}
@media (max-width:900px){
  .method-step{border-left:none !important; border-top:1px solid var(--border); padding:26px 0 26px 0 !important;}
  .method-track > .method-step:first-child{border-top:none;}
}
.method-step .n{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--slate-dim); transition:color .2s;}
.method-step.active .n{color:var(--blue);}
.method-step h4{font-size:16.5px; margin:14px 0 10px; color:var(--paper);}
.method-step p{font-size:13.5px; color:var(--slate); min-height:64px;}
.method-step .bar{height:2px; background:var(--border); margin-top:16px; border-radius:2px; overflow:hidden;}
.method-step .bar > span{display:block; height:100%; width:0; background:var(--blue);}
.method-step.active .bar > span{width:100%; transition:width 4s linear;}

/* industries */
.chiprow{display:flex; flex-wrap:wrap; gap:12px;}
.chip{
  border:1px solid var(--border-strong); border-radius:var(--r-md); padding:14px 18px; font-size:14px; font-weight:500;
  display:flex; align-items:center; gap:10px; background:var(--panel);
}
.chip .sq{width:7px;height:7px;background:var(--blue);flex-shrink:0;}

/* regions + engagement */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:48px;} }
.region-cards{display:grid; gap:14px;}
.region-card{border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; background:var(--panel); display:flex; gap:18px; align-items:flex-start;}
.region-card .glyph{font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:13px; color:var(--ink); background:var(--blue); border-radius:6px; width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.region-card h4{font-size:16px;margin-bottom:6px; color:var(--paper);}
.region-card p{font-size:13.8px;color:var(--slate);}
.engage-list{display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;}
.engage-item{background:var(--panel); padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.engage-item h4{font-size:15px; color:var(--paper);}
.engage-item p{font-size:13px;color:var(--slate); margin-top:4px;}
.engage-item .arrow{color:var(--slate-dim); flex-shrink:0;}

/* generic content section (Industries chips, About, legal pages, etc.) */
.subhead{font-size:16px;margin-bottom:18px;color:var(--slate);font-family:'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;}
.prose{max-width:74ch;}
.prose p{color:var(--slate); font-size:15.5px; margin-bottom:18px;}
.prose h2{margin-top:40px; margin-bottom:14px;}
.prose ul{color:var(--slate); font-size:15.5px; padding-left:20px; margin-bottom:18px;}

/* process */
.process{display:flex; gap:0; counter-reset:step;}
@media (max-width:800px){ .process{flex-direction:column;} }
.process-step{flex:1; position:relative; padding:0 20px;}
.process-step:first-child{padding-left:0;}
.process-step:last-child{padding-right:0;}
.process-line{position:absolute; top:23px; left:calc(-50% + 24px); right:calc(50% + 24px); height:1px; background:var(--border);}
@media (max-width:800px){ .process-line{display:none;} }
.process-step .circle{width:46px;height:46px;border-radius:50%;border:1px solid var(--border-strong); display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--blue); background:var(--panel); position:relative; z-index:1;}
.process-step h4{font-size:16px; margin:18px 0 8px; color:var(--paper);}
.process-step p{font-size:13.8px; color:var(--slate);}

/* final CTA */
.cta-band{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:
  radial-gradient(ellipse 60% 100% at 50% 0%, var(--blue-dim), transparent 60%), var(--ink-2);
  text-align:center; padding:80px 0;}
.cta-band h2{font-size:clamp(26px,3.4vw,42px); max-width:20ch; margin:16px auto 24px;}
.cta-band p{color:var(--slate); max-width:52ch; margin:0 auto 32px;}
.cta-band .hero-ctas{justify-content:center;}

/* contact form */
.contact-layout{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px;}
@media (max-width:900px){ .contact-layout{grid-template-columns:1fr;} }
.contact-info h3{font-size:20px; margin-bottom:14px;}
.contact-info p{color:var(--slate); font-size:14.5px; margin-bottom:28px;}
.info-row{display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--border);}
.info-row:last-child{border-bottom:1px solid var(--border);}
.info-row .k{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-dim); width:110px; flex-shrink:0; padding-top:2px;}
.info-row .v{font-size:14.5px;}
.form-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13px; font-weight:600; color:var(--paper);}
.field label .phone-flag{display:none; vertical-align:middle; border-radius:2px; box-shadow:0 0 0 1px var(--border-strong);}
.field input, .field select, .field textarea{
  background:var(--ink); border:1px solid var(--border-strong); border-radius:var(--r-md); color:var(--paper);
  padding:11px 13px; font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-dim);}
.field textarea{resize:vertical; min-height:96px;}
.field small.form-error{font-size:12px; color:var(--error); display:none; margin-top:4px;}
.field.invalid small.form-error{display:block;}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:12.8px; color:var(--slate); margin:6px 0 22px;}
.consent input{margin-top:3px;}
.form-alert{border-radius:var(--r-md); padding:16px 18px; font-size:14px; margin-bottom:20px;}
.form-alert.success{background:rgba(30,158,90,0.1); border:1px solid var(--success); color:var(--success);}
.form-alert.error{background:rgba(194,58,58,0.1); border:1px solid var(--error); color:var(--error);}

/* footer */
footer{
  --paper:#E9EDF5; --slate:#8D98AC; --slate-dim:#5F6B80; --border:rgba(150,175,210,0.16); --blue:#4C8CF5; --ink:#0A1424;
  border-top:1px solid var(--border); padding:64px 0 28px; background:#0A1424;
}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }
.foot-brand p{color:var(--slate); font-size:13.8px; margin:16px 0 20px; max-width:36ch;}
.foot-col h5{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-dim); margin-bottom:16px;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.foot-col a{color:var(--slate); text-decoration:none; font-size:13.8px;}
.foot-col a:hover{color:var(--blue);}
.foot-bottom{border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.foot-bottom p{font-size:12.5px; color:var(--slate-dim);}
.foot-bottom .legal{display:flex; gap:20px;}
.foot-bottom .legal a{font-size:12.5px; color:var(--slate-dim); text-decoration:none;}
.foot-bottom .legal a:hover{color:var(--blue);}

/* mobile nav drawer */
@media (max-width:900px){
  /* height is explicit (not bottom:0) because header.site's backdrop-filter makes it the
     containing block for this fixed descendant, so bottom:0 would resolve against header's own
     ~76px box instead of the viewport, collapsing this panel to near-zero height with no visible
     background. 100dvh (not 100vh) avoids the mobile-Chrome address-bar viewport-height bug. */
  nav.primary{position:fixed; top:76px; left:0; right:0; height:calc(100dvh - 76px); overflow-y:auto; background:var(--ink); flex-direction:column; align-items:flex-start; padding:32px 24px; gap:8px; transform:translateX(100%); transition:transform .3s ease; z-index:90;}
  nav.primary.open{transform:translateX(0);}
  nav.primary a{font-size:20px; padding:14px 0; width:100%; border-bottom:1px solid var(--border);}
  .hamburger{display:flex;}
  .nav-actions .btn-ghost{display:none;}
}
@media (max-width:560px){ .brand .brand-text{display:none;} }
@media (min-width:901px){ .hamburger{display:none;} }