/* ==========================================================================
   IRONFORGE INDUSTRIAL — css.css
   Shared stylesheet for all pages (home + inner pages reuse header/footer)
   ========================================================================== */

:root{
  /* ---- Color tokens ---- */
  --c-navy:        #121A24;   /* primary dark / header / footer */
  --c-navy-2:      #1C2A3A;   /* secondary dark panel */
  --c-steel:       #43566B;   /* mid steel blue-gray */
  --c-accent:      #FF6A13;   /* industrial safety orange — signature */
  --c-accent-dark: #DB5A0A;
  --c-amber:       #FFB300;   /* secondary accent for small highlights */
  --c-bg:          #FFFFFF;
  --c-bg-alt:      #F2F4F6;   /* alt section gray */
  --c-line:        #E1E5E9;
  --c-text:        #1B222B;
  --c-text-mute:   #5B6672;
  --c-white:       #FFFFFF;

  /* ---- Type ---- */
  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', -apple-system, Segoe UI, sans-serif;
  --f-mono:    'Roboto Mono', monospace;

  /* ---- Layout ---- */
  --wrap: 1240px;
  --radius: 2px;
  --shadow-1: 0 6px 24px rgba(18,26,36,.08);
  --shadow-2: 0 20px 50px rgba(18,26,36,.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--c-text);
  background:var(--c-bg);
  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; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; letter-spacing:.02em; margin:0; text-transform:uppercase; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---- focus visibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
}

/* ==========================================================================
   TOP BAR + HEADER
   ========================================================================== */
.topbar{
  background:var(--c-navy);
  color:#AEB9C4;
  font-size:12.5px;
  font-family:var(--f-mono);
}
.topbar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  height:38px;
}
.topbar-links a{ margin-left:18px; color:#AEB9C4; transition:color .2s var(--ease); }
.topbar-links a:hover{ color:var(--c-accent); }
.topbar-contact span{ margin-right:22px; }
.topbar-contact i{ color:var(--c-accent); margin-right:6px; }

.site-header{
  background:var(--c-white);
  border-bottom:1px solid var(--c-line);
  position:sticky; top:0; z-index:500;
  box-shadow:0 2px 0 rgba(0,0,0,.02);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.logo{
  font-family:var(--f-display);
  font-size:26px; font-weight:700; letter-spacing:.03em;
  color:var(--c-navy);
  display:flex; align-items:center; gap:10px;
}
.logo .bolt{ color:var(--c-accent); font-size:22px; }
.logo small{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.25em;
  color:var(--c-text-mute); text-transform:uppercase; font-weight:400;
}

.main-nav{ display:flex; align-items:stretch; height:100%; }
.main-nav > ul{ display:flex; height:100%; }
.main-nav > ul > li{ position:relative; display:flex; align-items:center; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:6px;
  height:100%; padding:0 18px;
  font-family:var(--f-display); font-size:14px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--c-navy); font-weight:500;
  position:relative;
}
.main-nav > ul > li > a::after{
  content:''; position:absolute; left:18px; right:18px; bottom:0; height:3px;
  background:var(--c-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.main-nav > ul > li:hover > a::after,
.main-nav > ul > li.active > a::after{ transform:scaleX(1); }
.main-nav > ul > li:hover > a, .main-nav > ul > li.active > a{ color:var(--c-accent-dark); }
.main-nav .caret{ font-size:10px; transition:transform .2s var(--ease); }
.main-nav li:hover .caret{ transform:rotate(180deg); }

/* dropdown - flat category list (2-level taxonomy: Products > Category) */
.dropdown{
  position:absolute; top:100%; left:0; min-width:240px;
  background:var(--c-white); border-top:3px solid var(--c-accent);
  box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .22s var(--ease);
  padding:10px 0; z-index:600;
}
.main-nav li:hover > .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown > li > a{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 20px; font-size:13.5px; font-weight:600;
  color:var(--c-navy); text-transform:uppercase; letter-spacing:.03em;
  transition:background .18s, color .18s;
}
.dropdown > li > a:hover{ background:var(--c-bg-alt); color:var(--c-accent-dark); }

.nav-toggle{
  display:none; width:42px; height:36px; border:none; background:none;
  flex-direction:column; justify-content:center; gap:6px;
}
.nav-toggle span{ height:2px; background:var(--c-navy); border-radius:2px; }

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; background:var(--c-navy);
  height:640px;
}
.hero-slides{ position:relative; height:100%; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1.1s var(--ease);
}
.hero-slide.is-active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.08);
  transition:transform 7s linear;
}
.hero-slide.is-active img{ transform:scale(1); }
.hero-slide::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(18,26,36,.88) 0%, rgba(18,26,36,.55) 42%, rgba(18,26,36,.25) 100%);
  z-index:1;
}
.hero .wrap{ position:relative; z-index:2; height:100%; }
.hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  max-width:640px;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.3em;
  color:var(--c-accent); text-transform:uppercase; margin-bottom:18px;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero-eyebrow::before{ content:''; width:34px; height:2px; background:var(--c-accent); }
.hero-title{
  font-size:58px; line-height:1.08; color:#fff; margin-bottom:22px;
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.hero-title span{ color:var(--c-accent); }
.hero-desc{
  font-size:17px; color:#C7CFD7; max-width:480px; margin-bottom:36px;
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease), transform .65s var(--ease); }

.hero-slide.is-active .hero-eyebrow{ opacity:1; transform:translateY(0); transition-delay:.3s; }
.hero-slide.is-active .hero-title{ opacity:1; transform:translateY(0); transition-delay:.42s; }
.hero-slide.is-active .hero-desc{ opacity:1; transform:translateY(0); transition-delay:.56s; }
.hero-slide.is-active .hero-actions{ opacity:1; transform:translateY(0); transition-delay:.7s; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; font-family:var(--f-display); font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  border:2px solid transparent; border-radius:var(--radius);
  transition:all .25s var(--ease);
}
.btn-primary{ background:var(--c-accent); color:#fff; }
.btn-primary:hover{ background:var(--c-accent-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,106,19,.35); }
.btn-outline{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn-outline:hover{ background:#fff; color:var(--c-navy); border-color:#fff; }
.btn-dark{ background:var(--c-navy); color:#fff; }
.btn-dark:hover{ background:var(--c-accent); transform:translateY(-2px); }

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:16px; transition:all .25s var(--ease);
}
.hero-arrow:hover{ background:var(--c-accent); border-color:var(--c-accent); }
.hero-arrow.prev{ left:36px; }
.hero-arrow.next{ right:36px; }

.hero-dots{
  position:absolute; bottom:30px; left:0; right:0; z-index:4;
  display:flex; justify-content:center; gap:12px;
}
.hero-dots button{
  width:11px; height:11px; border-radius:50%; border:2px solid #fff;
  background:transparent; padding:0; opacity:.6; transition:all .25s var(--ease);
}
.hero-dots button.is-active{ background:var(--c-accent); border-color:var(--c-accent); opacity:1; transform:scale(1.15); }

/* diagonal cut under hero — signature motif */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:64px;
  background:var(--c-bg); z-index:3;
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */
.section{ padding:96px 0; position:relative; }
.section-alt{ background:var(--c-bg-alt); }
.section-dark{ background:var(--c-navy); color:#fff; }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:52px; gap:24px; flex-wrap:wrap;
}
.section-eyebrow{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.3em;
  color:var(--c-accent); text-transform:uppercase; display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.section-eyebrow::before{ content:''; width:28px; height:2px; background:var(--c-accent); }
.section-title{ font-size:36px; color:var(--c-navy); max-width:640px; }
.section-dark .section-title{ color:#fff; }
.section-sub{ font-size:15px; color:var(--c-text-mute); max-width:420px; }
.section-dark .section-sub{ color:#AEB9C4; }
.section-link{
  font-family:var(--f-display); font-size:13px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--c-navy); display:inline-flex; align-items:center; gap:8px;
  padding-bottom:4px; border-bottom:2px solid var(--c-accent);
}
.section-link:hover{ color:var(--c-accent-dark); }
.section-link i{ transition:transform .2s var(--ease); }
.section-link:hover i{ transform:translateX(4px); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   PRODUCTS GRID (home)
   ========================================================================== */
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.product-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:#000; box-shadow:var(--shadow-1);
}
.product-card .thumb{ width:100%; height:200px; overflow:hidden; }
.product-card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.product-card:hover .thumb img{ transform:scale(1.09); }
.product-card .plate{
  padding:16px 18px; background:var(--c-white);
  border:1px solid var(--c-line); border-top:3px solid var(--c-accent);
}
.product-card .plate .sku{ font-family:var(--f-mono); font-size:11px; color:var(--c-accent-dark); letter-spacing:.1em; }
.product-card .plate h3{
  font-size:16px; margin-top:6px; text-transform:none; letter-spacing:.01em;
  color:var(--c-navy);
}
.product-card .plate h3 a::after{ content:''; position:absolute; inset:0; }
.product-card .plate h3{ position:relative; }

.product-card .overlay{
  position:absolute; inset:0; height:200px;
  background:rgba(15,20,28,0);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px; opacity:0; transition:all .35s var(--ease);
}
.product-card:hover .overlay{ background:rgba(15,20,28,.82); opacity:1; }
.product-card .overlay h4{
  font-size:17px; text-transform:none; letter-spacing:.01em; color:#fff;
  transform:translateY(14px); transition:transform .4s var(--ease) .05s;
  position:relative; z-index:2;
}
.product-card .overlay h4 a::after{ content:''; position:absolute; inset:0; }
.product-card .overlay p{
  font-size:12.5px; color:#C7CFD7; margin-top:8px; line-height:1.5;
  transform:translateY(14px); opacity:0;
  transition:all .4s var(--ease) .12s;
}
.product-card:hover .overlay h4,
.product-card:hover .overlay p{ transform:translateY(0); opacity:1; }
.product-card .overlay .tag{
  align-self:flex-start; font-family:var(--f-mono); font-size:10.5px;
  color:var(--c-accent); border:1px solid var(--c-accent); padding:3px 9px;
  margin-bottom:10px; letter-spacing:.08em; text-transform:uppercase;
  transform:translateY(14px); opacity:0; transition:all .4s var(--ease);
}
.product-card:hover .overlay .tag{ transform:translateY(0); opacity:1; }

/* ==========================================================================
   MARKETING BANNER (repeats every 2 sections)
   ========================================================================== */
.banner{
  position:relative; overflow:hidden; background:var(--c-navy);
  padding:56px 0; color:#fff;
}
.banner::before{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(255,106,19,.10) 0 2px, transparent 2px 40px);
}
.banner-inner{
  position:relative; z-index:1; display:flex; align-items:center;
  justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.banner h3{
  font-size:28px; color:#fff; max-width:640px; line-height:1.25;
}
.banner h3 span{ color:var(--c-accent); }
.banner p{ color:#AEB9C4; margin-top:10px; font-size:14.5px; }
.banner-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.banner-orange{ background:linear-gradient(120deg,var(--c-accent) 0%, var(--c-accent-dark) 100%); }
.banner-orange::before{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 2px, transparent 2px 40px); }
.banner-orange p{ color:rgba(255,255,255,.85); }
.banner-orange .btn-outline{ border-color:rgba(255,255,255,.6); }
.banner-orange .btn-outline:hover{ background:#fff; color:var(--c-accent-dark); }
.banner-orange .btn-dark:hover{ background:var(--c-navy); }

/* ==========================================================================
   FACTORY / WORKSHOP
   ========================================================================== */
.factory-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:0;
  border:1px solid var(--c-line); background:#fff; box-shadow:var(--shadow-1);
}
.factory-media{ position:relative; overflow:hidden; min-height:440px; }
.factory-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.factory-media .badge{
  position:absolute; left:24px; bottom:24px; background:var(--c-accent); color:#fff;
  padding:14px 20px; font-family:var(--f-display); text-transform:uppercase;
  font-size:13px; letter-spacing:.05em; box-shadow:var(--shadow-2);
}
.factory-body{ padding:52px 48px; display:flex; flex-direction:column; justify-content:center; }
.factory-body h3{ font-size:28px; color:var(--c-navy); margin-bottom:16px; }
.factory-body p{ color:var(--c-text-mute); font-size:14.5px; margin-bottom:28px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:30px; }
.stat{ border-left:2px solid var(--c-accent); padding-left:14px; }
.stat b{ font-family:var(--f-display); font-size:30px; color:var(--c-navy); display:block; }
.stat span{ font-size:12px; color:var(--c-text-mute); text-transform:uppercase; letter-spacing:.05em; }
.thumb-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.thumb-strip img{ height:70px; width:100%; object-fit:cover; border-radius:var(--radius); filter:grayscale(30%); transition:filter .3s; }
.thumb-strip img:hover{ filter:grayscale(0); }

/* ==========================================================================
   CASE STUDIES
   ========================================================================== */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.case-card{ background:#fff; border:1px solid var(--c-line); overflow:hidden; transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.case-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-6px); }
.case-card .thumb{ height:200px; overflow:hidden; }
.case-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.case-card:hover .thumb img{ transform:scale(1.08); }
.case-card .body{ padding:22px 24px; }
.case-card .loc{ font-family:var(--f-mono); font-size:11.5px; color:var(--c-accent-dark); letter-spacing:.08em; text-transform:uppercase; }
.case-card h3{ font-size:17px; text-transform:none; margin-top:8px; color:var(--c-navy); }
.case-card p{ font-size:13.5px; color:var(--c-text-mute); margin-top:10px; }
.case-card .more{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.04em; color:var(--c-navy); }
.case-card:hover .more{ color:var(--c-accent-dark); }

/* ==========================================================================
   NEWS
   ========================================================================== */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.news-card{ background:#fff; }
.news-card .thumb{ height:190px; overflow:hidden; border-radius:var(--radius); }
.news-card .thumb img{ width:100%; /*height:100%; */object-fit:cover; transition:transform .6s var(--ease); }
.news-card:hover .thumb img{ transform:scale(1.02); }
.news-card .meta{ display:flex; gap:16px; margin:16px 0 10px; font-family:var(--f-mono); font-size:11.5px; color:var(--c-text-mute); text-transform:uppercase; letter-spacing:.04em; }
.news-card .meta i{ color:var(--c-accent); margin-right:5px; }
.news-card h3{ font-size:16.5px; text-transform:none; color:var(--c-navy); line-height:1.4; }
.news-card:hover h3{ color:var(--c-accent-dark); }
.news-card p{ font-size:13.5px; color:var(--c-text-mute); margin-top:10px; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-1); }
.about-media .frame{
  position:absolute; top:22px; left:-22px; right:22px; bottom:-22px;
  border:2px solid var(--c-accent); z-index:-1;
}
.about-body h3{ font-size:32px; color:var(--c-navy); margin-bottom:18px; }
.about-body p{ color:var(--c-text-mute); font-size:14.5px; margin-bottom:14px; }
.about-list{ margin-top:24px; display:grid; gap:14px; }
.about-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--c-text); }
.about-list i{ color:var(--c-accent); margin-top:3px; }

/* ==========================================================================
   CONTACT STRIP
   ========================================================================== */
.contact-strip{
  background:var(--c-navy); color:#fff; padding:64px 0;
}
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.contact-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-item i{ font-size:22px; color:var(--c-accent); margin-top:2px; }
.contact-item h4{ font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:#fff; }
.contact-item p{ font-size:13.5px; color:#AEB9C4; margin-top:6px; }

/* ==========================================================================
   CONTACT PAGE — info left / form right
   ========================================================================== */
.contact-page-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:0; border:1px solid var(--c-line); box-shadow:var(--shadow-1); }
.contact-info-col{ background:var(--c-navy); color:#fff; padding:48px 40px; display:flex; flex-direction:column; gap:26px; }
.info-card{ display:flex; gap:16px; align-items:flex-start; }
.info-card i{ font-size:20px; color:var(--c-accent); margin-top:3px; width:22px; }
.info-card h4{ font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; color:#fff; }
.info-card p{ font-size:13.5px; color:#AEB9C4; margin-top:6px; line-height:1.7; }
.map-frame{ position:relative; margin-top:8px; border:1px solid rgba(255,255,255,.15); border-radius:2px; overflow:hidden; }
.map-frame img{ width:100%; height:auto; display:block; filter:grayscale(60%) brightness(.75); }
.map-pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50% 50% 50% 0; background:var(--c-accent); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; animation:pinDrop 2s ease-in-out infinite; }
.map-pin i{ transform:rotate(45deg); }
@keyframes pinDrop{ 0%,100%{ transform:translate(-50%,-50%) rotate(-45deg) translateY(0); } 50%{ transform:translate(-50%,-50%) rotate(-45deg) translateY(-8px); } }
.contact-form-col{ background:#fff; padding:48px 44px; }

@media (max-width:840px){
  .contact-page-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PAGE HEADER BANNER (inner pages) — 200px tall
   ========================================================================== */
.page-banner{
  position:relative; height:200px; overflow:hidden;
  display:flex; align-items:center; background:var(--c-navy);
}
.page-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
.page-banner::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,26,36,.92), rgba(18,26,36,.55)); }
.page-banner .wrap{ position:relative; z-index:2; }
.page-banner h1{ color:#fff; font-size:32px; }
.breadcrumb{ margin-top:12px; font-family:var(--f-mono); font-size:12.5px; color:#C7CFD7; letter-spacing:.03em; }
.breadcrumb a{ color:#C7CFD7; }
.breadcrumb a:hover{ color:var(--c-accent); }
.breadcrumb i{ margin:0 8px; font-size:10px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:#0D131A; color:#8E99A6; padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-col h4{ color:#fff; font-size:14px; letter-spacing:.06em; margin-bottom:20px; }
.footer-col p{ font-size:13.5px; line-height:1.8; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul a{ font-size:13.5px; transition:color .2s, padding-left .2s; }
.footer-col ul a:hover{ color:var(--c-accent); padding-left:4px; }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.15); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .2s var(--ease);
}
.footer-social a:hover{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; transform:translateY(-3px); }
.footer-bottom{ padding:24px 0; display:flex; justify-content:space-between; font-size:12.5px; flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:#8E99A6; }
.footer-bottom a:hover{ color:var(--c-accent); }

/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   ========================================================================== */
.whatsapp-float{
  position:fixed; right:26px; bottom:126px; z-index:900;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:28px; box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .25s var(--ease);
}
.whatsapp-float:hover{ transform:scale(1.08); }
.whatsapp-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation:pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.9); opacity:0; }
}
.whatsapp-tip{
  position:absolute; right:70px; top:50%; transform:translateY(-50%);
  background:var(--c-navy); color:#fff; font-size:12.5px; padding:8px 14px;
  border-radius:3px; white-space:nowrap; opacity:0; visibility:hidden;
  transition:all .2s var(--ease);
}
.whatsapp-float:hover .whatsapp-tip{ opacity:1; visibility:visible; right:78px; }

/* back to top */
.to-top{
  position:fixed; right:26px; bottom:196px; z-index:899;
  width:44px; height:44px; border-radius:50%; background:var(--c-navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s var(--ease); border:none;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--c-accent); }

/* ==========================================================================
   INNER PAGE SHARED LAYOUT (products/news list, forms, tabs)
   ========================================================================== */
.content-layout{ display:grid; grid-template-columns:280px 1fr; gap:36px; padding:64px 0; align-items:start; }
.side-panel{
  background:#fff; border:1px solid var(--c-line);
  position:sticky; top:104px; align-self:start;
  max-height:calc(100vh - 124px); overflow-y:auto;
}
.side-panel::-webkit-scrollbar{ width:6px; }
.side-panel::-webkit-scrollbar-thumb{ background:var(--c-line); border-radius:4px; }
.side-panel h4{
  background:var(--c-navy); color:#fff; padding:16px 20px; font-size:14px;
  letter-spacing:.05em;
}
.side-cat li a{ display:flex; justify-content:space-between; padding:14px 20px; font-size:13.5px; font-weight:600; color:var(--c-text); border-bottom:1px solid var(--c-line); transition:all .2s; }
.side-cat li a:hover, .side-cat li.active a{ background:var(--c-bg-alt); color:var(--c-accent-dark); padding-left:26px; border-left:3px solid var(--c-accent); }

.hot-products{ padding:8px; }
.hot-item{ display:flex; gap:12px; padding:12px; border-bottom:1px solid var(--c-line); }
.hot-item img{ width:64px; height:64px; object-fit:cover; border-radius:2px; }
.hot-item h5{ font-size:13px; font-weight:600; color:var(--c-navy); line-height:1.4; text-transform:none; margin:5px auto }
.hot-item p{ font-size:12px; color:var(--c-text-mute); margin-top:4px; }

.content-main .content-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; border-bottom:2px solid var(--c-navy); padding-bottom:14px; }
.content-head h1{ font-size:24px; color:var(--c-navy); }

.list-row{ display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--c-line); }
.list-row .thumb{ width:220px; height:150px; flex:none; overflow:hidden; border-radius:2px; }
.list-row .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.list-row:hover .thumb img{ transform:scale(1.06); }
.list-row .info h3{ font-size:17px; text-transform:none; color:var(--c-navy); }
.list-row:hover .info h3{ color:var(--c-accent-dark); }
.list-row .meta{ display:flex; gap:16px; margin:10px 0; font-family:var(--f-mono); font-size:11.5px; color:var(--c-text-mute); text-transform:uppercase; }
.list-row .meta i{ color:var(--c-accent); margin-right:4px; }
.list-row .desc{ font-size:13.5px; color:var(--c-text-mute); line-height:1.7; }

.pagination{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:44px; flex-wrap:wrap; }
.pagination .page-prev, .pagination .page-next{
  font-family:var(--f-display); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-navy); display:inline-flex; align-items:center; gap:8px; transition:color .2s;
}
.pagination .page-prev:hover, .pagination .page-next:hover{ color:var(--c-accent-dark); }
.pagination .page-prev.disabled, .pagination .page-next.disabled{ color:var(--c-line); pointer-events:none; }
.pagination .page-numbers{ display:flex; align-items:center; gap:6px; }
.pagination .page-num{
  min-width:36px; height:36px; padding:0 4px; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:13.5px; color:var(--c-text-mute);
  border:1px solid transparent; transition:all .2s;
}
.pagination .page-num:hover{ color:var(--c-navy); }
.pagination .page-num.active{
  color:var(--c-accent-dark); border-color:var(--c-accent); font-weight:600;
  position:relative;
}
.pagination .page-num.active::before{ content:'['; margin-right:2px; color:var(--c-accent); }
.pagination .page-num.active::after{ content:']'; margin-left:2px; color:var(--c-accent); }
.pagination .page-dots{ color:var(--c-line); font-family:var(--f-mono); }

.product-list-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

.prev-next{ display:flex; justify-content:space-between; margin-top:40px; border-top:1px solid var(--c-line); padding-top:24px; }
.prev-next a{ font-size:13.5px; color:var(--c-navy); max-width:45%; }
.prev-next a:hover{ color:var(--c-accent-dark); }
.prev-next span{ display:block; font-family:var(--f-mono); font-size:11px; color:var(--c-text-mute); text-transform:uppercase; margin-bottom:4px; }

/* responsive article images */
.article-body img{/* width:100%; */height:auto; border-radius:2px; margin:18px 0; }
.article-body{ font-size:14.5px; color:var(--c-text); line-height:1.9; }

/* product detail */
.pd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:64px 0 30px; }
.pd-gallery img{ width:100%; border:1px solid var(--c-line); border-radius:2px; }
.pd-info h1{ font-size:26px; color:var(--c-navy); text-transform:none; }
.pd-row{ display:flex; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--c-line); font-size:14px; }
.pd-row i{ color:var(--c-accent); width:20px; }
.pd-actions{ display:flex; gap:14px; margin-top:24px; }

.tabs-nav{ display:flex; border-bottom:2px solid var(--c-line); gap:6px; }
.tabs-nav button{ padding:16px 26px; background:none; border:none; font-family:var(--f-display); font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--c-text-mute); border-bottom:3px solid transparent; transition:all .2s; }
.tabs-nav button.active{ color:var(--c-navy); border-color:var(--c-accent); }
.tab-panel{ display:none; padding:34px 0; }
.tab-panel.active{ display:block; }

.review-item{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--c-line); }
.review-item img{ width:100px; height:100px; border-radius:50%; object-fit:cover; }
.review-item h5{ font-size:16px; text-transform:none; color:var(--c-navy); margin:0px }
.review-item h5 span{ display:block; font-size:12px; color:var(--c-text-mute); font-family:var(--f-mono); text-transform:uppercase; margin-top:3px; }
.review-item p{ font-size:13.5px; color:var(--c-text-mute); margin-top:10px; line-height:1.7; }

.faq-item{ border-bottom:1px solid var(--c-line); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-size:15px; font-weight:600; color:var(--c-navy); }
.faq-q i{ transition:transform .25s; color:var(--c-accent); }
.faq-item.open .faq-q i{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-item.open .faq-a{ max-height:300px; }
.faq-a p{ padding-bottom:18px; font-size:13.5px; color:var(--c-text-mute); line-height:1.8; }

/* form */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ position:relative; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:14px 16px; border:1px solid var(--c-line); background:#fff;
  font-family:var(--f-body); font-size:14px; color:var(--c-text); border-radius:2px;
  transition:border-color .2s;
}

/* 新增：邮箱通幅类，占满整行 */
.full-width-field {
  width: 200%;
  margin: 18px 0; /* 和上下区块拉开间距 */
}

/* 通用输入框基础样式（适配通栏） */
.field {
  position: relative;
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  font-size: 15px;
  background: #fff;
}
/* 通栏输入框无宽度限制，完全撑满父容器 */
.full-width-field input {
  width: 100%;
}

/* 适配移动端自动变成单列（可选优化） */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .full-width-field {
  width: 100%;
  margin: 18px 0; /* 和上下区块拉开间距 */
}
}

.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field textarea:focus{ border-color:var(--c-accent); outline:none; }
.field label{
  position:absolute; left:16px; top:14px; font-size:14px; color:var(--c-text-mute);
  pointer-events:none; transition:all .18s var(--ease); background:#fff; padding:0 4px;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top:-9px; font-size:11.5px; color:var(--c-accent-dark);
}
.captcha-row{ display:flex; gap:14px; align-items:center; }
.captcha-row .field{ flex:1; margin-bottom:0; }
.captcha-row img{ height:20px; border-radius:2px; cursor:pointer;/* border:1px solid var(--c-line);*/ }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .case-grid, .news-grid, .product-list-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .factory-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .content-layout{ grid-template-columns:1fr; }
  .hero-title{ font-size:42px; }
}
@media (max-width:840px){
  .topbar{ display:none; }
  .main-nav{ position:fixed; top:0; right:-320px; width:300px; height:100vh; background:#fff; flex-direction:column; padding:90px 0 20px; box-shadow:var(--shadow-2); transition:right .3s var(--ease); overflow-y:auto; z-index:700; }
  .main-nav.is-open{ right:0; }
  .main-nav > ul{ flex-direction:column; width:100%; }
  .main-nav > ul > li{ height:auto; }
  .main-nav > ul > li > a{ height:auto; padding:14px 24px; width:100%; }
  .dropdown{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; width:100%; border-top:none; border-left:3px solid var(--c-accent); }
  .main-nav li.open > .dropdown{ display:block; }
  .nav-toggle{ display:flex; }
  .hero{ height:560px; }
  .hero-title{ font-size:32px; }
  .hero-arrow{ width:40px; height:40px; }
  .product-grid, .case-grid, .news-grid, .product-list-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .pd-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .section-title{ font-size:28px; }
  .side-panel{ display:none; }
  .content-layout{ padding:36px 0; }
}

/* ---- Mobile nav close button + backdrop ---- */
.nav-close{
  display:none; position:absolute; top:16px; right:16px; z-index:50;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--c-line);
  background:#fff; color:var(--c-navy); font-size:22px; line-height:1;
  align-items:center; justify-content:center; padding:0;
  font-family:Arial, sans-serif; font-weight:400;
  transition:all .2s var(--ease);
}
.nav-close:hover{ background:var(--c-accent); border-color:var(--c-accent); color:#fff; transform:rotate(90deg); }
.nav-backdrop{
  display:none; position:fixed; inset:0; background:rgba(18,26,36,.55);
  z-index:650; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.nav-backdrop.is-open{ opacity:1; visibility:visible; }
@media (max-width:840px){
  .nav-close{ display:flex; }
  .nav-backdrop{ display:block; }
}