/*
Theme Name: JKS Systems
Theme URI: https://jks-systems.com
Author: JKS Systems
Description: Custom one-page WordPress theme for JKS Systems, based on the approved Readdy design.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jks-systems
*/

:root{--navy:#071b33;--blue:#0b3d91;--red:#c8102e;--red-dark:#a40d26;--charcoal:#162231;--slate:#526175;--light:#f5f7fa;--line:#dce2e9;--white:#fff;--shadow:0 16px 45px rgba(7,27,51,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;color:var(--charcoal);font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.65;background:#fff}body.admin-bar .site-header{top:32px}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1180px,calc(100% - 48px));margin:auto}.section{padding:96px 0}.eyebrow{margin:0 0 12px;color:var(--red);font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase}.section-title,h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif}.section-title{font-size:clamp(2.25rem,5vw,3.2rem);line-height:1.08;color:var(--navy);margin:0}.lead{font-size:1.08rem;color:var(--slate);max-width:720px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:6px;font-weight:750;transition:.2s;border:1px solid transparent;cursor:pointer}.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark);transform:translateY(-1px)}.btn-white{background:#fff;color:var(--red)}.btn-outline{border-color:rgba(255,255,255,.55);color:#fff}.btn-navy{background:var(--navy);color:#fff}.btn i{font-size:1.1rem}
.site-header{position:fixed;inset:0 0 auto;z-index:100;height:80px;transition:.25s}.site-header.scrolled{background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.header-inner{height:80px;display:flex;align-items:center;justify-content:space-between;width:min(1440px,calc(100% - 48px));margin:auto}.logo-wrap{display:flex;background:#fff;border-radius:4px;padding:3px 7px}.logo-wrap img{height:44px;width:auto;display:block}.nav{display:flex;align-items:center;gap:27px}.nav a{color:rgba(255,255,255,.9);font-size:.88rem;font-weight:650}.scrolled .nav a,.scrolled .header-phone{color:var(--navy)}.nav a:hover{color:var(--red)}.header-actions{display:flex;align-items:center;gap:15px}.header-phone{color:#fff;font-size:.88rem;font-weight:650}.menu-toggle,.mobile-nav{display:none}.menu-toggle{background:none;border:0;color:#fff;font-size:1.7rem}.scrolled .menu-toggle{color:var(--navy)}
.hero{min-height:780px;display:flex;align-items:center;color:#fff;position:relative;background-position:center;background-size:cover}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,15,29,.96) 0%,rgba(3,15,29,.83) 48%,rgba(3,15,29,.34) 100%)}.hero-content{position:relative;max-width:800px;padding-top:68px}.hero-kicker{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);border-radius:999px;padding:8px 13px;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:750}.hero h1{font-size:clamp(3rem,6vw,5rem);line-height:1.02;margin:22px 0}.hero h1 span{color:#f13b57}.hero p{font-size:1.16rem;color:#d5deea;max-width:700px}.hero-buttons{display:flex;gap:12px;margin-top:30px}.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;max-width:700px}.metric{border-left:1px solid rgba(255,255,255,.22);padding-left:16px}.metric strong{display:block;font:700 1.45rem "Space Grotesk"}.metric span{font-size:.77rem;color:#bdc9d7}
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-item{padding:23px 20px;border-right:1px solid var(--line);display:flex;gap:12px;align-items:center}.trust-item:last-child{border:0}.trust-item i{color:var(--red);font-size:1.35rem}.trust-item strong{display:block;color:var(--navy);font-size:.92rem}.trust-item small{color:var(--slate)}
.services{background:var(--light)}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:46px}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:27px;transition:.22s}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}.icon-box{width:48px;height:48px;display:grid;place-items:center;border-radius:7px;background:rgba(200,16,46,.1);color:var(--red);font-size:1.45rem}.card h3{margin:20px 0 8px;color:var(--navy);font-size:1.15rem}.card p{color:var(--slate);font-size:.9rem;margin:0}.card-link{display:inline-block;color:var(--navy);font-weight:750;font-size:.86rem;margin-top:18px}
.solutions-grid{display:grid;grid-template-columns:1fr .9fr;gap:72px;align-items:center}.steps{display:grid;gap:17px;margin:30px 0}.step{display:flex;gap:15px}.step-number{flex:0 0 36px;height:36px;border-radius:6px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:750}.step strong{color:var(--navy)}.step p{margin:3px 0;color:var(--slate);font-size:.9rem}.solution-image{position:relative}.solution-image:before{content:"";position:absolute;inset:-16px;background:linear-gradient(45deg,rgba(200,16,46,.12),transparent,rgba(11,61,145,.12));border-radius:18px}.solution-image img{position:relative;width:100%;height:560px;object-fit:cover;border-radius:12px}.cert-card{position:absolute;left:-26px;bottom:-28px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px;width:245px;box-shadow:var(--shadow)}.cert-card strong{color:var(--red)}.cert-card p{font-size:.78rem;margin:6px 0;color:var(--slate)}
.industries{background:var(--navy);color:#fff;position:relative;overflow:hidden}.industries:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(200,16,46,.24),transparent 38%),radial-gradient(circle at 80% 65%,rgba(11,61,145,.35),transparent 40%)}.industries .container{position:relative}.industries .section-title{color:#fff}.industries .lead{color:#c4cfdd}.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.industry-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:27px}.industry-card:hover{background:rgba(255,255,255,.09);border-color:rgba(200,16,46,.65)}.industry-card h3{font-size:1.15rem;margin:16px 0 7px}.industry-card p{color:#c4cfdd;font-size:.88rem;margin:0}
.about-grid{display:grid;grid-template-columns:.8fr 1.55fr;gap:65px}.quote{background:var(--light);border-left:4px solid var(--red);padding:20px;margin-top:28px;color:var(--navy);font-weight:700}.value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.value{border:1px solid var(--line);border-radius:8px;padding:23px}.value h3{font-size:1rem;color:var(--navy);margin:13px 0 5px}.value p{font-size:.86rem;color:var(--slate);margin:0}.value .icon-box{background:var(--navy);color:#fff;width:43px;height:43px}
.resources{background:var(--light)}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}.article{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}.article img{width:100%;height:210px;object-fit:cover;display:block}.article-body{padding:23px}.tag{font-size:.71rem;color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.article h3{color:var(--navy);font-size:1.2rem;line-height:1.25;margin:8px 0}.article p{color:var(--slate);font-size:.86rem}.cta{background:var(--red);color:#fff;padding:72px 0;background-size:cover;background-blend-mode:multiply}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px}.cta h2{font-size:clamp(2rem,4vw,2.7rem);line-height:1.1;margin:0}.cta p{color:rgba(255,255,255,.84);font-size:1.05rem}.cta-actions{display:flex;gap:12px;flex-shrink:0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.contact-list{display:grid;gap:24px;margin-top:35px}.contact-item{display:flex;gap:14px}.contact-item h3{font:700 1rem Inter;margin:0;color:var(--navy)}.contact-item p{font-size:.85rem;color:var(--slate);margin:3px 0}.contact-item a{color:var(--navy);font-weight:750;font-size:.88rem}.contact-meta{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding-top:27px;margin-top:32px}.form-card{background:var(--light);border:1px solid var(--line);padding:36px;border-radius:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{margin-bottom:16px}.field label{display:block;color:var(--navy);font-weight:650;font-size:.86rem;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid #cbd3dc;background:#fff;border-radius:6px;padding:12px}.field textarea{resize:vertical}.form-message{padding:12px;border-radius:6px;margin-bottom:14px}.form-message.success{background:#e8f6ed;color:#246b3d}.form-message.error{background:#fdebec;color:#9f182c}.site-footer{background:var(--navy);color:#b9c5d3;padding:62px 0 0}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:42px}.footer-logo{display:inline-flex;background:#fff;border-radius:6px;padding:10px}.footer-logo img{height:40px}.site-footer h4{color:#fff;margin:0 0 15px}.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.85rem}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;margin-top:45px;font-size:.8rem}
@media(max-width:1050px){.nav,.header-phone{display:none}.menu-toggle{display:block}.header-actions .btn{display:none}.mobile-nav{display:none;position:absolute;top:80px;left:0;right:0;background:#fff;padding:18px 24px;border-top:1px solid var(--line)}.mobile-nav.open{display:grid;gap:8px}.mobile-nav a{color:var(--navy);padding:9px 0;font-weight:650}.services-grid{grid-template-columns:repeat(2,1fr)}.solutions-grid,.about-grid{grid-template-columns:1fr}.industry-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){body.admin-bar .site-header{top:46px}.container,.header-inner{width:min(100% - 32px,1180px)}.section{padding:72px 0}.hero{min-height:720px}.hero:before{background:rgba(3,15,29,.83)}.hero h1{font-size:2.75rem}.hero-buttons,.cta-actions{flex-direction:column;align-items:stretch}.hero-metrics{grid-template-columns:1fr;gap:13px;margin-top:35px}.trust-grid{grid-template-columns:1fr 1fr}.trust-item:nth-child(2){border-right:0}.section-heading{display:block}.services-grid,.industry-grid,.value-grid,.article-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}.solutions-grid{gap:45px}.solution-image img{height:420px}.cert-card{display:none}.cta-inner{display:block}.cta-actions{margin-top:25px}.form-grid,.contact-meta{grid-template-columns:1fr}.form-card{padding:24px}.footer-grid{gap:28px}}
@media(max-width:480px){.trust-grid{grid-template-columns:1fr}.trust-item{border-right:0;border-bottom:1px solid var(--line)}.hero h1{font-size:2.35rem}}
/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100%;
  z-index: 1;
}

/* Style the subnav links */
.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}
/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}