:root { --red: #ff0000; --blue: #0000ff; --green: #008000; --gold: #d4af37; --ink: #f6f8ff; --muted: #c2cee0; --line: rgba(255,255,255,.16); --panel: rgba(5,11,31,.54); --shadow: 0 22px 60px rgba(0,0,0,.20); --max: 1180px; --theme: #2f76d0; --theme-soft: rgba(47,118,208,.35); --page-grad: radial-gradient(circle at 0 0,rgba(38,116,199,.64),transparent 31rem),linear-gradient(145deg,#174f8f 0%,#0a2a52 38%,#050b18 100%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--page-grad); background-attachment: fixed; color: var(--ink); font-family: Arial,Helvetica,sans-serif; font-size: 18px; line-height: 1.58; } body.theme-red { --theme: #ff0000; --theme-soft: rgba(255,0,0,.24); --page-grad: radial-gradient(circle at 0 0,rgba(255,0,0,.36),transparent 31rem),linear-gradient(145deg,#781017 0%,#350b13 39%,#08070f 100%); } body.theme-green { --theme: #008000; --theme-soft: rgba(0,128,0,.30); --page-grad: radial-gradient(circle at 0 0,rgba(0,128,0,.52),transparent 31rem),linear-gradient(145deg,#126b35 0%,#0b3822 39%,#050b0a 100%); } body.theme-software { --theme: #0000ff; --theme-soft: rgba(0,0,255,.28); --page-grad: radial-gradient(circle at 0 0,rgba(25,79,218,.68),transparent 31rem),linear-gradient(145deg,#173f9b 0%,#0a1e58 39%,#050818 100%); } a { color: inherit; } .wrap { width: min(var(--max),calc(100% - 42px)); margin: auto; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 10px; top: 10px; background: #fff; color: #000; padding: 8px 12px; z-index: 999; } header { position: sticky; top: 0; z-index: 30; background: rgba(4,10,24,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .navrow { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 82px; } .logo { display: block; width: 260px; max-width: 42vw; } .logo img { display: block; width: 100%; height: auto; } .nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .nav a { text-decoration: none; font-size: 15px; font-weight: 800; letter-spacing: .02em; padding: 10px 12px; border-radius: 9px; color: #e8eef8; } .nav a:hover, .nav a:focus { background: rgba(255,255,255,.08); } .nav a.active { box-shadow: inset 0 -3px 0 var(--gold); } .hero { padding: 82px 0 58px; } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; } .eyebrow { text-transform: uppercase; letter-spacing: .17em; font-size: 12px; font-weight: 900; color: #e1e9f7; } .hero h1 { font-size: clamp(46px,6.7vw,78px); line-height: 1.01; letter-spacing: -.045em; margin: 13px 0 20px; } .hero .lede { font-size: clamp(20px,2.2vw,25px); color: #dce5f3; max-width: 850px; } .hero-art { position: relative; min-height: 380px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); background: linear-gradient(135deg,var(--theme-soft),rgba(5,11,31,.4)); } .hero-art img.photo { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: saturate(.93) contrast(1.03); } .hero-art:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(4,10,24,.35),rgba(4,10,24,.02) 45%,rgba(4,10,24,.10)); } .hero-art.abstract { display: grid; place-items: center; } .brand-orbit { position: relative; width: 280px; height: 280px; z-index: 2; } .brand-orbit .center { position: absolute; inset: 85px; border: 1px solid rgba(212,175,55,.55); border-radius: 50%; display: grid; place-items: center; text-align: center; font-weight: 900; letter-spacing: .08em; font-size: 13px; } .brand-orbit .mark { position: absolute; width: 92px; height: 92px; filter: drop-shadow(0 15px 18px rgba(0,0,0,.25)); } .brand-orbit .m1 { left: 0; top: 94px; } .brand-orbit .m2 { right: 12px; top: 12px; } .brand-orbit .m3 { right: 0; bottom: 0; } .brand-orbit:before, .brand-orbit:after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; inset: 18px; } .brand-orbit:after { inset: 55px; } .actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 28px; } .btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 900; border: 1px solid var(--line); border-radius: 10px; padding: 13px 18px; background: rgba(255,255,255,.07); } .btn.gold { background: var(--gold); border-color: var(--gold); color: #161b28; } .btn:hover { transform: translateY(-1px); } .section { padding: 62px 0; border-top: 1px solid rgba(255,255,255,.08); } .section h2 { font-size: clamp(31px,4vw,47px); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 16px; } .intro { max-width: 900px; color: #cbd6e6; font-size: 20px; margin: 0 0 30px; } .goldrule { height: 2px; background: linear-gradient(90deg,var(--gold),transparent); margin: 22px 0 30px; } .service-three { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .service-card { position: relative; display: flex; flex-direction: column; min-height: 318px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,rgba(255,255,255,.075),rgba(5,11,31,.48)); box-shadow: var(--shadow); text-decoration: none; } .service-card:hover { border-color: rgba(212,175,55,.65); transform: translateY(-2px); } .service-card img { width: 62px; height: 62px; margin-bottom: 19px; } .service-card h3 { font-size: 29px; margin: 0 0 8px; } .service-card p { color: #c6d1e2; margin: 0; } .service-card .more { margin-top: auto; padding-top: 22px; font-size: 13px; text-transform: uppercase; letter-spacing: .13em; font-weight: 900; } .accent-red { border-top: 3px solid var(--red); } .accent-blue { border-top: 3px solid var(--blue); } .accent-green { border-top: 3px solid var(--green); } .prose { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 38px; align-items: start; } .prose-main { padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: rgba(3,8,20,.34); } .prose-main p:first-child { margin-top: 0; } .prose-main p:last-child { margin-bottom: 0; } .pull { position: sticky; top: 110px; padding: 28px; border-radius: 18px; background: linear-gradient(145deg,var(--theme-soft),rgba(5,11,31,.30)); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow); } .pull blockquote { margin: 0; font-size: 25px; line-height: 1.35; font-weight: 800; } .pull small { display: block; color: #c7d2e2; margin-top: 14px; } .matrix-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; } .matrix-grid.software { grid-template-columns: repeat(2,1fr); } .matrix-card { border: 1px solid var(--line); border-radius: 16px; background: rgba(5,11,31,.48); overflow: hidden; } .matrix-card details { height: 100%; } .matrix-card summary { list-style: none; cursor: pointer; padding: 24px 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .matrix-card summary::-webkit-details-marker { display: none; } .matrix-card summary:after { content: "More +"; font-size: 12px; letter-spacing: .11em; text-transform: uppercase; font-weight: 900; color: #f3d67f; white-space: nowrap; } .matrix-card details[open] summary:after { content: "Less"; } .matrix-card h3 { font-size: 25px; margin: 0 0 7px; } .matrix-card p { margin: 0; color: #c3cee0; font-size: 16px; } .matrix-body { padding: 0 26px 24px; border-top: 1px solid var(--line); } .class-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .class-list span { font-size: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 7px 10px; background: rgba(255,255,255,.055); } .how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .how-item { padding: 22px; border-left: 3px solid var(--gold); background: rgba(4,10,24,.34); } .how-item b { display: block; font-size: 18px; margin-bottom: 7px; } .how-item span { color: #bfcbdd; font-size: 15px; } .industry-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; } .industry { position: relative; min-height: 220px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #061326; } .industry img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .industry:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(4,11,27,.95),rgba(4,11,27,.15) 64%); } .industry .label { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; } .industry h3 { margin: 0 0 3px; font-size: 22px; } .industry p { margin: 0; color: #d1d9e7; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; } .compliance { display: flex; flex-wrap: wrap; gap: 10px; } .compliance span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.05); font-size: 14px; font-weight: 800; } .legacy-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; } .legacy-box { padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,11,31,.38); } .legacy-box h3 { margin: 0 0 12px; font-size: 21px; } .legacy-box ul { margin: 0; padding-left: 20px; color: #d1dae8; } .legacy-box li { margin: 5px 0; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .about-card { padding: 27px; border: 1px solid var(--line); border-radius: 16px; background: rgba(5,11,31,.42); } .about-card h3 { margin: 0 0 9px; font-size: 24px; } .about-card p { margin: 0; color: #cad4e4; } footer { padding: 38px 0 28px; background: rgba(2,6,16,.38); border-top: 1px solid rgba(255,255,255,.10); } .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; } .offices { color: #b9c6d9; font-size: 14px; } .footer-logo { width: 240px; max-width: 42vw; } .footer-logo img { display: block; width: 100%; } .footer-gold { height: 2px; background: linear-gradient(90deg,transparent,var(--gold)); margin: 20px 0 0; } .tiny { font-size: 12px; color: #95a7c0; } @media (max-width:900px){ body {  font-size: 17px; }  .hero-grid, .prose {  grid-template-columns: 1fr; }  .hero-art {  min-height: 320px; }  .pull {  position: static; }  .service-three, .industry-grid {  grid-template-columns: 1fr 1fr; }  .how-grid {  grid-template-columns: 1fr 1fr; }  .matrix-grid, .matrix-grid.software, .about-grid {  grid-template-columns: 1fr; }  .footer-grid {  grid-template-columns: 1fr; }  .footer-logo {  justify-self: start; }  .navrow {  align-items: flex-start;  flex-direction: column;  padding: 15px 0; }  .logo {  max-width: 70vw; }  .nav {  justify-content: flex-start; } } @media (max-width:620px){ .wrap {  width: min(var(--max),calc(100% - 24px)); }  .hero {  padding: 54px 0 42px; }  .hero h1 {  font-size: 44px; }  .hero-art {  min-height: 250px; }  .service-three, .industry-grid, .how-grid, .legacy-grid {  grid-template-columns: 1fr; }  .section {  padding: 48px 0; }  .matrix-card summary {  padding: 20px; }  .matrix-body {  padding: 0 20px 20px; }  .nav a {  padding: 7px 9px; }  .logo {  width: 230px; }  .footer-logo {  width: 215px; } }