/* Performance note: Google Fonts loaded via <link> in HTML head (avoid CSS @import). */

.skip-link{
  position:absolute;
  left:-999px;
  top:12px;
  background:#fff;
  color:#000;
  padding:10px 14px;
  border-radius:12px;
  z-index:9999;
  text-decoration:none;
  font-weight:800;
}
.skip-link:focus{left:12px;}
:focus-visible{
  outline: 2px solid rgba(109,214,255,.95);
  outline-offset: 3px;
}
.nav a.is-active{opacity:1; font-weight:800; text-decoration:underline;}

/* ALFA SPORT professional responsive theme (v3) */
:root{
  --bg:#0b0d12;
  --panel:#121522;
  --panel2:#0f1320;
  --text:#e7e9ee;
  --muted:#a9afbf;
  --line:#262a3a;
  --shadow: 0 18px 40px rgba(0,0,0,.45);
  --r:18px;
  --max:1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 10% 10%, rgba(141,123,255,.18), transparent 60%),
              radial-gradient(900px 700px at 90% 20%, rgba(109,214,255,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.5;
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}

.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(11,13,18,.65);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none}
.brand__logo{height:42px; width:auto; max-width:180px; border-radius:12px; background:rgba(255,255,255,.08); object-fit:contain}
.brand__text{font-weight:900; letter-spacing:.6px; font-size:22px}
.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav a{opacity:.9; text-decoration:none; font-size:14px}
.nav a:hover{opacity:1}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(109,214,255,.95), rgba(139,123,255,.95));
  color:#05060a;
  font-weight:900;
  text-decoration:none;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.12);
}
.btn:hover{transform: translateY(-1px)}
.btn--ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  box-shadow:none;
}
.btn--sm{padding:10px 12px; border-radius:12px; font-size:14px}

.hero{padding:54px 0 24px}
.hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:22px; align-items:stretch}
@media (max-width: 880px){ .hero__grid{grid-template-columns:1fr} }

.pill{
  display:inline-flex; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
}

.hero__title{
  font-size:56px;
  line-height:1.04;
  margin:14px 0 10px;
  letter-spacing:.8px;
}
@media (max-width: 520px){ .hero__title{font-size:44px} }

.lead{color:var(--muted); font-size:16px; max-width:62ch}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 14px}

.quick{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px; margin-top:10px;
}
@media (max-width: 720px){ .quick{grid-template-columns:1fr} }
.quick__item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:12px 12px;
}
.quick__k{font-size:12px; color:var(--muted)}
.quick__v{display:block; margin-top:4px; font-weight:800; text-decoration:none}
.quick__v:hover{text-decoration:underline}

.photo{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height:340px;
}
.photo img{
  width:100%;
  height:100%;
  object-fit:contain; /* show full banner image (no crop) */
  object-position:center;
  display:block;
  background:rgba(0,0,0,.12);
}
.photo__hint{
  position:absolute; left:12px; right:12px; bottom:12px;
  font-size:12px; color:rgba(231,233,238,.9);
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 10px;
}

.section{padding:44px 0}
.section--alt{background:rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05)}
.section__head{margin-bottom:18px}
.section__head h2,.h2{margin:0 0 8px; font-size:26px}
.section__head p{margin:0; color:var(--muted); max-width:70ch}

.grid{display:grid; gap:14px}
.cards{grid-template-columns: repeat(3, minmax(0, 1fr))}
@media (max-width: 920px){ .cards{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width: 620px){ .cards{grid-template-columns:1fr} }

.gallery{grid-template-columns: repeat(3, minmax(0, 1fr))}
@media (max-width: 920px){ .gallery{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width: 620px){ .gallery{grid-template-columns:1fr} }

.two{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 720px){ .two{grid-template-columns:1fr} }

.three{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 920px){ .three{grid-template-columns:1fr} }

.card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.card img{width:100%; height:220px; object-fit:cover; display:block; background:rgba(255,255,255,.03)}
.card__body{padding:14px 14px 16px}
.card__body h3{margin:0 0 6px; font-size:18px}
.mutedcap{margin:0; color:var(--muted); font-size:13px}

.gcard{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
  overflow:hidden;
}
.gcard img{width:100%; height:220px; object-fit:cover; display:block}
.gcard figcaption{padding:10px 12px; color:var(--muted); font-size:13px}

.panel{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
  padding:16px;
}
.panel h3{margin:0 0 8px}
.panel p{margin:0 0 8px; color:var(--muted)}
.panel p strong{color:var(--text)}
.mt{margin-top:18px}

.contact{display:grid; grid-template-columns: .95fr 1.05fr; gap:14px}
@media (max-width: 920px){ .contact{grid-template-columns:1fr} }
.contact__card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
  padding:18px;
}
.contact__row{display:grid; grid-template-columns:120px 1fr; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,.06)}
.contact__row:first-of-type{border-top:none}
.contact__k{color:var(--muted); font-size:13px}
.contact__v a{text-decoration:none; font-weight:900}
.contact__v a:hover{text-decoration:underline}
.contact__note{
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding:12px;
}

.contact__map{
  border-radius: var(--r);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  background:rgba(255,255,255,.04);
  min-height:320px;
}
.contact__map iframe{width:100%; height:100%; border:0; min-height:320px}

.footer{
  padding:26px 0 40px;
  color:var(--muted);
}
.footer__inner{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:18px;
}
.footer__links a{margin-left:12px; text-decoration:none}
.footer__links a:hover{text-decoration:underline}

.smallmuted{color:var(--muted); font-size:13px; margin:0}

code{
  font-family: 'Inter', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  background:rgba(255,255,255,.08);
  padding:2px 6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
}

/* Fix contact pills overflow */
.quick{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.quick__v{
  overflow-wrap: anywhere;
}

.contact__note{
  padding:10px 12px;
  font-size:12px;
  opacity:.8;
}

/* --- v3 refinements (OEM international style) --- */
.hero__bullets{
  list-style:none;
  padding:0;
  margin: 10px 0 0;
  display:grid;
  gap:8px;
  color: var(--muted);
}
.hero__bullets strong{color: var(--text)}
.hero__proof{
  margin: 10px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color: var(--muted);
  font-size:13px;
}
.hero__proof span{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

/* Compact address row */
.contact__row--address .contact__v{
  align-self:center;
}
.addr{
  text-decoration:none;
  color: var(--text);
  opacity:.92;
  display:inline;
  line-height:1.35;
}
.addr:hover{text-decoration:underline; opacity:1}

/* Prevent oversized quick values on narrow screens */
.quick__v{
  font-size: clamp(14px, 2.2vw, 18px);
  letter-spacing: .2px;
}

/* --- v4 Business / Corporate refinements --- */
body{
  background: linear-gradient(180deg, #0b0d12 0%, #0a0c10 60%, #0b0d12 100%);
}
.topbar{
  background:rgba(11,13,18,.82);
}

.brand__text{font-size:20px; letter-spacing:.8px}
.hero__title{font-size:52px}
@media (max-width:520px){ .hero__title{font-size:40px} }

.hero__stats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
@media (max-width:720px){ .hero__stats{grid-template-columns:1fr} }
.hero__stats > div{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:12px 12px;
}
.hero__stats .k{font-size:12px; color:var(--muted)}
.hero__stats .v{font-weight:900; margin-top:4px}

.quick__v{font-size:15px; font-weight:800}
.quick__item{padding:12px}

.contact__row{
  grid-template-columns: 140px 1fr;
}
.contact__k{font-size:12px; text-transform:uppercase; letter-spacing:.6px}
.contact__v{font-size:15px}
.contact__v a{font-weight:800}
.contact__map{min-height:240px}
.contact__map iframe{min-height:240px}

.specbar{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
@media (max-width:920px){ .specbar{grid-template-columns:1fr} }
.specbar > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
}
.specbar__k{color:var(--muted); font-size:13px}
.specbar__v{font-weight:900}

.footer__meta{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  max-width: 70ch;
}

/* --- v5 OEM business-first adjustments --- */
.photo{min-height:220px;}
@media (max-width:720px){ .photo{min-height:180px;} }

.card img, .gcard img{height:180px;}

/* --- v6 KPI hero layout (business OEM) --- */
.hero__brand{
  color: rgba(109,214,255,.95);
  font-weight: 900;
  letter-spacing: .8px;
  margin-top: 16px;
  text-transform: uppercase;
}
.hero__title{
  font-size: 46px;
  line-height: 1.06;
  margin: 10px 0 10px;
}
@media (max-width:520px){ .hero__title{font-size:36px} }

.hero__checks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.hero__checks span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.hero__checks span::before{
  content:"✓";
  font-weight:900;
  opacity:.9;
}

.kpi{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){ .kpi{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width: 560px){ .kpi{grid-template-columns: 1fr;} }

.kpi__card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px 14px;
}
.kpi__k{color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.6px}
.kpi__v{font-weight:900; font-size:18px; margin-top:6px}
.kpi__s{color:var(--muted); font-size:12px; margin-top:6px; line-height:1.35}

/* Hero media as wide banner */
.photo{min-height: 260px;}
@media (max-width:720px){ .photo{min-height: 200px;} }
.photo img{object-position:center;}

/* Featured products back to 3 columns on desktop */
.cards{grid-template-columns: repeat(3, minmax(0, 1fr));}

/* --- v7 Design-forward refinements --- */
.hero{
  position: relative;
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(8,10,15,.88) 0%, rgba(8,10,15,.75) 45%, rgba(8,10,15,.55) 100%);
  pointer-events:none;
}
.hero .container{
  position:relative;
  max-width: 1180px;
}

.hero__title{
  letter-spacing:-.02em;
}

.kpi__card{
  box-shadow:
    0 20px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.card{
  box-shadow:
    0 18px 36px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.topbar{
  backdrop-filter: blur(8px);
}

/* --- v8 Banner hero (match reference feel) --- */
.hero--banner{
  position: relative;
  padding: 84px 0 64px;
  background:
    linear-gradient(90deg, rgba(8,10,15,.82) 0%, rgba(8,10,15,.58) 42%, rgba(8,10,15,.12) 72%, rgba(8,10,15,0) 100%),
    url("assets/img/factory_front.jpg");
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero--banner::after{ display:none; }

.hero--banner .hero__grid{
  grid-template-columns: 1fr;
  align-items: center;
}

.hero--banner .hero__copy{
  max-width: 720px;
}

.hero--banner .pill{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
}

.hero--banner .lead{
  color: rgba(231,233,238,.88);
}

.hero--banner .hero__checks span{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
}

.hero--banner .kpi__card{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 720px){
  .hero--banner{
    padding: 64px 0 52px;
    background-position: 70% center;
  }
}

/* Slightly reduce overall darkness in the page background */
body{
  background: linear-gradient(180deg, #0b0d12 0%, #0a0c10 70%, #0b0d12 100%);
}

.hero--banner .hero__title{
  font-size: 52px;
}
@media (max-width:520px){
  .hero--banner .hero__title{font-size: 36px;}
}

/* --- v9 Option B: converged business style --- */
.kpi-line{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  color:rgba(231,233,238,.9);
  font-size:14px;
}
.kpi-line span{
  padding-right:18px;
  border-right:1px solid rgba(255,255,255,.15);
}
.kpi-line span:last-child{border-right:none}

.card, .kpi__card{
  box-shadow:none;
  border:1px solid rgba(255,255,255,.08);
}

.hero--banner{
  padding:78px 0 56px;
}

.hero__title{
  letter-spacing:-.01em;
}

/* --- v10 Hero text-only OEM style --- */
.hero--banner{
  padding:96px 0 84px;
}
.hero__content{
  max-width:760px;
}
.section-kpi{
  padding:56px 0;
  background:#0f1116;
}

/* --- v11: enforce hero image stays within hero only; Mobile A (short banner) --- */
.hero--banner{
  height: 560px;           /* desktop fixed hero height */
  max-height: 560px;
  min-height: 560px;
  overflow: hidden;
}
@media (max-width: 980px){
  .hero--banner{height: 520px; min-height:520px; max-height:520px;}
}
@media (max-width: 720px){
  /* Mobile A: short banner */
  .hero--banner{
    height: 320px;
    min-height: 320px;
    max-height: 320px;
    padding: 54px 0 0;     /* top padding only; keep content readable */
    background-position: 70% center;
  }
  .hero--banner .hero__title{font-size: 34px; line-height:1.08;}
  .hero--banner .lead{font-size: 14px;}
  .hero__checks{gap:8px;}
  .hero__checks span{padding:5px 9px; font-size:12px;}
}

/* Section below hero must be fully opaque (no photo bleed) */
.section-kpi{
  background: #0f1116 !important;
  position: relative;
  z-index: 2;
}
.section-kpi::before{content:none !important;}

.section-kpi .kpi-line span{
  border-right:1px solid rgba(255,255,255,.14);
}

.hero--banner{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* --- v12: prevent hero image bleeding into KPI section (structure fix) --- */
.section-kpi{
  background:#0f1116 !important;
  opacity:1;
  position:relative;
  z-index:0;
  margin-top:0;
  padding:28px 0;
}
.section-kpi .kpi-line{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  color:rgba(235,237,242,.92);
  font-size:14px;
}
.section-kpi .kpi-line span{
  border-right:1px solid rgba(255,255,255,.14);
  padding-right:14px;
}
.section-kpi .kpi-line span:last-child{border-right:none;}

@media (max-width:720px){
  .section-kpi{padding:18px 0;}
  .section-kpi .kpi-line{
    gap:10px;
    font-size:13px;
    line-height:1.35;
  }
  .section-kpi .kpi-line span{
    border-right:none;
    padding-right:0;
  }
}

/* Hard cut between hero and next section */
.hero--banner{border-bottom:1px solid rgba(255,255,255,.10);}

/* --- v13: move ALL KPI cards below hero + banner crop --- */
.hero--banner{
  background:
    linear-gradient(90deg, rgba(8,10,15,.82) 0%, rgba(8,10,15,.58) 42%, rgba(8,10,15,.12) 72%, rgba(8,10,15,0) 100%),
    url("assets/img/factory_front_banner.jpg");
  background-size: cover;
  background-position: center;
}

/* Ensure nothing overlays below hero */
.hero--banner{ overflow:hidden; }

/* Make KPI section clearly separate */
.section-kpi{
  background:#0f1116 !important;
  border-top:1px solid rgba(255,255,255,.10);
}

@media (max-width:720px){
  .hero--banner{
    height: 320px;
    min-height: 320px;
    max-height: 320px;
    padding: 54px 0 0;
    background-position: 70% center;
  }
}

/* --- v14: shrink hero image, keep same OEM feel --- */
.hero--banner{
  height: 440px;      /* reduced from 560 */
  min-height: 440px;
  max-height: 440px;
}

@media (max-width: 980px){
  .hero--banner{
    height: 400px;
    min-height: 400px;
    max-height: 400px;
  }
}

@media (max-width: 720px){
  .hero--banner{
    height: 300px;    /* slightly smaller mobile banner */
    min-height: 300px;
    max-height: 300px;
    padding-top: 48px;
    background-position: 65% center;
  }
}

/* --- v15: shift hero image slightly left --- */
.hero--banner{
  background-position: 55% center; /* was center / 65% */
}

@media (max-width: 980px){
  .hero--banner{
    background-position: 58% center;
  }
}

@media (max-width: 720px){
  .hero--banner{
    background-position: 60% center;
  }
}

/* --- v16: hero image aligned to match provided factory view --- */
/* Focus on left tree + center gate composition */
.hero--banner{
  background-position: 48% center;
}

@media (max-width: 1200px){
  .hero--banner{
    background-position: 50% center;
  }
}

@media (max-width: 980px){
  .hero--banner{
    background-position: 52% center;
  }
}

@media (max-width: 720px){
  .hero--banner{
    background-position: 55% center;
  }
}

/* --- v17: hero image shifted further left (fine-tune) --- */
.hero--banner{
  background-position: 44% center;
}

@media (max-width: 1200px){
  .hero--banner{
    background-position: 46% center;
  }
}

@media (max-width: 980px){
  .hero--banner{
    background-position: 48% center;
  }
}

@media (max-width: 720px){
  .hero--banner{
    background-position: 52% center;
  }
}

/* --- v18: keep height, stretch horizontally using background-size --- */
/* Height stays EXACTLY the same. Only horizontal stretch changes perception */
.hero--banner{
  background-size: 115% auto;   /* stretch horizontally */
  background-position: 46% center;
}

/* Large screens */
@media (min-width: 1400px){
  .hero--banner{
    background-size: 120% auto;
    background-position: 45% center;
  }
}

/* Tablet */
@media (max-width: 980px){
  .hero--banner{
    background-size: 110% auto;
    background-position: 48% center;
  }
}

/* Mobile */
@media (max-width: 720px){
  .hero--banner{
    background-size: 125% auto;
    background-position: 50% center;
  }
}

/* --- v19: factory visual smaller (less zoom) while keeping hero height unchanged --- */
.hero--banner{
  /* reduce zoom so factory looks smaller */
  background-size: 105% auto;
  background-position: 46% center;
}

@media (min-width: 1400px){
  .hero--banner{
    background-size: 110% auto;
    background-position: 45% center;
  }
}

@media (max-width: 980px){
  .hero--banner{
    background-size: 102% auto;
    background-position: 48% center;
  }
}

@media (max-width: 720px){
  .hero--banner{
    background-size: 112% auto; /* still slightly zoomed to avoid empty edges on very narrow screens */
    background-position: 50% center;
  }
}

/* --- v20: match the previous mock banner look (image like screenshot) --- */
/* Use a dedicated wide banner image to keep composition consistent across screens */
.hero--banner{
  background:
    linear-gradient(90deg, rgba(8,10,15,.86) 0%, rgba(8,10,15,.64) 42%, rgba(8,10,15,.18) 72%, rgba(8,10,15,0) 100%),
    url("assets/img/factory_front_mock_banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 56% center; /* gate near center, tree still visible */
}

/* Slight softening like the mock (subtle) */
.hero--banner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: rgba(0,0,0,.0);
  backdrop-filter: blur(0.4px);
}

/* Keep hero height unchanged from your accepted proportion (v14+) */
.hero--banner{
  height: 440px;
  min-height: 440px;
  max-height: 440px;
  overflow:hidden;
}

@media (max-width: 980px){
  .hero--banner{
    height: 400px;
    min-height: 400px;
    max-height: 400px;
    background-position: 58% center;
  }
}

@media (max-width: 720px){
  /* Mobile A short banner */
  .hero--banner{
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    padding-top: 48px;
    background-position: 60% center;
  }
}

/* --- v21: edited factory banner (cropped + graded) to match mock look --- */
.hero--banner{
  background:
    linear-gradient(90deg, rgba(8,10,15,.86) 0%, rgba(8,10,15,.64) 42%, rgba(8,10,15,.18) 72%, rgba(8,10,15,0) 100%),
    url("assets/img/factory_front_banner_final.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 56% center;
}

/* --- v23: banner looks farther (zoomed out) WITHOUT blurring shrine --- */
.hero--banner{
  background:
    linear-gradient(90deg, rgba(8,10,15,.88) 0%, rgba(8,10,15,.62) 44%, rgba(8,10,15,.22) 74%, rgba(8,10,15,0) 100%),
    url("assets/img/factory_front_banner_far.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 58% center;
}

/* --- v24: use approved edited banner image (factory right-shift + blurred road left) --- */
.hero--banner{
  background:
    linear-gradient(90deg, rgba(8,10,15,.88) 0%, rgba(8,10,15,.60) 45%, rgba(8,10,15,.25) 70%, rgba(8,10,15,0) 100%),
    url("assets/img/factory_banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 60% center;
}

/* --- v25: KPI strip redesign (clean OEM business grid, no awkward separators) --- */
.section-kpi{
  padding:22px 0;
  background:#0f1116 !important;
  border-top:1px solid rgba(255,255,255,.10);
}
.section-kpi .kpi-line{display:none !important;}

.kpi-grid{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.kpi-item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px 16px;
}
.kpi-label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(235,237,242,.72);
}
.kpi-value{
  margin-top:6px;
  font-size:20px;
  font-weight:700;
  color: rgba(245,246,250,.98);
}
.kpi-note{
  margin-top:6px;
  font-size:13px;
  color: rgba(235,237,242,.70);
}

@media (max-width: 980px){
  .kpi-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .section-kpi{padding:16px 0;}
  .kpi-grid{grid-template-columns: 1fr; padding:0 18px;}
  .kpi-value{font-size:18px;}
}


/* ===== QC page additions (v26) ===== */
.page-hero{padding:64px 0 28px;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(800px 400px at 20% 0%, rgba(110,203,255,.12), transparent 70%);}
.page-hero__eyebrow{letter-spacing:.14em;font-size:12px;color:rgba(255,255,255,.6);margin-bottom:10px;}
.page-hero__title{font-size:44px;line-height:1.05;margin:0 0 12px 0;}
.page-hero__sub{max-width:720px;color:rgba(255,255,255,.76);margin:0;}
.section{padding:48px 0;}
.section--soft{background:rgba(255,255,255,.03);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.section--cta{padding:56px 0;background:radial-gradient(900px 420px at 40% 40%, rgba(140,120,255,.14), transparent 70%);border-top:1px solid rgba(255,255,255,.06);}
.grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cards .card{padding:16px 16px 14px;}
.card__title{font-weight:700;margin-bottom:6px;}
.card__text{color:rgba(255,255,255,.74);font-size:14px;line-height:1.5;}
.media-card{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(10,12,16,.55);box-shadow:0 18px 60px rgba(0,0,0,.35);}
.media-card img{width:100%;height:auto;display:block;}
.media-card figcaption{padding:10px 12px;color:rgba(255,255,255,.62);font-size:12px;}
.list-card{padding:14px 14px 12px;}
.list-row{display:flex;gap:10px;padding:10px 8px;border-radius:12px;}
.list-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.07);}
.list-row .k{min-width:86px;color:rgba(255,255,255,.6);font-size:13px;}
.list-row .v{color:rgba(255,255,255,.82);font-size:13px;}
.timeline{display:grid;gap:14px;max-width:920px;}
.t-item{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start;}
.t-dot{width:10px;height:10px;border-radius:999px;background:rgba(110,203,255,.9);margin-top:6px;box-shadow:0 0 0 6px rgba(110,203,255,.10);}
.t-title{font-weight:700;margin-bottom:4px;}
.t-text{color:rgba(255,255,255,.74);font-size:14px;line-height:1.5;}
.cta{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(255,255,255,.10);background:rgba(10,12,16,.55);border-radius:22px;padding:22px 22px;}
@media (max-width: 920px){
  .grid-2{grid-template-columns:1fr;gap:18px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .page-hero__title{font-size:36px;}
  .cta{flex-direction:column;align-items:flex-start;}
}
@media (max-width: 520px){
  .grid-4{grid-template-columns:1fr;}
  .page-hero__title{font-size:30px;}
}


/* ===== v27: QC page – more business presentation ===== */
.media-card{
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.media-card img{
  filter: blur(1.2px) saturate(.95) contrast(1.02);
  transform: scale(1.02);
}
@media (max-width: 920px){
  .media-card{max-width: 100%;}
}

/* ===== v28: QC image height aligned to content column ===== */
.media-card{
  height: 100%;
  display: flex;
  align-items: stretch;
}
.media-card img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* ===== v29: QC image size balanced with text column ===== */
.media-card{
  max-height: 420px; /* keep close to left text block */
}
.media-card img{
  max-height: 420px;
}
@media (max-width: 920px){
  .media-card,
  .media-card img{
    max-height: none;
  }
}

/* ===== v30: QC image caption + standards ===== */
.media-card figcaption{
  padding:10px 12px 6px;
  font-size:12px;
  color:rgba(255,255,255,.6);
}
.media-card .standards{
  padding:0 12px 12px;
  font-size:12px;
  color:rgba(255,255,255,.72);
}
.media-card .standards strong{
  color:rgba(255,255,255,.85);
  font-weight:600;
}

/* --- v35: Packaging options pills --- */
.section__head{margin-bottom:18px;}
.pill-grid{display:flex;flex-wrap:wrap;gap:10px;}
.pill2{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
  font-size:13px;
}
.footnote{margin-top:14px;font-size:12px;line-height:1.5;}

/* v36: Brand hierarchy */
.brand__text{font-weight:700; letter-spacing:.01em;}

/* v38: Tune hero typography to avoid crowding */
.hero--banner .hero__copy{max-width: 860px;}
.hero__brand{
  font-size: clamp(22px, 3.0vw, 40px);
  line-height: 1.05;
  letter-spacing: .04em;
}
@media (max-width: 920px){
  .hero__brand{font-size: clamp(18px, 6.2vw, 30px);}  
}

.hero__title{
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 900px;
  text-wrap: balance;
}
@media (max-width: 920px){
  .hero__title{font-size: clamp(30px, 9vw, 44px);}  
}

/* --- v39 launch polish --- */
.hero{padding-top:78px;}
.hero__title{line-height:1.05; font-size:44px; letter-spacing:-.02em;}
@media (max-width: 920px){
  .hero{padding-top:70px;}
  .hero__title{font-size:32px; line-height:1.08;}
}
.kpis{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:18px;}
.kpi{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:12px 12px 10px;}
.kpi__k{font-size:12px; opacity:.75; letter-spacing:.02em; text-transform:uppercase;}
.kpi__v{font-size:16px; font-weight:700; margin-top:4px;}
.kpi__s{font-size:12px; opacity:.75; margin-top:2px;}
@media (max-width: 920px){
  .kpis{grid-template-columns:1fr 1fr; gap:10px;}
}
.card--link .card__link{display:block; color:inherit; text-decoration:none;}
.card--link .card__link:hover{transform:translateY(-2px);}
.gallery{grid-template-columns:repeat(3,minmax(0,1fr));}
.media{margin:0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden;}
.media img{width:100%; display:block; height:auto;}
.media figcaption{padding:10px 12px; font-size:13px; opacity:.82;}
.category-notes{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px;}
.note-card{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding:14px;}
@media (max-width: 920px){
  .gallery{grid-template-columns:1fr;}
  .category-notes{grid-template-columns:1fr;}
}

/* --- Tweak: equalize Manufacturing & QC gallery image heights --- */
#mfgqc .gallery .media{display:flex; flex-direction:column;}
#mfgqc .gallery .media img{height:clamp(170px, 18vw, 220px); object-fit:cover;}

/* --- Tweak: equalize Home Manufacturing & Quality Control gallery image heights --- */
#factory .gallery .media{display:flex; flex-direction:column;}
#factory .gallery .media img{height:clamp(170px, 18vw, 220px); object-fit:cover;}

/* Quality Control - stack image and text vertically */
.qc-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qc-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
}

.qc-item .qc-text {
  text-align: left;
}


.hero.hero--banner{
  min-height: 78vh;
  padding-bottom: 110px; /* ensure KPI section doesn't visually crowd hero */
}
@media (max-width: 768px){
  .hero.hero--banner{
    min-height: 86vh;
    padding-bottom: 96px;
  }
}
.hero__copy{max-width: 760px;}
.hero__title{
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere; /* prevent any clipping on narrow widths */
  word-break: normal;
}


/* --- Fix: Home banner spacing (balanced) --- */
.hero.hero--banner{
  min-height: 62vh;
  padding-bottom: 64px; /* keep separation from KPI section without excessive blank space */
}
@media (max-width: 768px){
  .hero.hero--banner{
    min-height: 72vh;
    padding-bottom: 56px;
  }
}
.hero__copy{max-width: 760px;}
.hero__title{
  font-size: clamp(34px, 5.0vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  word-break: normal;
}


/* --- Fix: prevent logo squashing --- */
.brand{display:flex; align-items:center; gap:10px;}
.brand__logo{flex:0 0 auto;}




/* --- Photos page: equalize card image heights --- */
.media img{
  width: 100%;
  height: 220px;
  object-fit: cover;
}