/* Base */
:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#5b6676;
  --primary:#0e4a92;
  --primary-2:#0a3471;
  --ring:#dfe7f5;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(10,33,70,.08), 0 1px 2px rgba(0,0,0,.05);
  --radius: 18px;
  --header-offset: 92px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{ margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--text); background:var(--bg) }
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section-head{ text-align:center; margin-bottom:24px;}
.section-head h2{font-size:34px; line-height:1.2; margin:0 0 8px}
.section-head p{color:var(--muted); margin:0}
.about-intro{max-width:900px;margin:10px auto 28px;color:#4b5563}

/* --- BLUE BACKGROUND FROM THE VERY TOP --- */
.masthead{
  padding-top: var(--header-offset);
  border-bottom-left-radius:32px;
  border-bottom-right-radius:32px;
}
.bg-dots{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.25) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(180deg, #1059a7, #0a3b7b);
  color:#fff;
}

/* Navbar */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;      /* above everything */
  background: transparent;
}
.nav-wrap{
  margin:14px auto 10px;
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; padding:10px 16px; border-radius:28px; box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand-name{display:none}
@media (min-width:640px){ .brand-name{display:inline} }

.nav{display:flex; align-items:center; gap:28px}
.nav a{color:#6b7280}
.nav .btn{margin-left:8px}

/* menu toggle for mobile */
.menu-toggle{display:inline-flex; flex-direction:column; gap:4px; background:transparent; border:0; cursor:pointer}
.menu-toggle span{width:22px;height:2px;background:#111;border-radius:2px;display:block}
@media (min-width:860px){ .menu-toggle{display:none} }
@media (max-width:859px){
  .nav{position:absolute; left:20px; right:20px; top:72px; background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:14px; display:none; flex-direction:column; align-items:flex-start}
  .nav.open{display:flex}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; border:1px solid #e5e7eb; font-weight:600}
.btn.primary{ border-color:transparent; background:linear-gradient(180deg,var(--primary),var(--primary-2)); color:#fff }
.btn.ghost{background:#0b4a9215}

/* HERO (no bg here; bg is on .masthead) */
.hero{ padding:120px 0 80px; color:#fff }
.hero .hero-inner{ text-align:left; }
.hero h1{ font-size:44px; line-height:1.15; margin:0 0 18px; }
.hero .lead{ max-width:800px; color:#e5efff; }

/* ABOUT */
.about{
  background: linear-gradient(#f5f7fb, #f1f3f7);
}

/* Two columns: cards (left, wider) + image (right) */
.about-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;   /* cards wider (left), image right */
  gap: 28px;
  align-items: stretch;                 /* make both columns equal height */
}

/* On mobile stack */
@media (max-width:980px){
  .about-grid{
    grid-template-columns: 1fr;
  }
}

/* Left column: three equal-height cards that fill the column height */
.about-cards{
  display: grid;
  grid-template-rows: repeat(3, 1fr);   /* 3 equal rows */
  gap: 18px;
  height: 100%;
}

.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;              /* vertically center card content */
}
.card h3{ margin: 0 0 8px; }
.card p{ margin: 0; color: var(--muted); }

/* Right column: image tile with full-cover centered overlay on hover */
.about-visual{
  position: relative;
  margin: 0;
  min-height: 560px;                    /* drives total row height; adjust to taste */
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;                     /* keep rounded corners for overlay */
}

/* Make the image fill the tile */
.about-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
}

/* Overlay (hidden by default) */
.about-visual figcaption{
  position: absolute;
  inset: 0;                             /* full-cover overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 24px;
  color: #fff;
  background: linear-gradient(180deg, rgba(8,24,56,.55), rgba(8,24,56,.35));
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;                 /* hover passes through */
}

/* Show overlay on hover and keyboard focus */
.about-visual:hover figcaption,
.about-visual:focus-within figcaption,
.about-visual:focus-visible figcaption{
  opacity: 1;
}

.about-visual figcaption strong{ font-size: 20px; letter-spacing: .2px; }
.about-visual figcaption span{ opacity: .95; }

/* PRODUCTS */
.products{ background:#fff }

/* 2×2 on desktop, 1×4 on mobile */
.card-grid{
  display:grid;
  gap:40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width:980px){
  .card-grid{ grid-template-columns: 1fr; }
}

/* Equal-height product cards with bottom-pinned CTA */
.product{
  display:flex;
  flex-direction:column;
}
.product h3{ margin:8px 0 8px; }
.product h4{ margin:12px 0 8px; font-size:14px; color:#475569; text-transform:uppercase; letter-spacing:.04em }
.list{ padding-left:18px; margin:0 0 16px; color:#555 }
.product-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
.product-icon{ color:var(--primary) }
.badge{ background:#e9f7ee; color:#2f7a46; border:1px solid #bfe5c8; padding:4px 10px; border-radius:999px; font-weight:600; font-size:12px }
.product .btn{ margin-top:auto; }  /* push CTA to the bottom */

/* CONTACT */
.contact{ background:#f6f7fb }
.contact-grid{
  display:grid;
  gap:20px;
  grid-template-columns: 1fr 1fr;  /* equal widths */
  align-items: stretch;            /* both columns same height */
}
.form .field{ display:flex; flex-direction:column; margin-bottom:12px; }
.form label{ font-weight:600; margin-bottom:6px; }
.form input, .form textarea{
  border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; outline:0; background:#fff;
}
.form input:focus, .form textarea:focus{ border-color:#c1d7ff; box-shadow:0 0 0 4px #dfe9ff; }
.form-note{ color:#6b7280; font-size:12px; }

/* Map column — no card bg; image fills entire column */
.sidebar{
  height:100%;
}

.sidebar .map{
  width:100%;
  height:100%;          /* matches form column height */
  object-fit:cover;     /* crop to fill nicely */
  display:block;
  border-radius:16px;   /* keep rounded corners like the form */
  margin:0;             /* remove previous margin-top */
}

/* FOOTER */
.footer{
  color:#fff;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #1059a7, #0a3b7b);
  margin-top:30px; padding-top:36px; border-top-left-radius:28px; border-top-right-radius:28px;
}
.foot-grid{ display:grid; gap:20px; grid-template-columns: 1.2fr .8fr }
@media (max-width:980px){ .foot-grid{ grid-template-columns:1fr } }
.foot-brand h3{ margin:6px 0 8px }
.foot-brand p{ margin:0; color:#e6efff }
.foot-contact h4{ margin:.2rem 0 .6rem }
.foot-contact ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.foot-contact li{ display:flex; gap:8px; align-items:flex-start; color:#eaf2ff }
.socials{ display:flex; gap:10px; margin-top:12px }
.socials a{ display:inline-flex; padding:8px; border-radius:999px; background:#0f3670 }
.copyright{ text-align:center; padding:12px 16px; color:#e6efff; border-top:1px solid rgba(255,255,255,.18); margin-top:26px }

/* Utilities */
.bg-dots-dark{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, #1059a7, #0a3b7b);
}
[id]{ scroll-margin-top: var(--header-offset); }
