/* =========================================================
   S K ENTERPRISES — Kitchen Care Products
   Design tokens grounded in the brand's own product-label
   language: navy + leaf-green, condensed label typography,
   and the diagonal "wave" band used across every SK label.
   ========================================================= */

:root{
  --navy: #0d2b4e;
  --navy-dark: #081b31;
  --navy-tint: #e8eef4;
  --leaf: #5f9c2d;
  --leaf-dark: #3f6b1c;
  --leaf-tint: #eaf3de;
  --citrus: #e8871e;
  --citrus-dark: #b9660f;
  --citrus-tint: #fbecd9;
  --bg: #f8f7f1;
  --surface: #ffffff;
  --text: #142031;
  --text-muted: #566072;
  --text-faint: #838c9a;
  --border: #e4e1d3;
  --radius: 14px;
  --radius-sm: 8px;
  --max: 1180px;
  --shadow: 0 10px 30px rgba(13,43,78,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
li{list-style:none;}

h1,h2,h3,h4{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  color:var(--navy);
  margin:0 0 0.5em;
  line-height:1.05;
}
h1{font-size:clamp(2.6rem,5vw,4.4rem); font-weight:800;}
h2{font-size:clamp(1.9rem,3.2vw,2.7rem);}
h3{font-size:1.4rem;}
p{margin:0 0 1em;color:var(--text-muted);}
.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:0.8rem;
  color:var(--leaf-dark);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;background:var(--citrus);display:inline-block;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.section{padding:88px 0;}
.section.tight{padding:56px 0;}
.section.alt{background:var(--surface);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  font-size:0.95rem;
  padding:14px 28px;border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--citrus);color:#fff;box-shadow:0 8px 20px rgba(232,135,30,0.35);}
.btn-primary:hover{background:var(--citrus-dark);}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-ghost{border-color:rgba(255,255,255,0.5);color:#fff;}
.btn-ghost:hover{background:#fff;color:var(--navy);}

/* ---------- Header / Nav ---------- */
.topbar{
  background:var(--navy-dark);color:#cfd9e4;font-size:0.82rem;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 28px;flex-wrap:wrap;gap:6px;}
.topbar a{color:#cfd9e4;}
.topbar .topbar-links{display:flex;gap:20px;align-items:center;}
.topbar .topbar-links i{margin-right:5px;}
.topbar .domain-link{color:#a9d17a;font-weight:600;}

header.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:var(--max);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:52px;height:52px;border-radius:12px;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;color:#fff;
  font-size:1.5rem;letter-spacing:0.02em;position:relative;overflow:hidden;
  flex:none;
}
.brand-mark::after{
  content:"";position:absolute;left:-10%;bottom:-30%;width:130%;height:60%;
  background:var(--leaf);transform:rotate(-8deg);
}
.brand-mark span{position:relative;z-index:2;}
.brand-text .brand-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.28rem;
  color:var(--navy);letter-spacing:0.01em;text-transform:uppercase;line-height:1.1;
}
.brand-text .brand-tag{font-size:0.72rem;color:var(--text-faint);letter-spacing:0.1em;text-transform:uppercase;}

.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:0.95rem;letter-spacing:0.03em;color:var(--text);
  padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .15s, color .15s;
}
.nav-links a:hover, .nav-links a.active{color:var(--leaf-dark);border-color:var(--citrus);}
.nav-cta{display:flex;align-items:center;gap:16px;}
.nav-phone{font-family:'Barlow Condensed',sans-serif;font-weight:700;color:var(--navy);font-size:1rem;}
.nav-phone i{color:var(--citrus);margin-right:6px;}

/* mobile nav toggle (checkbox hack, no JS needed) */
.nav-toggle{display:none;}
.nav-toggle-label{display:none;cursor:pointer;font-size:1.6rem;color:var(--navy);}

@media (max-width:920px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--surface);
    flex-direction:column;align-items:flex-start;padding:18px 28px;gap:16px;
    border-bottom:1px solid var(--border);
    display:none;
  }
  .nav-toggle:checked ~ .nav-links{display:flex;}
  .nav-toggle-label{display:block;}
  .nav-phone{display:none;}
  .topbar .topbar-links{gap:12px;}
}

/* ---------- Wave divider (signature element, echoes the product-label wave) ---------- */
.wave-divider{display:block;width:100%;line-height:0;margin:-2px 0;}
.wave-divider svg{width:100%;height:60px;display:block;}

/* ---------- Hero ---------- */
.hero{
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero .wrap{
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center;
  padding-top:76px;padding-bottom:76px;position:relative;z-index:2;
}
.hero .badge-since{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);
  padding:8px 16px;border-radius:999px;font-size:0.82rem;
  font-family:'Barlow Condensed',sans-serif;letter-spacing:0.08em;text-transform:uppercase;
  margin-bottom:22px;color:#dfe8f0;
}
.hero .badge-since strong{color:var(--citrus);font-weight:800;}
.hero h1{color:#fff;margin-bottom:20px;}
.hero h1 em{font-style:normal;color:var(--leaf);}
.hero p.lead{color:#cbd6e2;font-size:1.12rem;max-width:520px;margin-bottom:32px;}
.hero .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px;}
.hero .hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
.hero .hero-stats .stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:2rem;font-weight:800;color:#fff;
}
.hero .hero-stats .stat span{font-size:0.82rem;color:#a9b6c6;text-transform:uppercase;letter-spacing:0.05em;}
.hero-media{position:relative;}
.hero-media img{border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,0.35);}
.hero-media .float-badge{
  position:absolute;bottom:-18px;left:-18px;background:var(--citrus);color:#fff;
  padding:14px 20px;border-radius:14px;box-shadow:0 12px 24px rgba(232,135,30,0.4);
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;font-size:0.95rem;
}
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:56px;}
  .hero-media{order:-1;}
}

/* ---------- Cards / Grid ---------- */
.grid{display:grid;gap:26px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:920px){
  .grid.cols-3, .grid.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{grid-template-columns:1fr;}
}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card .card-img{aspect-ratio:4/3.4;overflow:hidden;background:var(--navy-tint);}
.card .card-img img{width:100%;height:100%;object-fit:cover;}
.card .card-body{padding:20px 22px 24px;}
.card .card-body h3{margin-bottom:6px;}
.card .card-tag{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:0.75rem;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--leaf-dark);
  background:var(--leaf-tint);padding:3px 10px;border-radius:999px;margin-bottom:10px;font-weight:700;
}
.card .card-sizes{
  display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;
}
.card .size-pill{
  font-family:'Barlow Condensed',sans-serif;font-size:0.82rem;font-weight:700;
  border:1.5px solid var(--navy);color:var(--navy);padding:3px 12px;border-radius:999px;
}

/* icon feature strip */
.feature{
  display:flex;gap:16px;align-items:flex-start;
}
.feature .icon-box{
  flex:none;width:52px;height:52px;border-radius:12px;background:var(--leaf-tint);
  display:flex;align-items:center;justify-content:center;color:var(--leaf-dark);font-size:1.4rem;
}
.feature h4{margin-bottom:4px;font-size:1.1rem;}
.feature p{margin:0;font-size:0.95rem;}

/* ---------- Stats / badges ---------- */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.stat-strip .stat-cell{background:var(--surface);padding:28px 20px;text-align:center;}
.stat-strip .stat-cell b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-size:2.3rem;font-weight:800;color:var(--navy);
}
.stat-strip .stat-cell span{font-size:0.82rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;}
@media (max-width:760px){.stat-strip{grid-template-columns:repeat(2,1fr);}}

/* ---------- Table (chemicals page) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
table{width:100%;border-collapse:collapse;font-size:0.95rem;}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top;}
th{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--navy);background:var(--navy-tint);font-size:0.85rem;
}
tr:last-child td{border-bottom:none;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--leaf-dark);color:#fff;border-radius:var(--radius);
  padding:48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;margin-bottom:6px;}
.cta-band p{color:#dbe9c9;margin:0;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;
}
.contact-line{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;}
.contact-line .icon-box{
  flex:none;width:44px;height:44px;border-radius:10px;background:var(--citrus-tint);
  display:flex;align-items:center;justify-content:center;color:var(--citrus-dark);font-size:1.15rem;
}
.contact-line h4{margin-bottom:2px;font-size:1rem;text-transform:none;font-family:'Inter',sans-serif;font-weight:700;color:var(--navy);}
.contact-line p{margin:0;font-size:0.95rem;}
.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);height:100%;min-height:340px;}
.map-frame iframe{width:100%;height:100%;min-height:340px;border:0;display:block;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-dark);color:#b9c4d1;}
.footer-top{padding:64px 0 40px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:#fff;font-size:0.95rem;letter-spacing:0.06em;margin-bottom:16px;}
.footer-grid a{display:block;color:#b9c4d1;font-size:0.92rem;margin-bottom:10px;transition:color .15s;}
.footer-grid a:hover{color:var(--citrus);}
.footer-about p{color:#a9b6c6;font-size:0.92rem;}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-brand .brand-mark{width:40px;height:40px;font-size:1.1rem;}
.footer-brand span{font-family:'Barlow Condensed',sans-serif;font-weight:800;color:#fff;font-size:1.1rem;letter-spacing:0.02em;text-transform:uppercase;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);padding:20px 0;font-size:0.85rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8ea0b3;
}
.footer-bottom a{color:#a9d17a;font-weight:600;}

/* breadcrumb / page header */
.page-header{background:var(--navy);color:#fff;padding:56px 0 44px;position:relative;overflow:hidden;}
.page-header h1{color:#fff;font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:10px;}
.page-header p{color:#c6d2de;max-width:640px;margin:0;}
.breadcrumb{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:0.06em;font-size:0.82rem;color:#9fb0c2;margin-bottom:14px;}
.breadcrumb a{color:var(--leaf);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}

.intro-copy p{font-size:1.02rem;}
.divider-dot{width:6px;height:6px;background:var(--citrus);border-radius:50%;display:inline-block;margin:0 10px;vertical-align:middle;}