
:root{--blue:#0b6eb8;--ink:#111820;--muted:#66727d;--light:#f3f5f7;--line:#dfe5e9;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.55}
header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.97);z-index:10}
.brand img{width:285px;max-height:64px;object-fit:contain}nav{display:flex;gap:26px;align-items:center}nav a{text-decoration:none;color:var(--ink);font-size:14px;font-weight:700}
.button{display:inline-block;background:var(--blue);color:#fff!important;text-decoration:none;border:0;padding:14px 22px;font-weight:800;letter-spacing:.02em;cursor:pointer}.button.small{padding:10px 16px}.ghost{background:transparent;color:var(--ink)!important;border:1px solid var(--ink)}
.hero{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:70px 7vw;background:linear-gradient(120deg,#f7f8f9 0%,#fff 58%,#eef3f6 100%)}
.hero h1{font-size:clamp(44px,6vw,82px);line-height:.98;margin:14px 0 24px;letter-spacing:-.04em}.hero h1 span,.dark h2 span{color:var(--blue)}
.hero-copy>p:not(.eyebrow){font-size:19px;max-width:700px;color:#46515b}.eyebrow{color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.18em}.actions{display:flex;gap:12px;margin-top:30px}
.hero-art{display:flex;justify-content:center}.grid{width:min(470px,90%);aspect-ratio:1;border:1px solid #cfd7dc;background-image:linear-gradient(#dce3e7 1px,transparent 1px),linear-gradient(90deg,#dce3e7 1px,transparent 1px);background-size:34px 34px;position:relative;transform:perspective(700px) rotateY(-7deg) rotateX(4deg)}
.robot{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);border:12px solid var(--blue);border-radius:50% 50% 18% 18%;box-shadow:0 0 0 24px rgba(11,110,184,.08)}
.robot:before,.robot:after{content:"";position:absolute;background:var(--ink)}.robot:before{width:130%;height:18px;left:-15%;top:42%;transform:rotate(-34deg)}.robot:after{width:18px;height:130%;left:45%;top:-15%;transform:rotate(25deg)}
.section{padding:90px 7vw}.section h2{font-size:clamp(34px,4vw,56px);line-height:1.05;margin:10px 0 35px;letter-spacing:-.025em}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards article{border:1px solid var(--line);padding:28px;min-height:225px;background:#fff}.cards article>b{color:var(--blue);font-size:13px}.cards h3{font-size:21px;margin:35px 0 10px}.cards p,.wide{color:#59656f}
.dark{background:#10171d;color:#fff}.dark>div:first-child{max-width:800px}.dark p:not(.eyebrow){color:#c5cdd3}.flow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:55px}.flow div{border:1px solid #52606a;padding:18px 14px;text-align:center;flex:1;font-size:12px;font-weight:900;letter-spacing:.08em}.flow i{color:var(--blue);font-size:24px;font-style:normal}
.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;background:var(--light)}.check{padding-top:28px}.check p{padding:12px 0;border-bottom:1px solid #d8dfe3;font-weight:700}
.wide{max-width:900px;font-size:18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:45px}.stats div{border-top:3px solid var(--blue);padding-top:18px}.stats b{display:block;font-size:28px}.stats span{color:var(--muted)}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;background:#e9eef1}.contact a{color:var(--blue);font-weight:800}.contact form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact input,.contact textarea{width:100%;padding:15px;border:1px solid #cbd4d9;background:#fff;font:inherit}.contact textarea,.contact button,.contact small{grid-column:1/-1}.contact small{color:#68747d}
footer{background:#0b1014;color:#aeb7bd;text-align:center;padding:45px 7vw;font-size:13px}footer img{width:300px;max-width:80%;background:#fff;padding:8px;margin-bottom:15px}
@media(max-width:900px){header{height:auto;padding:14px 5vw}.brand img{width:220px}nav a:not(.button){display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:65px}.hero-art{margin-top:50px}.grid{width:330px}.cards{grid-template-columns:1fr 1fr}.flow{flex-wrap:wrap}.flow i{display:none}.flow div{flex:1 1 30%}.split,.contact{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.hero{padding:55px 6vw}.section{padding:65px 6vw}.cards{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.contact form{grid-template-columns:1fr}.actions{flex-direction:column}.button{text-align:center}}

/* Safari-safe production fixes */
.site-header .logo img, header .logo img, .brand img {
  width: auto;
  height: 56px;
  max-width: 240px;
  object-fit: contain;
}
.hero {
  overflow: hidden;
}
.hero-art, .hero svg {
  display: none !important;
}
.hero::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 18%;
  width: 42%;
  height: 62%;
  border: 5px solid #1686d9;
  border-radius: 44px;
  opacity: .8;
  background-image:
    linear-gradient(rgba(40,60,80,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,60,80,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
@media (max-width: 800px) {
  .site-header .logo img, header .logo img, .brand img { height: 46px; max-width: 190px; }
  .hero::after { opacity: .18; right: -18%; width: 72%; }
}

/* v3 compact branded header */
header, .site-header {
  margin: 12px auto !important;
  width: min(94%, 1440px) !important;
  min-height: 72px !important;
  padding: 8px 22px !important;
  border-radius: 18px !important;
  background: #f2f4f5 !important;
}
.site-header .logo img, header .logo img, .brand img {
  height: 62px !important;
  width: auto !important;
  max-width: 310px !important;
}

/* Hero: shorter rounded banner */
.hero {
  width: min(94%, 1440px);
  margin: 0 auto 34px !important;
  min-height: 520px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative;
  padding: 54px 50% 54px 52px !important;
  background: linear-gradient(110deg,#f5f7f8 0%,#eef3f6 50%,#dfe8ee 50%,#dfe8ee 100%) !important;
}
.hero::after { display:none !important; }
.hero-photo {
  position:absolute !important; inset:0 0 0 50% !important; z-index:0 !important;
  overflow:hidden; border-radius:0 24px 24px 0;
}
.hero-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(238,243,246,.45),rgba(10,30,48,.05) 25%,rgba(10,30,48,.15));
}
.hero-photo-caption {
  position:absolute; right:24px; bottom:24px; z-index:2;
  background:rgba(12,39,61,.78); color:white; padding:16px 20px;
  border-radius:14px; font-weight:700; letter-spacing:.06em; line-height:1.5;
}
.hero > *:not(.hero-photo) { position:relative; z-index:2; }

/* Correct secondary button */
.hero a:not(.primary), .btn-secondary, .secondary-button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 22px; border:2px solid #1267a8;
  border-radius:8px; color:#1267a8 !important; background:white !important;
  text-decoration:none !important; font-weight:700;
}

/* Real work gallery */
.field-work { width:min(94%,1240px); margin:60px auto; }
.section-heading span { font-size:.78rem; letter-spacing:.18em; font-weight:800; color:#1267a8; }
.section-heading h2 { margin:.4rem 0 1.4rem; font-size:clamp(2rem,4vw,3.2rem); }
.field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.field-grid figure { margin:0; background:#f2f4f5; border-radius:18px; overflow:hidden; }
.field-grid img { width:100%; height:300px; object-fit:cover; display:block; }
.field-grid figcaption { padding:14px 16px 17px; font-weight:750; }

@media(max-width:850px){
 header,.site-header { width:94%!important; padding:7px 12px!important; border-radius:14px!important; }
 .site-header .logo img,header .logo img,.brand img { height:50px!important; max-width:230px!important; }
 .hero { padding:38px 28px 360px!important; min-height:unset!important; }
 .hero-photo { inset:auto 0 0 0!important; height:330px; border-radius:0 0 24px 24px; }
 .hero-photo-caption { font-size:.8rem; right:14px; bottom:14px; }
 .field-grid { grid-template-columns:1fr; }
 .field-grid img { height:260px; }
}
