*{box-sizing:border-box}
:root{
  --bg:#0a1f3a; --bg2:#0b274a; --card:#0f2744; --muted:#9db4cf; --text:#e6f0fa;
  --border:#1e3a5f; --brand:#1fb6ff; --brand2:#16a0d9; --accent:#ff8a26;
}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 22px}
.nav{position:sticky;top:0;background:rgba(10,31,58,.75);backdrop-filter:saturate(160%) blur(10px);border-bottom:1.5px solid var(--border);z-index:50}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(130deg,var(--brand),var(--brand2));box-shadow:0 8px 30px rgba(31,182,255,.35)}
.brand span{white-space:nowrap}
.menu a{margin-left:18px;color:#d6e6fb}
.menu a.btn{padding:10px 14px;border:1px solid var(--border);border-radius:12px}
.hero{padding:86px 0;background:radial-gradient(900px 400px at 85% 10%, rgba(31,182,255,.18) 0, transparent 70%)}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.hero h1{font-size:44px;line-height:1.06;margin:0 0 12px}
.hero p{color:#cfe1f8;margin:6px 0 18px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 22px;padding:0;list-style:none}
.badges li{border:1px solid var(--border);border-radius:999px;padding:6px 12px;color:#b6d3ef}
.cta{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--brand2));color:#031526;padding:12px 18px;border-radius:14px;font-weight:700}
.card{background:rgba(15,39,68,.85);border:1px solid var(--border);border-radius:16px;padding:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
h2{font-size:30px;margin:0 0 14px}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.22em;font-size:12px;margin-bottom:8px}
.section{padding:62px 0}
.tile img{width:100%;height:210px;object-fit:cover;border-radius:12px;border:1px solid var(--border);margin-bottom:10px}
.footer{border-top:1px solid var(--border);padding:26px 0;color:#9db4cf}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer}
.tab.active{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#00121f;border-color:transparent}
.service{display:none}
.service.active{display:block}
blockquote{border-left:3px solid var(--brand);padding-left:12px;color:#cfe1f8}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
input,select,textarea{background:#0c1f38;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}
button{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#031526;border:none;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer}
.banner {width: 60%; /* smaller than full width */;max-width: 600px;/* limits large ones */;border-radius: 12px;border: 1px solid var(--border);margin: 0 auto 12px;/* centers it */; display: block;}
.note{color:var(--muted);font-size:14px}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.menu{display:none}}
.badge-accent{background:linear-gradient(90deg, rgba(255,138,38,.18), rgba(255,138,38,.08));border:1px solid rgba(255,138,38,.35);border-radius:999px;padding:6px 10px;color:#ffd2a8}

/* Reset any earlier overly-broad logo rules */
.logo { all: unset; }

/* Constrain the header logo safely */
.nav .brand .site-logo {
  height: 80px;       /* desktop size (try 56px if you want it larger) */
  width: auto;        /* keeps aspect ratio */
  max-width: 280px;   /* absolute cap if the source file is very wide */
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  vertical-align: middle;
}

.nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;       /* allows the text to truncate instead of pushing */
}

.nav .brand span {
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keep the header from expanding unexpectedly */
.nav .inner { height: 70px; }

/* Optional: adjust on small screens so it doesn't dominate */
@media (max-width: 768px){
  .nav .brand .site-logo { height: 40px; }
}

/* --- Mobile polish & overflow guards --- */
html { -webkit-text-size-adjust: 100%; }            /* prevents Safari auto-zoom */
img, video { max-width: 100%; height: auto; display:block; }  /* stop image overflow */
.banner { width: 100%; height: auto; }              /* ensure banners scale down */
.card { overflow: hidden; }                         /* clip any overflowing children */
.container { padding-left: 16px; padding-right: 16px; }

/* Tame long words/URLs */
h1, h2, h3, p, li { word-wrap: break-word; overflow-wrap: anywhere; }

/* Grids collapse cleanly on phones */
.grid3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid2 { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

/* Breakpoints */
@media (max-width: 1024px){
  .grid3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
  .grid3, .grid2 { grid-template-columns: 1fr; }
  .hero .grid { grid-template-columns: 1fr !important; }
  .brand span { font-size: 0.95rem; }               /* avoid header wrapping oddly */
}

/* Tabs: prevent the tab row from wrapping badly */
.tabs { display:flex; flex-wrap: wrap; gap: 8px; }
.tab  { flex: 1 1 auto; text-align: center; min-width: 140px; }

/* Lists used in Services/Projects */
.feature-list { list-style: disc; list-style-position: outside; padding-left: 24px; }
.feature-list li::marker { color: #ff8a26; }

/* Logo styling — perfectly scaled, doesn’t stretch or overlap menu */
.brand-logo {
  height: 68px;                 /* Adjust for exact visual match */
  width: auto;                  /* Keeps proper proportions */
  object-fit: contain;          /* Ensures logo doesn’t distort */
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;           /* Space between logo and text */
}

/* Brand container alignment */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* Responsive adjustment for mobile */
@media (max-width: 768px) {
  .brand-logo {
    height: 52px;               /* Slightly smaller on mobile */
  }
  .brand span {
    font-size: 0.95rem;
  }
}