:root{
  --navy:#061a2c;
  --navy2:#071f35;
  --navy3:#0a2a45;

  --ink:#ffffff;
  --muted:rgba(255,255,255,.74);
  --muted2:rgba(255,255,255,.60);
  --line:rgba(255,255,255,.14);
  --line2:rgba(255,255,255,.10);

  --paper:#ffffff;
  --paperInk:#0b0b0c;
  --paperMuted:rgba(0,0,0,.62);
  --paperLine:rgba(0,0,0,.10);

  --blue:#2a66ff;
  --blue2:#86a9ff;

  --max:1200px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
  color: var(--ink);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px}
@media (max-width:700px){ .wrap{padding:0 18px} }

.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:18px; top:12px; width:auto; height:auto; padding:10px 12px; background:#000; color:#fff; z-index:9999}

/* Header */
.header{
  position:sticky; top:0; z-index:90;
  background:linear-gradient(180deg, rgba(6,26,44,.96), rgba(6,26,44,.88));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.headerRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0;
}
.brand{
  display:flex; align-items:center; gap:14px; min-width:240px;
}
.brand img{height:54px; width:auto} /* larger, legible */
.brand .name{
  font-weight:900; letter-spacing:.2px;
}
.nav{
  display:flex; align-items:center; gap:18px;
  font-weight:800; font-size:14px;
}
.nav a{
  padding:10px 8px;
  color:rgba(255,255,255,.92);
}
.nav a:hover{color:#fff; text-decoration:underline; text-underline-offset: 6px;}
.nav a[aria-current="page"]{text-decoration:underline; text-underline-offset:6px;}

.headerActions{
  display:flex; align-items:center; gap:12px;
  color:rgba(255,255,255,.92);
  font-weight:800;
}
.iconBtn{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.iconBtn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
.burger{display:none}

.mobilePanel{display:none; border-top:1px solid var(--line); padding:10px 0 16px}
.mobilePanel a{display:block; padding:12px 10px; font-weight:900; color:#fff}
.mobilePanel a:hover{background:rgba(255,255,255,.06)}

@media (max-width:980px){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* Typography */
h1,h2,h3{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:600;
  letter-spacing:-.4px;
  margin:0;
}
.h1{font-size:78px; line-height:0.95}
@media (max-width:980px){ .h1{font-size:56px} }
@media (max-width:520px){ .h1{font-size:44px} }

.lead{margin:0; color:var(--muted); font-size:18px; max-width:58ch}
@media (max-width:520px){ .lead{font-size:16px} }

/* Hero */
.hero{
  position:relative;
  padding:0;
  overflow:hidden;
  background: radial-gradient(1200px 600px at 30% 20%, rgba(42,102,255,.16), rgba(6,26,44,0) 60%),
              linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:34px;
  padding:56px 0 42px;
  align-items:center;
}
@media (max-width:980px){
  .heroGrid{grid-template-columns:1fr; padding:38px 0 26px}
}

.heroKicker{
  display:flex; align-items:center; gap:10px;
  font-weight:900; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.74);
  margin-bottom:14px;
}
.dot{width:10px; height:10px; border-radius:999px; background:var(--blue);}

.heroList{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  color:rgba(134,169,255,.95);
  font-size:28px;
  line-height:1.25;
}
.heroList li{margin:6px 0}
@media (max-width:520px){ .heroList{font-size:22px} }

.heroBtns{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  background:transparent;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
.btn.primary{
  background:rgba(42,102,255,.95);
  border-color:rgba(42,102,255,.95);
}
.btn.primary:hover{background:rgba(42,102,255,1); border-color:rgba(42,102,255,1)}
.btn.light{
  background:#fff;
  color:#0b1220;
  border-color:#fff;
}
.btn.light:hover{background:#f2f4f8}

.rule{border-top:1px solid rgba(255,255,255,.14); margin-top:22px}

/* Featured card (right) */
.heroCard{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.12);
  min-height:420px;
}
@media (max-width:980px){ .heroCard{min-height:320px} }
.heroCard .img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
}
.heroCard .shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(6,26,44,.40) 0%, rgba(6,26,44,.10) 52%, rgba(6,26,44,.55) 100%);
}
.heroCard .text{
  position:absolute; left:18px; bottom:16px; right:18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.heroCard .label{
  font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  font-size:12px; color:rgba(255,255,255,.86);
}
.heroCard .title{
  font-family: Georgia, "Times New Roman", serif;
  font-size:36px; line-height:1.02; margin-top:8px;
}
@media (max-width:520px){ .heroCard .title{font-size:28px} }

.arrow{
  width:58px; height:58px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
}

/* Sections */
.section{padding:48px 0}
.sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.h2{font-size:26px}
.sub{margin:10px 0 0; color:var(--muted2); font-weight:700; max-width:88ch}

.grid4{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
@media (max-width:980px){ .grid4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .grid4{grid-template-columns:1fr} }

.tile{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.tile:hover{transform:translateY(-2px); background: rgba(255,255,255,.06)}
.tile .thumb{height:170px; background-size:cover; background-position:center}
.tile .cap{padding:14px 14px 16px}
.tile .cap h3{font-size:20px; color:#fff}
.tile .cap p{margin:8px 0 0; color:rgba(255,255,255,.70); font-size:14px}

.divider{height:1px; background:rgba(255,255,255,.10); margin:10px 0 0}

/* Page content blocks */
.panel{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:18px;
  background: rgba(255,255,255,.03);
}
.list{margin:10px 0 0; padding-left:18px; color:rgba(255,255,255,.72)}
.list li{margin:6px 0}

/* Footer */
.footer{
  padding:38px 0;
  background: linear-gradient(180deg, rgba(6,26,44,.86), rgba(6,26,44,.98));
  border-top:1px solid rgba(255,255,255,.14);
}
.footerGrid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:18px}
@media (max-width:980px){ .footerGrid{grid-template-columns:1fr} }
.footer a:hover{text-decoration:underline}
.footer small{color:rgba(255,255,255,.72); font-weight:700}

/* Reveal */
.fadeUp{opacity:0; transform:translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease)}
.fadeUp.show{opacity:1; transform:translateY(0)}


/* --- Mock-match overrides --- */
.hero{
  padding-bottom: 0;
}
.heroInner{
  padding-bottom: 26px;
}
.heroUnder{
  padding: 18px 0 34px;
}
.tileRow{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 980px){ .tileRow{grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .tileRow{grid-template-columns: 1fr;} }

.tile{
  border-radius: 10px;
}
.tile .thumb{height: 200px}
@media (max-width: 980px){ .tile .thumb{height: 170px} }

.tileLabel{
  margin-top: 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  letter-spacing: -.2px;
  color: rgba(255,255,255,.86);
}
@media (max-width: 520px){ .tileLabel{font-size:22px} }

.tile .cap{display:none;} /* captions not inside card for mock */
.heroCard{
  border-radius: 12px;
}
.heroCard .text{display:none;} /* pure image card like mock */
.heroCard .shade{
  background: linear-gradient(90deg, rgba(6,26,44,.55) 0%, rgba(6,26,44,.18) 52%, rgba(6,26,44,.55) 100%);
}

/* Two-tile row helper on homepage (keeps 4-col rhythm but only 2 tiles visible) */
.tileRow > div[style*="display:none"]{display:block}
@media (max-width:980px){
  .tileRow > div[style*="display:none"]{display:none}
}

/* Priority tile highlight (homepage first tile) */
.tileRow a.tile:first-child{
  box-shadow: 0 0 0 1px rgba(42,102,255,.35), 0 18px 50px rgba(0,0,0,.35);
  border-color: rgba(42,102,255,.40);
}


/* --- Per-page themes (subtle motion via palette shift) --- */
body[data-theme="home"]{
  --navy:#061a2c; --navy2:#071f35; --navy3:#0a2a45;
  --blue:#2a66ff; --blue2:#86a9ff;
}
body[data-theme="services"]{
  --navy:#071f1b; --navy2:#062b24; --navy3:#0b3a31;
  --blue:#2ee59d; --blue2:#9af2cd;
}
body[data-theme="industries"]{
  --navy:#150b2e; --navy2:#1b0e3a; --navy3:#271255;
  --blue:#8b5cf6; --blue2:#c4b5fd;
}
body[data-theme="insights"]{
  --navy:#06202a; --navy2:#052a37; --navy3:#0a3c4f;
  --blue:#22c3ff; --blue2:#8adfff;
}
body[data-theme="about"]{
  --navy:#0b0f1a; --navy2:#0b1628; --navy3:#132343;
  --blue:#60a5fa; --blue2:#bfdbfe;
}
body[data-theme="contact"]{
  --navy:#081a2a; --navy2:#061426; --navy3:#0b2746;
  --blue:#2a66ff; --blue2:#86a9ff;
}

/* make dot and primary button follow theme */
.dot{background:var(--blue)!important}
.btn.primary{background:rgba(0,0,0,0); background: color-mix(in srgb, var(--blue) 95%, transparent); border-color: color-mix(in srgb, var(--blue) 95%, transparent);}
.btn.primary:hover{background:var(--blue); border-color:var(--blue);}
.heroList{color: color-mix(in srgb, var(--blue2) 92%, white 0%);}