/* ==========================================================================
   DELCON CONTROL — Industrial Fittings Website
   Design tokens: gunmetal/steel base, safety-orange accent, hex-cut motif
   ========================================================================== */

:root{
  --dark:        #121b24;
  --steel:       #223b4c;
  --steel-light: #3d5f74;
  --silver:      #c9ced2;
  --silver-2:    #eef0f1;
  --bg:          #f4f5f6;
  --ink:         #16212b;
  --accent:      #e0611f;
  --accent-dark: #b94c15;
  --white:       #ffffff;

  --font-display: 'Oswald', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Roboto Mono', monospace;

  --radius: 4px;
  --hex: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);

  /* Responsive spacing */
  --section-pad: 4rem 1.2rem;
  --container-pad: 0 1.2rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0;
  color:var(--dark);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
  margin-bottom:.6rem;
}
.section{ padding: var(--section-pad); }
.section-tight{ padding: 3rem 1.2rem; }
.section-title{ font-size: clamp(1.8rem, 4vw, 2.2rem); margin-bottom:1rem; }
.section-sub{ max-width:640px; color:#4b5b66; margin-bottom:2.5rem; }
.container{ max-width:1240px; margin:0 auto; padding: 0 1.2rem; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.8rem;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.9rem;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-accent{ background:var(--accent); color:var(--white); }
.btn-accent:hover{ background:var(--accent-dark); transform:translateY(-2px); }
.btn-outline{ border-color:var(--dark); color:var(--dark); background:transparent; }
.btn-outline:hover{ background:var(--dark); color:var(--white); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(18,27,36,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
main{
  /* Reduced gap as requested */
  padding-top: 35px;
}
.nav-wrap{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 1.2rem; /* Compact padding */
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand img{ height:5vh; border-radius:15px; } /* Slightly smaller logo */
.brand-mark{
  width:38px; height:38px;
  background:var(--accent);
  clip-path:var(--hex);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); color:var(--dark); font-weight:700; font-size:1rem;
}
.brand-name{
  font-family:var(--font-display); color:var(--white);
  font-size:1.25rem; letter-spacing:.03em; text-transform:uppercase;
}
.brand-name span{ color:var(--accent); }
.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  color:var(--silver); font-family:var(--font-display);
  font-size:.9rem; letter-spacing:.05em; text-transform:uppercase;
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--accent); }
.nav-cta{
  background:var(--accent); color:var(--white);
  padding:.5rem 1.2rem; border-radius:var(--radius);
  font-family:var(--font-display); font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
}
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.3rem; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--white); margin:5px 0; }

/* ---------------- Hero Slider ---------------- */
:root{
  --heroDotColor: rgba(255,255,255,.4);
  --heroDotActiveColor: #e0611f;
  --heroSlideSpeed: 1.2s;
}
.hero{
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 800;
  max-height: 560px;
  min-height: 220px;
  overflow: hidden;
  background: var(--dark);
}
.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity var(--heroSlideSpeed) ease;
}
.hero-slide.active{
  opacity: 1;
  z-index: 2;
}
.hero-slide::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--dark);
}
.hero-dots{
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: .6rem;
}
.hero-dots button{
  width: 34px;
  height: 5px;
  border: 0;
  border-radius: 2px;
  background: var(--heroDotColor);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.hero-dots button.active{
  background: var(--heroDotActiveColor);
  width: 46px;
}

/* ---------------- About ---------------- */
.about-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:3.5rem; align-items:center;
}
.about-visual{
  position:relative; aspect-ratio:4/5; background:var(--steel);
  clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%);
  overflow:hidden;
}
.about-visual img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.about-stats{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; background:rgba(18,27,36,.88);
  padding:1.1rem 1rem;
}
.about-stats div{ flex:1; text-align:center; color:var(--white); }
.about-stats strong{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--accent); }
.about-stats span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--silver); }
.about-copy p{ color:#3c4b56; margin-bottom:1.1rem; }
.about-points{ margin-top:1.6rem; display:grid; gap:.9rem; }
.about-points li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--ink); font-weight:500; }
.about-points li::before{
  content:''; flex:0 0 10px; height:10px; margin-top:.4rem;
  background:var(--accent); clip-path:var(--hex);
}

/* ---------------- Products Banner ---------------- */
.products-banner{
  position:relative; height:300px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.banner-slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity 1.4s ease;
}
.banner-slide.active{ opacity:1; }
.products-banner::before{
  content:''; position:absolute; inset:0; background:rgba(119,134,148,.72); z-index:1;
}
.banner-text{
  position:relative; z-index:2; text-align:center; color:var(--white);
}
.banner-text h2{ color:var(--white); font-size:clamp(2rem,5vw,3.2rem); }
.banner-text p{ color:var(--silver); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; margin-top:.5rem; }

/* ---------------- Products Grid ---------------- */
.products-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.6rem;
}
.product-card{
  background:var(--white); border:1px solid #e2e5e7; border-radius:var(--radius);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 30px -18px rgba(18,27,36,.35); }
.product-thumb{
  aspect-ratio:1/1; background:#FFFFFF;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.product-thumb img{ width:100%; height:100%; object-fit:contain; }
.product-thumb .ph-icon{
  width:56px; height:56px; background:var(--steel); clip-path:var(--hex);
}
.product-body{ padding:1.1rem 1.2rem 1.4rem; }
.product-body h3{ font-size:1rem; margin-bottom:.4rem; }
.product-body a.view{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.05em;
  color:var(--accent); text-transform:uppercase;
}
.products-filter{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.products-filter button{
  padding:.5rem 1.1rem; border-radius:999px; border:1px solid #d7dadc; background:var(--white);
  font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; transition:.15s ease;
}
.products-filter button.active,.products-filter button:hover{ background:var(--dark); color:var(--white); border-color:var(--dark); }

/* ---------------- Latest Products ---------------- */
.latest-section{ background:var(--steel); }
.latest-section .section-title,.latest-section .eyebrow{ color:var(--white); }
.latest-section .section-sub{ color:var(--silver); }
.latest-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.6rem; }
.latest-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden; position:relative;
}
.latest-badge{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  background:var(--accent); color:var(--white);
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em;
  padding:.3rem .6rem; border-radius:2px; text-transform:uppercase;
}
.latest-thumb{ aspect-ratio:4/3; background:var(--silver-2); }
.latest-thumb img{ width:100%; height:100%; object-fit:contain; }
.latest-body{ padding:1rem 1.2rem 1.3rem; }
.latest-body h4{ font-size:.98rem; margin-bottom:.5rem; }

/* ---------------- Reviews ---------------- */
.reviews-section{ overflow:hidden; }
.reviews-track-wrap{ overflow:hidden; position:relative; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.reviews-track{
  display:flex; gap:1.4rem; width:max-content;
  animation:scroll-left 32s linear infinite;
}
.reviews-section:hover .reviews-track{ animation-play-state:paused; }
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.review-card{
  width:320px; flex:0 0 auto;
  background:var(--white); border:1px solid #e2e5e7; border-radius:var(--radius);
  padding:1.6rem;
}
.review-stars{ color:var(--accent); letter-spacing:.15em; margin-bottom:.8rem; }
.review-card p{ color:#3c4b56; font-size:.92rem; margin-bottom:1rem; }
.review-author{ display:flex; align-items:center; gap:.7rem; }
.review-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--steel);
  color:var(--white); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.9rem;
}
.review-author strong{ display:block; font-size:.88rem; }
.review-author span{ font-size:.75rem; color:#7a8994; }

/* ---------------- Contact ---------------- */
.contact-section{ background:var(--dark); }
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:3rem; }
.contact-info .section-title,.contact-info .eyebrow{ color:var(--white); }
.contact-info p{ color:var(--silver); margin-bottom:2rem; max-width:420px; }
.contact-list{ display:grid; gap:1.3rem; }
.contact-list li{ display:flex; gap:1rem; align-items:flex-start; color:var(--silver); }
.contact-list .ic{
  flex:0 0 42px; height:42px; background:var(--steel); clip-path:var(--hex);
  display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:700; font-family:var(--font-mono); font-size:.75rem;
}
.contact-list strong{ display:block; color:var(--white); font-family:var(--font-display); letter-spacing:.03em; }
.contact-form{ background:var(--white); border-radius:var(--radius); padding:2rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-form label{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#4b5b66; display:block; margin-bottom:.4rem; }
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%; padding:.75rem .9rem; border:1px solid #d7dadc; border-radius:var(--radius);
  font-family:var(--font-body); font-size:.92rem; margin-bottom:1.1rem; background:var(--silver-2);
}
.contact-form textarea{ resize:vertical; min-height:110px; }
.contact-form .btn{ width:100%; justify-content:center; }
.form-note{ font-size:.78rem; color:#7a8994; margin-top:.8rem; text-align:center; }

/* ---------------- Footer ---------------- */
.site-footer{ background:var(--dark); color:var(--silver); border-top:1px solid rgba(255,255,255,.08); }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem;
  padding:4rem 1.2rem 2.5rem; max-width:1240px; margin:0 auto;
}
.footer-brand .brand-name{ font-size:1.3rem; }
.footer-brand p{ margin-top:1rem; font-size:.9rem; color:#8b9aa4; max-width:280px; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.3rem; }
.footer-social a{
  width:36px; height:36px; border:1px solid rgba(255,255,255,.15); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:.15s ease;
}
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); }
.footer-col h4{ color:var(--white); font-size:.95rem; margin-bottom:1.1rem; }
.footer-col ul{ display:grid; gap:.7rem; }
.footer-col a{ font-size:.88rem; color:#a9b6bf; transition:.15s ease; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.3rem 1.2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.8rem; color:#7a8994;
}
.footer-bottom a{ color:#a9b6bf; }

/* ---------------- Utility / reveal ---------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------------- Top Headline Bar ---------------- */
.top-headline-bar{
    background: #223b4c;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #c9ced2;
}
.top-headline-inner{
    max-width: 1240px;
    margin: 0 auto;
    padding: 3px 1.2rem; /* Reduced from 7px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.top-headline-left{
    display: flex;
    align-items: center;
    gap: 18px;
}
.top-headline-left a{
    color: #c9ced2;
    font-size: 12px;
    font-weight: 600;
    transition: 0.3s ease;
}
.top-headline-left a:hover{
    color: #e0611f;
}
.top-headline-right{
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.top-phone{
    color: #c9ced2;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: 0.3s ease;
}
.top-phone:hover{
    color: #e0611f;
}
.top-icon{
    color: #e0611f;
    font-size: 14px;
}
.top-email{
    background: #e0611f;
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: 0.3s ease;
    white-space: nowrap;
}
.top-email:hover{
    background: #b94c15;
}

/* ---------------- Valuable Clients ---------------- */
.valuable-clients-section {
    background: #ffffff;
    padding: 60px 0;
    overflow: hidden;
}
.valuable-clients-section .clients-subtitle {
    text-transform: uppercase;
    color: #757575;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 8px;
}
.valuable-clients-section .clients-title {
    font-weight: 700;
    color: #263238;
    margin-bottom: 10px;
    font-family: var(--font-display);
    text-transform: uppercase;
}
.valuable-clients-section .clients-description {
    color: #777;
    margin-bottom: 0;
}
.valuable-clients-section .clients-title-line {
    width: 70px;
    height: 3px;
    background: #757575;
    border-radius: 5px;
    margin: 15px auto 0;
}
.clients-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 45px;
}
.clients-slider::before,
.clients-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}
.clients-slider::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.clients-slider::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.clients-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clientsAutoScroll 25s linear infinite;
    will-change: transform;
}
.clients-slider:hover .clients-track {
    animation-play-state: paused;
}
.client-logo-box {
    width: 230px;
    height: 150px;
    margin: 0 15px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.client-logo-box:hover {
    transform: translateY(-6px);
    border-color: #bdbdbd;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.client-logo-box img {
    width: 100%;
    height: 75px;
    object-fit: contain;
    display: block;
    filter: grayscale(20%);
    opacity: 0.9;
    border-radius: 15px;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.client-logo-box:hover img {
    transform: scale(1.08);
    filter: grayscale(0%);
    opacity: 1;
}
@keyframes clientsAutoScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ================= RESPONSIVE BREAKPOINTS ================= */

/* Tablet (≤960px) */
@media (max-width: 960px){
  .about-grid,
  .contact-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .footer-top{
    grid-template-columns:1fr 1fr;
    gap:2rem;
  }
  .client-logo-box {
      width: 170px;
      height: 105px;
      margin: 0 10px;
      padding: 16px;
  }
  .client-logo-box img { height: 65px; }
  .clients-track { animation-duration: 22s; }
  .products-grid,
  .latest-grid{
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.2rem;
  }
  .section{ padding: 3.5rem 1.2rem; }
  .section-tight{ padding: 2.5rem 1.2rem; }
}

/* Mobile Large (≤720px) */
@media (max-width: 720px){
  main{
    padding-top: 35px; /* Same as desktop */
  }
  .nav-wrap{
    padding:.5rem 1rem;
  }
  .nav-links{
    position:fixed;
    top:70px; /* Adjust based on header height: 35px main padding + approximate header height? Better to set to actual header height; but with 35px padding, we want menu to start right below header. We'll set top: 60px (top bar ~25 + nav ~35). You can adjust manually if needed. */
    left:0; right:0; bottom:0;
    background:var(--dark);
    flex-direction:column;
    padding:2rem 1.5rem;
    gap:1.5rem;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index: 999;
    overflow-y:auto;
  }
  .nav-links.open{
    transform:translateX(0);
  }
  .nav-toggle{
    display:block;
  }
  .nav-cta{
    display:none;
  }
  .form-row{
    grid-template-columns:1fr;
  }
  .footer-top{
    grid-template-columns:1fr;
    padding:3rem 1rem 2rem;
  }
  .section{
    padding:3rem 1rem;
  }
  .section-tight{
    padding:2rem 1rem;
  }
  .container{
    padding: 0 1rem;
  }
  .hero{
    aspect-ratio:auto;
    height:65vh;
    min-height:280px;
    max-height:400px;
  }
  .hero-slide img{
    object-fit:cover;
  }
  .hero-dots{
    bottom:1rem;
  }
  .products-banner{
    height:auto;
    min-height:220px;
  }
  .top-headline-inner{
    padding:3px 1rem;
    justify-content:center;
  }
  .top-headline-left{
    display:none;
  }
  .top-headline-right{
    width:100%;
    justify-content:center;
    gap:12px;
  }
  .top-phone{
    font-size:10px;
  }
  .top-email{
    font-size:10px;
    padding:3px 8px;
  }
  .valuable-clients-section{
    padding:45px 0;
  }
  .clients-slider{
    margin-top:30px;
  }
  .client-logo-box{
    width:140px;
    height:90px;
    margin:0 8px;
    padding:12px;
    border-radius:10px;
  }
  .client-logo-box img{
    height:55px;
  }
  .clients-slider::before,
  .clients-slider::after{
    width:35px;
  }
  .clients-track{
    animation-duration:18s;
  }
  .products-grid,
  .latest-grid{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:1rem;
  }
  .product-body h3{
    font-size:.9rem;
  }
  .latest-body h4{
    font-size:.9rem;
  }
  .review-card{
    width:260px;
    padding:1.2rem;
  }
  .contact-form{
    padding:1.5rem;
  }
  .footer-brand img{
    height:150px;
  }
}

/* Mobile Small (≤480px) */
@media (max-width: 480px){
  .top-headline-right{
    justify-content:space-between;
  }
  .top-phone{
    font-size:9px;
  }
  .top-email{
    font-size:9px;
    padding:3px 6px;
  }
  .nav-wrap{
    padding:.4rem .8rem;
  }
  .brand img{
    height:4.5vh;
  }
  .products-grid,
  .latest-grid{
    grid-template-columns:1fr 1fr;
    gap:.8rem;
  }
  .product-thumb{
    aspect-ratio:1/1;
  }
  .section-title{
    font-size:1.6rem;
  }
  .hero{
    height:50vh;
    min-height:200px;
  }
  .hero-dots button{
    width:20px;
    height:4px;
  }
  .hero-dots button.active{
    width:28px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}