/* =========================
   THEME (blue · grey · white)
   ========================= */
:root{
  --bg:            #f6f8fb;
  --surface:       #ffffff;
  --text:          #0f172a;
  --muted:         #6b7280;
  --accent:        #2b309a;
  --accent-contrast:#ffffff;
  --card:          #e8eef9;
  --ring:          #c7cfdd;
  --ring-strong:   #8b95a7;
  --maxw:          1100px;
  --radius:        16px;
}

/* =========
   BASE
   ========= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block }
.container{ max-width:var(--maxw); padding:1rem; margin-inline:auto }

/* =========
   HEADER / NAV
   ========= */
.site-header{
  position:sticky; top:0; z-index:20;
  background: rgba(43, 48, 154, 0.95);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.header-inner{ display:flex; align-items:center; gap:.75rem; padding:.5rem 0 }
.brand{ display:inline-flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-weight:700 }
.logo-img{ height:40px; width:auto }

/* nav links: desktop defaults */
.nav-toggle { display:none; }
.site-nav{ margin-left:auto }
.site-nav ul{
  list-style:none; display:flex; gap:1rem;
  margin:0; padding:0;
}
.site-nav a{
  color:#e9eefc; text-decoration:none;
  padding:.5rem .75rem; border-radius:10px;
}
.site-nav a[aria-current="page"]{
  background: rgba(255,255,255,.25); font-weight:600;
}
.site-nav a:hover{ background: rgba(255,255,255,.18); }


/* Skip link */
.skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background:var(--accent); color:var(--accent-contrast);
  padding:.5rem; border-radius:8px
}

/* =========
   HERO
   ========= */
.hero{ padding:3rem 0; text-align:center }
.hero h1{ line-height:1.1; font-size:clamp(2rem,5vw,3rem); margin:0 0 .5rem; color:#0b1a4a }
.hero p{ color:var(--muted); margin:.25rem 0 1rem }

.hero.bg-slider{
  position:relative; min-height:70vh;
  display:grid; place-items:center;
  text-align:center; overflow:hidden; border-radius:12px;
}
.bg-slides{ position:absolute; inset:0; z-index:0 }
.bg-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; animation:bg-fade 24s infinite linear;
}
.bg-slide.s1{ background-image:url('/assets/img/bg-img1.jpeg'); animation-delay:0s }
.bg-slide.s2{ background-image:url('/assets/img/bg-img2.jpeg'); animation-delay:6s }
.bg-slide.s3{ background-image:url('/assets/img/bg-img3.jpeg'); animation-delay:12s }
.bg-slide.s4{ background-image:url('/assets/img/bg-img4.jpeg'); animation-delay:18s }
@keyframes bg-fade{
  0%{opacity:0} 8%{opacity:1} 25%{opacity:1} 33%{opacity:0} 100%{opacity:0}
}
.hero.bg-slider::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,12,38,.45), rgba(0,12,38,.65));
}
.hero-inner{ position:relative; z-index:2; color:#fff }
.hero-inner h1 { color:#ffffff; margin-bottom:1.5rem; }
.hero-img{ max-width:220px; height:auto; margin:1rem auto }

/* =========
   BUTTONS
   ========= */
.button, button[type="submit"]{
  background:var(--accent);
  color:var(--accent-contrast);
  padding:.8rem 1.4rem;
  font-size:1rem;
  font-weight:600;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:background .2s ease;
  text-decoration:none;
  display:inline-block;
}
.button:hover, button[type="submit"]:hover{ background:#1f247a }

/* =========
   OUR WORK
   ========= */
.work-section{ text-align:center; padding-block:2rem }
.work-gallery{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem }
.work-card{ text-align:center }
.work-img{
  width:275px; height:240px; object-fit:cover;
  border-radius:12px; display:block; margin:0 auto;
  border:1px solid var(--ring);
}
.work-card figcaption{ margin-top:.5rem; font-size:1rem; color:var(--muted) }

/* =========
   CLIENTS
   ========= */
.clients h2 { margin: 0 0 .5rem; }
.clients-intro { color: var(--muted); margin: 0 0 1rem; }

/* ===== Client logos strip ===== */
.client-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 1rem 0 2rem;
}

.client-logo {
  height: 80px;       /* adjust to consistent size */
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.client-logo:hover {
  filter: none;       /* full color on hover */
  opacity: 1;
}

.clients-controls { margin-bottom: .75rem; }
#client-search{
  width:100%; max-width:420px;
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding:.6rem .7rem; font-size:1rem;
}
.table-wrap{ overflow-x:auto; border:1px solid var(--ring); border-radius:12px; background: var(--surface); }
.clients-table{ width:100%; border-collapse: collapse; min-width:640px; }
.clients-table thead th{
  text-align:left; font-weight:700; padding:.75rem; border-bottom:1px solid var(--ring); color:#0b1a4a;
}
.clients-table tbody td{ padding:.65rem .75rem; border-top:1px solid var(--ring); vertical-align:top; }
.clients-table tbody tr:hover{ background: rgba(43,48,154,.05); }

/* =========
   SERVICES / FEATURES
   ========= */
.services h2{ margin:0 0 1rem }
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem }
.feature{
  background:var(--card); border:1px solid var(--ring); border-radius:var(--radius);
  padding:1rem; display:grid; align-content:start; gap:.5rem; min-height:180px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature:hover{ transform:translateY(-2px); border-color:var(--ring-strong); box-shadow:0 6px 18px rgba(15,23,42,.18); }
.feat-icon{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:10px; border:1px solid var(--ring);
  background:rgba(43,48,154,.08); font-size:20px;
}
.feature h3{ margin:.25rem 0 .1rem; line-height:1.25; color:#0b1a4a }
.feature p{ margin:0; color:var(--muted) }
.read-more{ display:inline-block; margin-top:.25rem; color:var(--accent); text-decoration:none; font-weight:600 }
.read-more:hover{ text-decoration:underline }

/* =========
   EQUIPMENT
   ========= */
.equip-layout{ display:grid; grid-template-columns:320px 1fr; gap:1rem; margin-bottom:2rem; }
@media (max-width:900px){ .equip-layout{ grid-template-columns:1fr } }
.equip-list{ background: var(--surface); border:1px solid var(--ring); border-radius: var(--radius); padding:1rem; }
.equip-heading{ margin:.2rem 0 .4rem; color:#0b1a4a }
.equip-items{ list-style:none; margin:0 0 .75rem; padding:0 }
.equip-items li{ margin-bottom:.35rem }
.equip-btn{
  width:100%; text-align:left;
  background: var(--card);
  border:1px solid var(--ring);
  border-radius:10px;
  padding:.55rem .65rem;
  cursor:pointer; font: inherit;
}
.equip-btn:hover{ border-color: var(--ring-strong); }
.equip-btn.is-active{
  outline: 2px solid rgba(43,48,154,.35); outline-offset: 1px; background:#eef3ff;
}
.equip-viewer{
  background: var(--surface); border:1px solid var(--ring); border-radius: var(--radius);
  padding:1rem; min-height:420px;
  display:grid; grid-template-rows: auto 1fr; gap:.75rem;
}
.viewer-header{ display:flex; align-items:center; gap:.75rem; justify-content:space-between; }
.viewer-frame{ border-radius: 12px; overflow:hidden; border:1px solid var(--ring); background:#fff; }
#equip-iframe{ display:block; width:100%; height:70vh; border:0 }

/* =========
   LOGGING SECTION
   ========= */
.logging-section{ padding-block:1.5rem 2rem }
.logging-inner{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start }
@media (max-width:900px){ .logging-inner{ grid-template-columns:1fr; gap:1.25rem } }
.check-list{ list-style:none; padding:0; margin:.5rem 0 0 }
.check-list li{ position:relative; padding-left:1.6rem; margin-bottom:.55rem }
.check-list li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700 }
.logging-slideshow{
  position:relative; height:700px; border-radius:16px; margin:2rem; overflow:hidden;
  border:1px solid var(--ring); background:var(--surface);
}
.logging-slideshow .slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; animation:log-fade 16s infinite linear; }
.logging-slideshow .s1{ background-image:url('/assets/img/graph-1.png'); animation-delay:0s }
.logging-slideshow .s2{ background-image:url('/assets/img/graph-2.png'); animation-delay:8s }
@keyframes log-fade{ 0%{opacity:0} 8%{opacity:1} 42%{opacity:1} 50%{opacity:0} 100%{opacity:0} }

/* =========
   CONTACT FORM
   ========= */
.form{ display:grid; gap:1rem; max-width:600px; margin:0 auto; }
.form-row{ display:flex; flex-direction:column }
.form-row label{ margin-bottom:.25rem; font-weight:600; color:var(--text) }
/* Center contact form heading */
#contact-form-title {
  text-align: center;
  margin-bottom: 1rem;
}
input,textarea{
  width:100%; background:var(--surface); border:1px solid var(--ring);
  border-radius:8px; padding:.6rem .7rem; font-size:1rem; color:var(--text);
}
/* Honeypot field (hidden from humans) */
.honeypot {
  position: absolute !important;
  left: -9999px !important;  /* move it off-screen */
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.honeypot label,
.honeypot input {
  visibility: hidden;
}
@media (min-width:700px){
  .form{ grid-template-columns:1fr 1fr }
  .form-row.full{ grid-column: span 2 }
}
#form-status{ margin-top:.5rem; font-size:.95rem }
#form-status.error{ color:#b00020 }
#form-status.success{ color:var(--accent) }

/* =========
   CTA
   ========= */
.cta{
  background:linear-gradient(90deg,rgba(43,48,154,.1),transparent);
  border:1px solid var(--ring); border-radius:var(--radius);
  padding:1.5rem; margin:2rem 0; text-align:center;
}

/* =========
   FOOTER (improved)
   ========= */
.site-footer{
  border-top:1px solid var(--ring);
  margin-top:3rem;
  background:var(--surface);
  padding:2rem 1rem;
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:1.5rem; padding-bottom:1rem;
}
.footer-heading{
  font-size:1.1rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:.5rem;
}
.site-footer p, .site-footer li, .site-footer address{ line-height:1.7 }
.site-footer a{
  color:var(--accent);
  text-decoration:none;
  transition:color .2s ease;
}
.site-footer a:hover{
  text-decoration:underline;
  color:#1f247a;
}
.site-footer address{ font-style:normal }
.copyright{
  text-align:center;
  color:var(--muted);
  padding-top:1rem;
  border-top:1px solid var(--ring);
  margin-top:1rem;
}
/* social icons */
.footer-social {
  text-align: center;
  margin: 1rem 0;
}
.footer-social a {
  display: inline-block;
}
.footer-social img {
  filter: grayscale(100%);
  transition: filter .2s ease;
}
.footer-social a:hover img {
  filter: none;
}

/* =========
   MOBILE NAV + FOOTER
   ========= */
@media (max-width:900px){
  .nav-toggle{
    display:grid; place-items:center;
    height:44px; width:44px; margin-left:auto;
    background:transparent; border:none; border-radius:8px; color:#fff;
  }
  .nav-toggle:hover{ background:rgba(255,255,255,.15) }
  .menu-icon{ display:block; height:28px; width:28px }

  .site-nav{ display:none; position:absolute; right:1rem; top:64px;
             background:#ffffff; border:1px solid var(--ring); border-radius:12px;
             box-shadow:0 12px 24px rgba(15,23,42,.18);
             z-index:1000; min-width:220px; padding:.25rem }
  .site-nav.open{ display:block }
  .site-nav ul{ display:grid; gap:.25rem; margin:0; padding:.25rem }
  .site-nav a{ color:var(--text); padding:.75rem 1rem; border-radius:10px; font-weight:600 }
  .site-nav a[aria-current="page"], .site-nav a:hover{ background:rgba(43,48,154,.08) }
  .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

  .footer-grid{ grid-template-columns:1fr; }
  .footer-grid > section{
    padding:1rem;
    border:1px solid var(--ring);
    border-radius:12px;
    background:#f9fafc;
  }
}