
:root{--navy:#06284a;--blue:#0879c9;--cyan:#31c6df;--teal:#25b9b0;--pale:#eef9fd;--ink:#18334b;--muted:#657b8c;--line:#d8e8f0;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.6;background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}
.top{height:32px;background:var(--navy);color:#dcecf5;font-size:11px;display:flex;align-items:center;justify-content:flex-end}.top .container{text-align:right}
header{height:92px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}.nav{height:100%;display:flex;align-items:center;justify-content:space-between}.logo{height:82px;width:auto;object-fit:contain;display:block}
nav{display:flex;align-items:center;gap:29px;font-size:14px;font-weight:700;color:#2c4b63}nav a:hover{color:var(--blue)}.navbtn{padding:10px 18px;border-radius:22px;background:var(--blue);color:#fff}
.hero{min-height:650px;background-image:url('images/home-hero.jpg');background-size:cover;background-position:center;position:relative;display:flex;align-items:center;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,27,52,.94) 0%,rgba(3,27,52,.72) 43%,rgba(3,27,52,.06) 80%);animation:glow 5s ease-in-out infinite alternate}.hero:before{content:"";position:absolute;inset:-4%;background:inherit;animation:drift 16s ease-in-out infinite alternate}.hero>*{position:relative;z-index:2}.hero-copy{max-width:720px;padding:100px 0}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-weight:800;font-size:11px;color:var(--teal)}.hero .eyebrow{color:#7fe4e0}h1{font-size:clamp(44px,5.5vw,72px);line-height:1.03;letter-spacing:-1.8px;color:#fff;margin:12px 0 20px}h2{font-size:40px;line-height:1.12;color:var(--navy);margin:8px 0 15px}h3{color:var(--navy);line-height:1.2}.hero p{color:#e1edf4;font-size:18px;max-width:680px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-block;padding:13px 21px;border-radius:7px;background:var(--blue);color:#fff;font-weight:800}.btn.white{background:#fff;color:var(--navy)}
.section{padding:85px 0}.alt{background:var(--pale)}.intro{color:var(--muted);font-size:17px;max-width:800px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(6,40,74,.07)}.card img{width:100%;height:245px;object-fit:cover;display:block}.cardbody{padding:25px}.cardbody p{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.visual{width:100%;border-radius:18px;box-shadow:0 12px 35px rgba(6,40,74,.1);display:block}
.band{padding:65px 0;background:linear-gradient(110deg,#052849,#087494);color:#fff}.band h2{color:#fff}.band p{color:#d7e9f1}.band .visual{max-height:220px;object-fit:cover}
.pagehero{min-height:430px;display:flex;align-items:center;background-size:cover;background-position:center;position:relative}.pagehero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,33,60,.88),rgba(4,33,60,.28));}.pagehero .container{position:relative;z-index:2}.pagehero h1{max-width:720px}
.products-intro{display:grid;grid-template-columns:1fr 1fr;gap:25px}.product-section{padding:35px;border:1px solid var(--line);border-radius:16px;background:#fff}.product-section img{width:100%;height:235px;object-fit:cover;border-radius:12px;margin-bottom:18px}.product-section ul{padding-left:20px;color:var(--muted);columns:2}.product-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}.mini{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.mini img{width:100%;height:180px;object-fit:cover}.mini div{padding:15px}.tag{font-size:10px;letter-spacing:1px;font-weight:800;color:#087775;background:#e6f8f6;padding:5px 8px;border-radius:30px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:start}.contactinfo{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}.info{padding:20px;background:var(--pale);border:1px solid var(--line);border-radius:12px}.info strong{display:block;color:var(--navy);margin-bottom:5px}.contactimg{width:100%;height:330px;object-fit:cover;border-radius:16px}.form{padding:28px;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(6,40,74,.07)}input,textarea,select{width:100%;padding:13px;border:1px solid var(--line);border-radius:7px;font:inherit;margin-bottom:13px;background:#fff}textarea{min-height:145px}.form button{border:0;cursor:pointer}
footer{background:#041d34;color:#bdd0db;padding:48px 0 22px}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}.footergrid h3{color:#fff}.copyright{border-top:1px solid #214158;margin-top:35px;padding-top:18px;font-size:11px}
@keyframes drift{from{transform:scale(1);background-position:50% 50%}to{transform:scale(1.035);background-position:53% 48%}}@keyframes glow{from{opacity:.65}to{opacity:.95}}
@media(max-width:850px){.top{display:none}header{height:76px}.logo{height:62px}nav{gap:10px;font-size:11px}nav a:nth-child(1){display:none}.grid2,.grid3,.split,.products-intro,.contact,.footergrid{grid-template-columns:1fr}.product-list{grid-template-columns:1fr 1fr}.product-section ul{columns:1}.section{padding:60px 0}.hero{min-height:620px}.pagehero{min-height:360px}}
@media(max-width:520px){.navbtn{display:none}.product-list{grid-template-columns:1fr}.contactinfo{grid-template-columns:1fr}h2{font-size:32px}}

.about-hero{background-size:cover;background-repeat:no-repeat;background-position:center center;min-height:430px;}

.product-hero-clean{min-height:430px;background-size:cover;background-position:center center;background-repeat:no-repeat}
.product-hero-clean:after{display:none}
.product-hero-clean:before{display:none}
@media(max-width:850px){.product-hero-clean{min-height:300px}}


/* ===== MOBILE OPTIMIZATION ===== */
@media (max-width: 850px) {
  html, body { width:100%; overflow-x:hidden; }
  header { height:74px; }
  .nav, .top { display:none; }
  .header-inner, .container { width:min(92%, 680px); margin:0 auto; }
  .logo { height:60px; width:auto; max-width:220px; object-fit:contain; }

  /* Mobile navigation */
  .mobile-menu-toggle {
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid rgba(17,126,185,.22);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    font-size:24px;
    color:#0c5f91;
  }
  .mobile-menu {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:74px;
    z-index:1000;
    background:rgba(255,255,255,.98);
    box-shadow:0 12px 30px rgba(10,45,75,.12);
    padding:12px 4%;
  }
  .mobile-menu.open { display:block; }
  .mobile-menu a {
    display:block;
    padding:14px 10px;
    color:#123;
    text-decoration:none;
    border-bottom:1px solid #edf2f6;
    font-weight:600;
  }

  /* Hero images: preserve clarity and avoid desktop cropping */
  .hero, .pagehero, .product-hero-clean {
    min-height:0 !important;
    height:auto !important;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;
    background-color:#f7fbfe !important;
  }
  .hero { padding:36px 0 30px; }
  .pagehero { padding:0; }
  .product-hero-clean { aspect-ratio:2172/605; width:100%; }

  .hero h1, .pagehero h1 { font-size:clamp(32px,9vw,48px); line-height:1.05; }
  .hero p, .pagehero p { font-size:16px; line-height:1.55; }
  .hero .actions, .actions { flex-wrap:wrap; gap:10px; }
  .actions a, .btn { min-height:46px; display:inline-flex; align-items:center; justify-content:center; }

  /* Cards and content */
  .grid, .cards, .two-col, .split, .product-grid, .feature-grid {
    grid-template-columns:1fr !important;
  }
  .card, .product-card { width:100%; }
  .card img, .product-card img, .visual {
    width:100%;
    height:auto;
    object-fit:contain;
  }
  section { padding-top:44px; padding-bottom:44px; }

  /* Contact */
  form { width:100%; }
  input, textarea, select { font-size:16px; } /* avoids iOS zoom */
  .contact-grid { grid-template-columns:1fr !important; }

  footer { text-align:center; }
}

/* Hidden by default on desktop */
.mobile-menu-toggle, .mobile-menu { display:none; }
