:root{
  --nav-bg: #123a5a;
  --accent: #2fb4e6;
  --card-bg: rgba(255,255,255,0.06);
  --muted: #b8d4e6;
  --max-width: 1100px;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(8,12,20,0.45);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Shared navbar + dropdown styles used across all pages */
.topbar{
  background:var(--nav-bg);
  padding:10px 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
  gap:32px;
}
nav{
  display:flex;
  align-items:center;
  gap:18px;
}
nav a{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:600;
  transition:color 0.2s;
  white-space:nowrap;
}
nav a:hover{ color:var(--accent); }
.quote{
  background:var(--accent);
  color:#fff;
  padding:7px 10px;
  border-radius:8px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  margin-left:18px;
}
.brand {
  display: flex;
  align-items: center;
  height: auto;
}
.brand img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  margin-right: 18px;
  margin-top: -32px;
  margin-bottom: -32px;
  position: static;
}
.nav-item.services-menu{ position:relative; }
.nav-item.services-menu > a{ display:inline-flex; align-items:center; gap:6px; }
.nav-item .dropdown{ display:none; position:absolute; top:100%; left:0; background:rgba(2,18,28,0.95); border-radius:10px; padding:8px 0; min-width:260px; box-shadow:0 8px 24px rgba(8,12,20,0.5); z-index:999; }
.nav-item .dropdown li{ list-style:none; }
.nav-item .dropdown a{ display:block; padding:8px 14px; color:#fff; text-decoration:none; font-weight:600; }
.nav-item .dropdown a:hover{ background:rgba(47,180,230,0.06); color:var(--accent); }
.nav-item.services-menu:hover .dropdown,
.nav-item.services-menu:focus-within .dropdown{ display:block; }

@media (max-width:700px){
  .topbar{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    text-align:center;
  }
  nav{flex-wrap:wrap;justify-content:center;}
  .quote{order:3;width:auto}
  .brand img{width:64px;height:64px;margin-right:12px;margin-top:-8px;margin-bottom:-8px}
}

/* Small utility shared by pages */
.cta{display:inline-block;margin-top:12px;padding:9px 14px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.04);color:#fff;text-decoration:none;font-weight:600;transition:background 0.2s}
.cta:hover{background:var(--accent);color:#023045}

/* Our Work: per-image wrapper so hover-zoom is clipped to the image frame */
.work-images { display:flex; gap:18px; justify-content:center; align-items:center; }
.work-img-wrap{ overflow:hidden; border-radius:14px; display:inline-block; width:260px; height:360px; box-shadow:0 4px 16px rgba(47,180,230,0.18); background:#111; }
.work-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s cubic-bezier(.2,.9,.2,1); transform:scale(1); }
.work-img-wrap:hover img{ transform:scale(1.20); }

@media (max-width:700px){
  .work-img-wrap{ width:44vw; height:62vw; min-width:120px; min-height:180px; max-width:220px; max-height:320px }
}

/* Our Services card layout (match supplied design) */
.services {
  display: grid;
  /* Force a 3-column layout on desktop/tablet; collapse to single column on small screens */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 18px;
  align-items: start;
}
.services .service {
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 26px 20px;
  border: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  height: 320px; /* fixed height so all cards are identical */
  box-sizing: border-box;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
  text-align: center;
}
.services .service:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(47,180,230,0.12);
  border-color: rgba(47,180,230,0.18);
  background: rgba(47,180,230,0.03);
}
.service-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background: rgba(47,180,230,0.05);
  color:var(--accent);
  font-size:32px;
  border:1px solid rgba(47,180,230,0.08);
  box-shadow: 0 4px 12px rgba(2,18,28,0.18);
}
.services .service h3{ margin: 6px 0 0 0; font-size:1.06rem; text-transform:uppercase; letter-spacing:0.6px; }
.services .service h3 a{ color:var(--accent); text-decoration:none; display:block; }
.services .service p{ margin:0; color:var(--muted); font-size:0.98rem; }

/* Put the icon above the heading and center it cleanly */
.services .service h3 a{ display:flex; flex-direction:column; align-items:center; gap:12px; }
/* Make paragraph take available space so cards align vertically */
.services .service > p { flex: 1 1 auto; display:flex; align-items:center; justify-content:center; padding: 0 8px; }

@media (max-width:900px){
  /* Collapse to single-column earlier to avoid cards being clipped on small tablets / large phones */
  .services { grid-template-columns: 1fr; }
  .services .service{ min-height: 140px; padding:18px }
  .service-emoji{ width:56px; height:56px; font-size:26px }
}

@media (max-width:700px){
  .work-img-wrap{ width:44vw; height:62vw; min-width:120px; min-height:180px; max-width:220px; max-height:320px }
  /* Reduce service card height on smaller devices so they don't feel too tall */
  .services .service{ height:220px; padding:16px }
  .service-emoji{ width:56px; height:56px; font-size:26px }
}

@media (max-width:480px){
  /* Smaller phones: make cards a bit more compact */
  .services .service{ height:190px; padding:12px }
  .service-emoji{ width:48px; height:48px; font-size:22px }
  .services .service h3{ font-size:0.98rem }
  .services .service > p{ font-size:0.95rem }
}

/* Make sure the CTA-style service (last card) stretches nicely */
.services .service.cta-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:22px;
}