:root {
  --navy:#11254d;
  --navy-2:#19376d;
  --blue:#1e94c7;
  --teal:#148c92;
  --green:#3d9147;
  --orange:#ec7514;
  --gold:#eba91a;
  --red:#c8452e;
  --paper:#f7f8fa;
  --white:#ffffff;
  --muted:#657087;
  --line:#dfe4eb;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--navy); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }

.topbar { height:106px; max-width:1320px; margin:auto; padding:0 44px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(247,248,250,.96); }
.brand { display:flex; align-items:center; gap:14px; color:var(--navy-2); font-size:16px; font-weight:800; line-height:1.05; }
.brand img { display:block; width:74px; height:74px; object-fit:contain; }
.brand span { display:flex; flex-direction:column; gap:5px; }
.brand small { color:var(--blue); font-size:14px; font-weight:500; }
nav { display:flex; align-items:center; gap:30px; color:#384864; font-size:13px; font-weight:700; }
nav a { transition:.2s; }
nav a:hover { color:var(--blue); }
.navContact { padding:12px 18px; border:1px solid var(--navy); border-radius:3px; color:var(--navy); }
.navContact:hover { background:var(--navy); color:white; }

.hero { position:relative; max-width:1320px; min-height:650px; margin:auto; padding:80px 44px 75px; display:grid; grid-template-columns:1.12fr .88fr; gap:70px; align-items:center; overflow:hidden; }
.hero:before { content:""; position:absolute; left:0; top:0; width:5px; height:100%; background:linear-gradient(var(--blue),var(--green),var(--gold),var(--orange),var(--red)); }
.eyebrow { margin-bottom:22px; color:var(--blue); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.15em; }
.hero h1 { max-width:760px; margin-bottom:28px; font-size:clamp(54px,6.2vw,88px); line-height:.98; letter-spacing:-.06em; font-weight:700; }
em { color:var(--blue); font-family:Georgia,serif; font-weight:400; }
.lead { max-width:670px; margin-bottom:0; color:#526079; font-size:19px; line-height:1.65; }
.heroActions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 22px; border-radius:3px; font-size:13px; font-weight:700; transition:.2s ease; }
.button.primary { min-width:250px; background:var(--navy); color:white; }
.button.primary:hover { background:var(--blue); transform:translateY(-2px); }
.button.secondary { border:1px solid var(--line); background:white; }
.button.secondary:hover { border-color:var(--blue); color:var(--blue); }
.heroVisual { position:relative; min-height:430px; display:flex; flex-direction:column; justify-content:flex-end; padding:42px; overflow:hidden; border-radius:2px; background:var(--navy); color:white; }
.halo { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.16); }
.haloOne { width:360px; height:360px; right:-140px; top:-100px; }
.haloTwo { width:240px; height:240px; left:-80px; bottom:-80px; }
.experience { position:relative; z-index:3; display:flex; flex-direction:column; gap:9px; margin-bottom:44px; }
.experience strong { color:#62c3e8; font-size:72px; line-height:.9; letter-spacing:-.06em; }
.experience span { font-size:13px; line-height:1.5; text-transform:uppercase; letter-spacing:.08em; }
.heroVisual>p { position:relative; z-index:3; max-width:325px; margin:0; padding-top:23px; border-top:1px solid rgba(255,255,255,.3); font-size:15px; line-height:1.6; }

.sectionKicker { display:flex; align-items:center; gap:13px; color:var(--blue); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.sectionKicker span { display:grid; place-items:center; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; font-family:Georgia,serif; font-weight:400; }
.about { padding:105px max(44px,calc((100vw - 1232px)/2)); background:white; }
.aboutMain { display:grid; grid-template-columns:1.2fr .8fr; gap:100px; margin-top:48px; }
.about h2,.sectionHead h2 { margin:0; font-size:clamp(38px,4.4vw,59px); line-height:1.07; letter-spacing:-.05em; }
.aboutCopy { padding-top:4px; }
.aboutCopy p { color:#5c687e; font-size:16px; line-height:1.75; }
.aboutCopy p:last-child { margin-bottom:0; }

.services { padding:105px max(44px,calc((100vw - 1232px)/2)); background:var(--navy); color:white; }
.sectionHead { display:grid; grid-template-columns:.72fr 1.28fr; align-items:start; gap:45px; margin-bottom:65px; }
.sectionKicker.light { color:#60c0e6; }
.serviceGrid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.22); border-left:1px solid rgba(255,255,255,.22); }
.service { min-height:280px; padding:26px 28px; border-right:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.22); }
.serviceNo { color:#66c5e9; font:16px Georgia,serif; }
.service h3 { max-width:270px; margin:56px 0 17px; font-size:22px; line-height:1.18; letter-spacing:-.03em; }
.service p { max-width:330px; margin-bottom:0; color:#bdc8d9; font-size:14px; line-height:1.7; }

.projects { padding:110px max(44px,calc((100vw - 1232px)/2)); }
.projectHead { color:var(--navy); }
.projectGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.project { --accent:var(--blue); min-height:370px; padding:28px; border:1px solid var(--line); border-top:5px solid var(--accent); background:white; transition:.22s ease; }
.project:hover { transform:translateY(-5px); box-shadow:0 18px 45px rgba(24,47,89,.09); }
.project.blue { --accent:var(--blue); }
.project.green { --accent:var(--green); }
.project.orange { --accent:var(--orange); }
.project.teal { --accent:var(--teal); }
.project.gold { --accent:var(--gold); }
.project.red { --accent:var(--red); }
.projectTop { display:flex; align-items:center; justify-content:space-between; color:#8290a5; font:15px Georgia,serif; }
.projectTop i { display:block; width:12px; height:12px; border-radius:50%; background:var(--accent); }
.projectCategory { margin:62px 0 12px; color:var(--accent); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.project h3 { max-width:320px; margin-bottom:17px; font-size:24px; line-height:1.17; letter-spacing:-.04em; }
.projectText { margin-bottom:0; color:#68758a; font-size:14px; line-height:1.7; }

footer { padding:90px max(44px,calc((100vw - 1232px)/2)); display:grid; grid-template-columns:.7fr 1.25fr .65fr; gap:60px; align-items:end; background:#0b1d40; color:white; }
.footerMark { color:#67c5e8; font:italic 32px/1.05 Georgia,serif; }
.footerCta>p { margin-bottom:17px; color:#a8b7cd; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.footerCta h2 { margin-bottom:34px; font-size:clamp(42px,5vw,68px); line-height:.97; letter-spacing:-.055em; }
.footerCta em { color:#63c2e7; }
.footerCta>a { display:flex; justify-content:space-between; max-width:430px; padding:15px 0; border-bottom:1px solid #63718a; color:white; font-size:17px; }
.footerCta>a:hover { color:#67c5e8; }
.footerBrand { display:flex; flex-direction:column; align-items:flex-end; gap:15px; }
.footerBrand strong { color:white; font-size:15px; line-height:1.35; text-align:right; }
.footerBrand span { color:#96a7bf; font-size:11px; text-align:right; }

@media (max-width:940px) {
  .hero { grid-template-columns:1fr; }
  .heroVisual { min-height:420px; }
  .aboutMain { grid-template-columns:1fr; gap:40px; }
  .sectionHead { grid-template-columns:1fr; gap:38px; }
  .serviceGrid,.projectGrid { grid-template-columns:1fr 1fr; }
  footer { grid-template-columns:1fr 1fr; }
  .footerMark { display:none; }
}

@media (max-width:650px) {
  .topbar { height:86px; padding:0 18px; }
  .brand { gap:9px; font-size:13px; }
  .brand img { width:56px; height:56px; }
  .brand small { font-size:12px; }
  nav a:not(.navContact) { display:none; }
  .navContact { padding:10px 13px; }
  .hero { min-height:0; padding:60px 20px; gap:48px; }
  .hero h1 { font-size:49px; }
  .lead { font-size:17px; }
  .button { width:100%; }
  .heroVisual { min-height:350px; padding:28px; }
  .experience { gap:14px; }
  .experience strong { font-size:46px; }
  .about,.services,.projects,footer { padding:72px 20px; }
  .about h2,.sectionHead h2 { font-size:39px; }
  .serviceGrid,.projectGrid { grid-template-columns:1fr; }
  .service { min-height:245px; }
  .project { min-height:335px; }
  footer { grid-template-columns:1fr; gap:55px; }
  .footerBrand { align-items:flex-start; }
  .footerBrand span { text-align:left; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }