/* ==========================================================================
   ABTAHI ENGINEERING TECHNOLOGY — Stylesheet
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #12293F;
  --teal:       #1C66AE;
  --teal-dark:  #124876;
  --teal-pale:  #E8F1FA;
  --amber:      #DA7B2D;
  --amber-dark: #B8611E;
  --cream:      #F5F7FA;
  --white:      #FFFFFF;
  --line:       #DCE3EA;
  --ink-soft:   #4E6072;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --container: 1200px;
  --radius: 6px;
  --shadow: 0 12px 32px -16px rgba(14,42,40,0.25);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
.container{
  width:100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
section{ padding: 88px 0; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 16px; color: var(--ink); }
p{ margin:0 0 16px; color: var(--ink-soft); }
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background: var(--amber);
  display:inline-block;
}
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(24px, 2.8vw, 34px); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight:600;
  font-size:15px;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--teal); color: var(--white); }
.btn-primary:hover{ background: var(--teal-dark); }
.btn-amber{ background: var(--amber); color: var(--ink); }
.btn-amber:hover{ background: var(--amber-dark); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--white); }
.btn-outline-light{ background: transparent; color: var(--white); border-color: rgba(255,255,255,0.5); }
.btn-outline-light:hover{ background: var(--white); color: var(--teal-dark); }

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar{
  background: var(--ink);
  color: rgba(255,255,255,0.75);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-top:9px;
  padding-bottom:9px;
  gap: 16px;
}
.topbar a{ color: inherit; }
.topbar .topbar-contact{ display:flex; align-items:center; gap:22px; }
.topbar .topbar-contact span{ display:flex; align-items:center; gap:7px; }
.topbar .topbar-social{ display:flex; align-items:center; gap:14px; }
.topbar .topbar-social a{ opacity:.85; }
.topbar .topbar-social a:hover{ opacity:1; color: var(--amber); }
.topbar svg{ width:14px; height:14px; flex-shrink:0; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top:0;
  z-index: 100;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  padding-bottom:16px;
  gap: 20px;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family: var(--font-display);
  font-weight:700;
  font-size:21px;
  color: var(--teal-dark);
}
.logo .mark{
  width:42px; height:42px;
  border-radius: 50%;
  background: var(--teal);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.logo .mark svg{ width:22px; height:22px; }
.logo small{
  display:block;
  font-family: var(--font-mono);
  font-weight:400;
  font-size:10.5px;
  letter-spacing:.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.brand-logo{ height:46px; width:auto; display:block; }
.footer-brand .logo{
  background: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  display:inline-flex;
}
.footer-brand .logo .brand-logo{ height:40px; }

.main-nav{ display:flex; align-items:center; gap: 36px; }
.main-nav a{
  font-weight:600;
  font-size:14.5px;
  color: var(--ink);
  position:relative;
  padding: 4px 0;
}
.main-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background: var(--amber);
  transition: right .2s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ right:0; }
.main-nav a.active{ color: var(--teal-dark); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; padding:8px;
}
.menu-toggle span{ width:24px; height:2px; background: var(--ink); display:block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background: linear-gradient(155deg, var(--teal-dark) 0%, #0C3155 60%, #0A2745 100%);
  color: var(--white);
  position:relative;
  overflow:hidden;
  padding: 90px 0 0;
}
.hero-bg-art{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0.16;
  pointer-events:none;
}
.hero-bg-art svg{ width:100%; height:100%; }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 82% 15%, rgba(218,123,45,0.18), transparent 45%);
  z-index:1;
  pointer-events:none;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-copy .eyebrow{ color: var(--amber); }
.hero-copy .eyebrow::before{ background: var(--amber); }
.hero h1{
  color: var(--white);
  font-size: clamp(30px, 4vw, 48px);
  line-height:1.08;
  letter-spacing: -0.01em;
}
.hero h1 em{ color: var(--amber); font-style: normal; }
.hero-copy p{ color: rgba(255,255,255,0.78); font-size:17px; max-width:520px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }

.hero-stats{
  display:flex;
  gap: 40px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-stats div strong{
  display:block;
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--amber);
}
.hero-stats div span{
  font-family: var(--font-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.65);
}

.hero-visual{ position:relative; padding-bottom: 40px; }
.pulse-wrap{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 28px 24px 22px;
}
.pulse-wrap .pulse-label{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--amber);
  display:flex; justify-content:space-between;
  margin-bottom: 10px;
}
#pulse-line{ width:100%; height:auto; display:block; }
#pulse-line path{
  fill:none;
  stroke: var(--amber);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 3.6s ease-in-out infinite;
}
@keyframes draw{
  0%{ stroke-dashoffset: 1000; }
  55%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -1000; }
}
.hero-badges{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;
}
.hero-badges span{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  border:1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  padding:6px 12px;
  border-radius:100px;
}
@media (prefers-reduced-motion: reduce){
  #pulse-line path{ animation:none; stroke-dashoffset:0; }
}

/* Section divider (signature pulse motif) */
.pulse-divider{ display:block; width:100%; height:34px; }
.pulse-divider path{ fill:none; stroke: var(--teal); stroke-width:2; opacity:.35; }
.pulse-divider.on-dark path{ stroke: var(--amber); opacity:.5; }

/* ==========================================================================
   Trust strip
   ========================================================================== */
.trust-strip{
  background: var(--ink);
  padding: 22px 0;
}
.trust-strip .container{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 36px;
  align-items:center;
  justify-content:center;
}
.trust-strip span{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color: rgba(255,255,255,0.6);
  text-transform:uppercase;
}
.trust-strip strong{ color: var(--amber); }

/* ==========================================================================
   Products
   ========================================================================== */
.products{ background: var(--cream); }
.filter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 36px;
}
.filter-tabs button{
  background: var(--white);
  border:1px solid var(--line);
  color: var(--ink-soft);
  font-size:13px;
  font-weight:600;
  padding:9px 18px;
  border-radius: 100px;
  transition: all .15s ease;
}
.filter-tabs button:hover{ border-color: var(--teal); color: var(--teal-dark); }
.filter-tabs button.active{ background: var(--teal); color:var(--white); border-color:var(--teal); }

.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.product-card{
  background: var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  display:flex;
  flex-direction:column;
}
.product-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card .thumb{
  aspect-ratio: 4/3;
  background: var(--teal-pale);
  display:flex; align-items:center; justify-content:center;
  color: var(--teal);
  position:relative;
  overflow:hidden;
}
.js-thumb-clickable{ cursor:pointer; }
.js-thumb-clickable::after{
  content:"Get a Quote";
  position:absolute; inset:auto 0 0 0;
  padding:10px 12px;
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  color:#fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
  transform: translateY(100%);
  transition: transform .2s ease;
  pointer-events:none;
}
.js-thumb-clickable:hover::after,
.js-thumb-clickable:focus-visible::after{ transform: translateY(0); }
.js-thumb-clickable:focus-visible{ outline: 2px solid var(--amber); outline-offset:-2px; }
.product-card .thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transition: transform .3s ease;
}
.product-card:hover .thumb img{ transform: scale(1.05); }
.product-card .thumb svg{ width:46px; height:46px; }
.product-card .thumb .tag{
  position:absolute; top:10px; left:10px;
  font-family: var(--font-mono);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  background: var(--white);
  color: var(--teal-dark);
  padding:3px 9px;
  border-radius:100px;
}
.product-card .body{ padding: 16px 18px 20px; flex:1; display:flex; flex-direction:column; }
.product-card h3{ font-size:15.5px; margin-bottom:5px; }
.product-card p{ font-size:12.5px; margin-bottom:12px; flex:1; line-height:1.5; }
.product-card .more{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.05em;
  color: var(--teal-dark);
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; padding:0; cursor:pointer;
}

/* ==========================================================================
   Quote modal
   ========================================================================== */
.quote-overlay{
  display:none;
  position:fixed; inset:0;
  background: rgba(18,41,63,0.55);
  z-index: 500;
  align-items:center;
  justify-content:center;
  padding: 20px;
}
.quote-overlay.open{ display:flex; }
.quote-modal{
  background: var(--white);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y:auto;
  padding: 32px 30px;
  position:relative;
  box-shadow: 0 24px 60px -20px rgba(18,41,63,0.4);
}
.quote-modal .quote-close{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px;
  border:none; background: var(--cream);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.quote-modal .quote-close svg{ width:16px; height:16px; }
.quote-modal .eyebrow{ margin-bottom:6px; }
.quote-modal h3{ font-size:19px; margin-bottom:4px; }
.quote-modal .quote-product{
  font-family: var(--font-mono);
  font-size:12.5px;
  color: var(--teal-dark);
  background: var(--teal-pale);
  display:inline-block;
  padding:5px 12px;
  border-radius:100px;
  margin-bottom:18px;
}
.quote-modal .form-group{ margin-bottom:16px; }
.quote-modal button[type="submit"]{ width:100%; margin-top:4px; }
.product-card .more svg{ width:13px; height:13px; transition: transform .15s ease; }
.product-card:hover .more svg{ transform: translateX(3px); }

.products-more{ text-align:center; margin-top:44px; }

/* ==========================================================================
   Why choose us
   ========================================================================== */
.why{ background: var(--teal-pale); }
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.why-card{
  background: var(--white);
  padding: 32px 28px;
}
.why-card .icon{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--teal-dark);
  color: var(--white);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.why-card .icon svg{ width:22px; height:22px; }
.why-card h3{ font-size:16.5px; margin-bottom:8px; letter-spacing:.01em; }
.why-card p{ font-size:14px; margin-bottom:0; }

/* ==========================================================================
   Video / promo band
   ========================================================================== */
.promo{
  background: var(--ink);
  color: var(--white);
  position:relative;
}
.promo .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items:center;
}
.promo .eyebrow{ color: var(--amber); }
.promo .eyebrow::before{ background: var(--amber); }
.promo h2{ color: var(--white); }
.promo p{ color: rgba(255,255,255,0.72); }
.video-frame{
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.15);
  background: linear-gradient(135deg, rgba(20,107,100,.5), rgba(14,42,40,.9));
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.video-frame .play-btn{
  width:64px; height:64px;
  border-radius:50%;
  background: var(--amber);
  color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  border:none;
  transition: transform .15s ease;
}
.video-frame .play-btn:hover{ transform: scale(1.08); }
.video-frame .play-btn svg{ width:22px; height:22px; margin-left:3px; }
.video-frame video{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* ==========================================================================
   Story
   ========================================================================== */
.story .container{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items:center;
}
.story-visual{
  aspect-ratio: 4/3.2;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--teal-pale), var(--white));
  border: 1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.story-visual svg{ position:absolute; inset:0; width:100%; height:100%; }
.story-stats{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  margin-top: 28px;
}
.story-stats div{
  border-left: 2px solid var(--amber);
  padding-left: 14px;
}
.story-stats strong{ display:block; font-family:var(--font-display); font-size:26px; color:var(--teal-dark); }
.story-stats span{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; }

/* ==========================================================================
   News
   ========================================================================== */
.news-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.news-card{
  background: var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.news-card .thumb{
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  position:relative;
}
.news-card .thumb::after{
  content: attr(data-cat);
  position:absolute; bottom:12px; left:12px;
  font-family: var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  background: rgba(255,255,255,0.92);
  color: var(--teal-dark);
  padding:4px 10px;
  border-radius:100px;
}
.news-card .body{ padding:20px 22px 24px; }
.news-card .date{
  font-family: var(--font-mono);
  font-size:11.5px;
  color: var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:10px;
  display:block;
}
.news-card h3{ font-size:17.5px; line-height:1.35; margin-bottom:0; }

/* ==========================================================================
   Contact / Newsletter band
   ========================================================================== */
.contact-band{
  background: var(--amber);
}
.contact-band .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
  flex-wrap:wrap;
  padding-top:48px;
  padding-bottom:48px;
}
.contact-band h2{ margin-bottom:6px; font-size: clamp(22px,2.6vw,30px); }
.contact-band p{ color: rgba(14,42,40,0.75); margin-bottom:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--ink); color: rgba(255,255,255,0.7); }
.footer-top{
  padding: 64px 0 40px;
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.footer-brand .logo{ margin-bottom:16px; }
.footer-brand p{ color: rgba(255,255,255,0.55); font-size:14px; max-width:280px; }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  width:36px; height:36px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ background: var(--amber); color: var(--ink); border-color: var(--amber); }
.footer-social svg{ width:15px; height:15px; }

.site-footer h4{
  color: var(--white);
  font-family: var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:20px;
}
.footer-links li{ margin-bottom:12px; }
.footer-links a{ font-size:14.5px; color: rgba(255,255,255,0.65); }
.footer-links a:hover{ color: var(--amber); }
.footer-contact li{
  font-size:14px;
  color: rgba(255,255,255,0.65);
  margin-bottom:14px;
  display:flex;
  gap:10px;
}
.footer-contact svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color: var(--amber); }

.newsletter-form{ display:flex; gap:0; margin-top:16px; max-width:340px; }
.newsletter-form input{
  flex:1;
  padding:12px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-right:none;
  background: rgba(255,255,255,0.05);
  color: var(--white);
  border-radius: var(--radius) 0 0 var(--radius);
  font-size:14px;
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,0.4); }
.newsletter-form button{
  padding: 0 20px;
  background: var(--amber);
  color: var(--ink);
  border:none;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-weight:600;
  font-size:14px;
}
.newsletter-form button:hover{ background: var(--amber-dark); }
.form-note{ font-size:12px; color: rgba(255,255,255,0.4); margin-top:8px; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
  font-family: var(--font-mono);
  font-size:12px;
  color: rgba(255,255,255,0.45);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.footer-bottom a:hover{ color: var(--amber); }

.whatsapp-float{
  position:fixed;
  bottom:24px; right:24px;
  width:56px; height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.4);
  z-index: 200;
}
.whatsapp-float svg{ width:28px; height:28px; color:#fff; }

/* ==========================================================================
   Inner page header (About / Products / Contact)
   ========================================================================== */
.page-header{
  background: var(--teal-dark);
  color: var(--white);
  padding: 64px 0 56px;
  text-align:center;
}
.page-header .eyebrow{ color: var(--amber); justify-content:center; }
.page-header .eyebrow::before{ background: var(--amber); }
.page-header h1{ color: var(--white); font-size: clamp(26px, 3.4vw, 40px); margin-bottom:10px; }
.breadcrumb{
  font-family: var(--font-mono);
  font-size:12.5px;
  color: rgba(255,255,255,0.6);
}
.breadcrumb a:hover{ color: var(--amber); }

/* Generic two-col content block used on About / Contact */
.split-block .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:center;
}
.split-block.reverse .container{ direction: rtl; }
.split-block.reverse .container > *{ direction: ltr; }

.timeline{ margin-top: 12px; }
.timeline li{
  display:flex; gap:18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.timeline li:last-child{ border-bottom:none; }
.timeline .yr{
  font-family: var(--font-mono);
  font-weight:600;
  color: var(--teal-dark);
  min-width:64px;
}
.timeline h4{ margin-bottom:4px; font-size:16px; }
.timeline p{ margin-bottom:0; font-size:14px; }

.value-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:24px;
}
.value-card{
  padding:28px;
  background: var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius);
}
.value-card .icon{
  width:40px; height:40px;
  border-radius:50%;
  background: var(--teal-pale);
  color: var(--teal-dark);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.value-card .icon svg{ width:20px; height:20px; }
.value-card h3{ font-size:16px; margin-bottom:8px; }
.value-card p{ font-size:14px; margin-bottom:0; }

/* Contact page */
.contact-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
}
.contact-info-card{
  background: var(--teal-dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 36px 30px;
}
.contact-info-card h3{ color:var(--white); font-size:18px; }
.contact-info-card ul{ margin-top:20px; }
.contact-info-card li{ display:flex; gap:12px; margin-bottom:18px; font-size:14.5px; color: rgba(255,255,255,0.85); }
.contact-info-card svg{ width:18px; height:18px; color: var(--amber); flex-shrink:0; margin-top:2px; }
.map-frame{
  margin-top:24px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.15);
}
.map-frame iframe{ width:100%; height:180px; border:0; filter: grayscale(0.3); }

.contact-form{
  background: var(--white);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.form-group{ margin-bottom:20px; }
.form-group label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:7px;
  color: var(--ink);
}
.form-group input, .form-group select, .form-group textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size:14.5px;
  background: var(--cream);
}
.form-group textarea{ resize:vertical; min-height:120px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline: 2px solid var(--teal);
  outline-offset:1px;
  background: var(--white);
}
.form-status{ font-size:14px; margin-top:8px; display:none; }
.form-status.ok{ color: var(--teal-dark); display:block; }
.form-status.err{ color:#B33A3A; display:block; }

/* FAQ accordion (used on faq page if present) */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%;
  background:none; border:none;
  text-align:left;
  padding: 22px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-display);
  font-size:17px;
  font-weight:600;
  color: var(--ink);
}
.faq-q svg{ width:18px; height:18px; flex-shrink:0; transition: transform .2s ease; color: var(--teal); }
.faq-item.open .faq-q svg{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a{ max-height: 300px; }
.faq-a p{ padding-bottom:22px; margin-bottom:0; font-size:14.5px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px){
  .topbar .topbar-contact span:nth-child(3),
  .topbar .topbar-contact span:nth-child(4){ display:none; }
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; }
  .promo .container{ grid-template-columns:1fr; }
  .story .container{ grid-template-columns:1fr; }
  .split-block .container{ grid-template-columns:1fr; }
  .split-block.reverse .container{ direction:ltr; }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .news-grid{ grid-template-columns: repeat(2,1fr); }
  .value-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }

  .main-nav.mobile-open{
    display:flex;
    position:absolute;
    top:100%; left:0; right:0;
    background: var(--cream);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding: 8px 24px 20px;
  }
  .main-nav.mobile-open a{ width:100%; padding:12px 0; border-bottom:1px solid var(--line); }
}

@media (max-width: 700px){
  section{ padding: 60px 0; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .why-grid{ grid-template-columns: 1fr; }
  .news-grid{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .hero-stats{ gap:24px; flex-wrap:wrap; }
  .footer-top{ grid-template-columns: 1fr; padding-top:48px; }
  .contact-band .container{ flex-direction:column; text-align:center; }
  .footer-bottom .container, .footer-bottom{ flex-direction:column; text-align:center; }
}

@media (max-width: 480px){
  .product-grid{ grid-template-columns: 1fr 1fr; gap:14px; }
  .container{ padding: 0 16px; }
  .hero{ padding-top:64px; }
}

/* ==========================================================================
   Mobile polish — typography, tap targets, small-phone layout
   ========================================================================== */
@media (max-width: 960px){
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{ font-size:14px; }
  .btn{ padding:13px 22px; font-size:14px; }
  .header-actions .btn{ padding:11px 16px; font-size:12.5px; }
  a, button, .menu-toggle, .filter-tabs button{ min-height:40px; }
  .filter-tabs button{ padding:9px 14px; font-size:12px; }
}

@media (max-width: 640px){
  .section-head h2{ font-size: clamp(21px, 5.5vw, 27px); }
  .section-head p{ font-size:13.5px; }
  .hero h1{ font-size: clamp(25px, 7.5vw, 34px); line-height:1.15; }
  .hero-sub{ font-size:13.5px; }
  .hero-eyebrow{ font-size:11px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; text-align:center; }
  .hero-stats{ gap:16px 22px; }
  .hero-stats div strong{ font-size:21px; }
  .hero-stats div span{ font-size:10px; }
  .page-header h1{ font-size: clamp(22px, 6.5vw, 28px); }
  .topbar{ font-size:11px; }
  .topbar .topbar-contact{ overflow-x:auto; white-space:nowrap; gap:14px; -webkit-overflow-scrolling:touch; }
  .topbar .topbar-contact span{ flex-shrink:0; }
  .filter-tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin:0 -16px 24px; padding-left:16px; padding-right:16px; }
  .filter-tabs button{ flex-shrink:0; }

  /* Product cards — smaller, tighter type for mobile */
  .product-card .thumb .tag{ font-size:8.5px; padding:2px 7px; top:8px; left:8px; }
  .product-card h3{ font-size:13.5px; margin-bottom:4px; letter-spacing:-.005em; }
  .product-card p{ font-size:11.5px; line-height:1.45; margin-bottom:10px; }
  .product-card .body{ padding:13px 14px 15px; }
  .product-card .more{ font-size:10px; }
  .js-thumb-clickable::after{ transform: translateY(0); font-size:9.5px; padding:7px 9px; background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.05)); }

  .contact-form, .contact-info-card{ padding:24px 20px; }
  .footer-top{ gap:36px; }
  .why-card{ padding:24px 20px; }
  .why-card h3{ font-size:14.5px; }
  .why-card p{ font-size:12.5px; }
}

@media (max-width: 400px){
  .product-grid{ grid-template-columns: 1fr 1fr; gap:10px; }
  .product-card .thumb{ aspect-ratio: 4/3; }
  .product-card h3{ font-size:12.5px; }
  .product-card p{ font-size:11px; }
  .product-card .body{ padding:11px 12px 13px; }
}