/* ============ TOKENS ============ */
:root{
  --ink:#081D34;
  --ink-2:#0c2442;
  --ink-3:#112c50;
  --panel:#e7edf3;
  --panel-2:#d7e1ea;
  --gold:#3a8dff;
  --gold-light:#8ec0ff;
  --ember:#22d3ee;
  --steel:#4a5c72;
  --steel-light:#8fa3b8;
  --paper:#edf2f7;
  --carbon:#0b1420;
  --line-dark: rgba(237,242,247,0.14);
  --line-light: rgba(11,20,32,0.14);
  --ff-display:'Big Shoulders Display', sans-serif;
  --ff-body:'Manrope', sans-serif;
  --ff-mono:'JetBrains Mono', monospace;
  --site-gutter: clamp(22px, 3vw, 56px);
  --ease: cubic-bezier(.16,.84,.32,1);
  --ease2: cubic-bezier(.65,0,.35,1);
}
 /* =========================================================
   HORIZON STEEL — WIRE RODS
========================================================= */

:root {

  --hz-blue: #168cff;
  --hz-blue-light: #61b4ff;

  --hz-dark: #020912;
  --hz-navy: #06111e;

  --hz-white: #f5f7fa;
  --hz-muted: rgba(255,255,255,0.73);

  --hz-display:
    "Arial Narrow",
    "Roboto Condensed",
    "Helvetica Neue Condensed",
    Impact,
    sans-serif;

  --hz-body:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  --hz-mono:
    "Courier New",
    monospace;

}

:root {
  --hz-blue: #168cff;
  --hz-blue-soft: #65b4ff;

  --hz-navy: #06111d;
  --hz-navy-deep: #020912;

  --hz-white: #f4f7fb;
  --hz-grey: #aab4bf;
  --hz-grey-dark: #66717d;

  --hz-orange: #ff6a00;

  --hz-border: rgba(255, 255, 255, 0.18);

  --display-font:
    "Arial Narrow",
    "Roboto Condensed",
    "Helvetica Neue Condensed",
    Impact,
    sans-serif;

  --body-font:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  --mono-font:
    "Courier New",
    monospace;}
:root {

  --hz-blue: #168cff;
  --hz-blue-light: #62b6ff;

  --hz-navy: #05111e;
  --hz-dark: #020912;

  --hz-white: #f5f7fa;

  --hz-grey:
    rgba(255, 255, 255, 0.72);

  --hz-border:
    rgba(255, 255, 255, 0.28);

  --hz-display:
    "Arial Narrow",
    "Roboto Condensed",
    "Helvetica Neue Condensed",
    Impact,
    sans-serif;

  --hz-body:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  --hz-mono:
    "Courier New",
    monospace;

}
  
:root {

  --hz-blue: #168cff;
  --hz-blue-light: #55aaff;
	
  --hz-dark: #020912;
  --hz-navy: #06111c;

  --hz-white: #f4f7fa;

  --hz-muted:
    rgba(255, 255, 255, 0.70);

  --hz-border:
    rgba(255, 255, 255, 0.28);

  --hz-display:
    "Arial Narrow",
    "Roboto Condensed",
    "Helvetica Neue Condensed",
    Impact,
    sans-serif;

  --hz-body:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  --hz-mono:
    "Courier New",
    monospace;

}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--gold);color:var(--carbon);}

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

.eyebrow{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:''; display:inline-block;
   height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
}
.section-light .eyebrow{color:#2f6fe0;}
.hero.loaded .eyebrow::before{ transform:scaleX(1); transition:transform 1s var(--ease) .6s; }

.wrap,
section:not(:has(.wrap)) {
  width:100%;
  max-width:none;
  margin:0;
  padding-left: 200px;
  padding-right: 200px;
}
@media (max-width:768px){
  .wrap,
  section:not(:has(.wrap)) {
    padding-left:22px;
    padding-right:22px;
  }
}

section{position:relative; box-sizing:border-box;}

/* ============ CUSTOM CURSOR ============ */
#cursor-dot, #cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
#cursor-dot{width:6px;height:6px;background:var(--gold-light);}
#cursor-ring{width:34px;height:34px;border:1px solid rgba(201,151,62,.55);transition:width .25s var(--ease), height .25s var(--ease), border-color .25s;}
#cursor-ring.ring-hover{width:58px;height:58px;border-color:var(--ember);}
@media (hover:none), (pointer:coarse){ #cursor-dot,#cursor-ring{display:none;} }

/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; background:var(--ink); z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s;
  gap:22px;
}
#preloader.done{opacity:0; visibility:hidden;}
.preloader-logo {
  width:min(270px, 72vw);
  height:auto;
  aspect-ratio:1137 / 148;
  object-fit:contain;
  margin-bottom: 10px; /* Space between logo and loading bar */
}
.pl-bar{width:220px;height:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;}
.pl-bar::after{
  content:'';position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--ember));
  animation:plfill 1.4s var(--ease2) forwards;
}
@keyframes plfill{ to{ width:100%; } }

/* ============ WIRE PROGRESS SPINE ============ */
#wire-spine{
  position:fixed; right:26px; top:0; height:100vh; width:34px; z-index:40;
  display:flex; align-items:center; pointer-events:none;
}
#wire-spine svg{overflow:visible;}
@media (max-width:900px){ #wire-spine{display:none;} }

/* ============ NAV ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:26px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:14px 0;
  background:rgba(8,29,52,0.88);
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{display:inline-flex; align-items:center; flex-shrink:0;}
.logo .site-logo{
  width:363px;
  height:auto;
  aspect-ratio:1137 / 148;
  object-fit:contain;
  transition:width .4s var(--ease);
}
header.scrolled .logo .site-logo{width:205px;}
.nav-links{display:flex; gap:34px; align-items:center;}
.nav-links a{
  font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  position:relative; padding:6px 0; color:var(--paper); opacity:.82;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{opacity:1;}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:18px;}
.burger{display:none; width:32px; height:22px; position:relative; background:none; border:0; z-index:1010; cursor:pointer;}
.burger span{position:absolute; left:0; right:0; height:2px; background:var(--paper); border-radius:2px; transition:transform .35s var(--ease), opacity .35s, background .35s;}
.burger span:nth-child(1){top:0;} .burger span:nth-child(2){top:9px;} .burger span:nth-child(3){top:18px;}
.burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg); background:var(--gold-light);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg); background:var(--gold-light);}

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0; top:0; left:0; width:100vw; height:100vh; height:100dvh;
    background:rgba(6, 20, 38, 0.97); backdrop-filter:blur(20px) saturate(130%);
    flex-direction:column; justify-content:flex-start; align-items:flex-start;
    padding:100px 28px 40px; gap:16px; z-index:999;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateY(-100%); opacity:0; visibility:hidden;
    transition:transform .45s var(--ease2), opacity .35s var(--ease), visibility .35s;
  }
  .nav-links.open{transform:translateY(0); opacity:1; visibility:visible;}
  
  .nav-links > a,
  .nav-links > .nav-item-dropdown {
    width: 100%;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }

  .nav-links.open > a,
  .nav-links.open > .nav-item-dropdown {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-links.open > *:nth-child(1){ transition-delay:0.06s; }
  .nav-links.open > *:nth-child(2){ transition-delay:0.11s; }
  .nav-links.open > *:nth-child(3){ transition-delay:0.16s; }
  .nav-links.open > *:nth-child(4){ transition-delay:0.21s; }
  .nav-links.open > *:nth-child(5){ transition-delay:0.26s; }
  .nav-links.open > *:nth-child(6){ transition-delay:0.31s; }

  .nav-links a {
    font-size: 20px;
    font-weight: 700;
    color: var(--paper);
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links a::after { display: none; }

  .nav-cta .btn{display:none;}
  .burger{display:block;}
}

/* ============ BUTTONS ============ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:12.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:15px 26px; border-radius:2px; overflow:hidden; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .4s, background .4s, color .4s;
}
.btn:active{transform:scale(.97);}
.btn svg{ transition:transform .4s var(--ease2); }
.btn-solid{
  background:white; color:var(--ink);
  box-shadow:0 10px 30px -8px rgba(58, 141, 255,.4);
}
.btn-solid::before{
  content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--ember), var(--gold-light));
  transform:translateX(-100%); transition:transform .45s var(--ease2); z-index:0;
}
.btn-solid span{position:relative;z-index:1;}
.btn-solid:hover::before{transform:translateX(0);}
.btn-solid:hover{box-shadow:0 12px 34px -8px rgba(34, 211, 238,.5);}
.btn-solid:hover svg{transform:translateX(4px);}
.btn-outline{border:1px solid rgba(255,255,255,.2); color:var(--paper); background:transparent;}
.btn-outline svg{ opacity:0; transform:translateX(-8px); }
.btn-outline:hover{border-color:var(--gold); color:var(--gold-light); background:rgba(58, 141, 255, .1);}
.btn-outline:hover svg{ opacity:1; transform:translateX(0); }
.section-light .btn-outline{border-color:var(--line-light); color:var(--carbon);}
.section-light .btn-outline:hover{border-color:var(--gold);}
.btn-arrow{font-family:var(--ff-mono); font-size:13px; letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px; color:var(--gold); font-weight:600; text-transform:uppercase;}
.btn-arrow svg{transition:transform .35s var(--ease);}
.btn-arrow:hover svg{transform:translateX(6px);}

/* ============ HERO ============ */
.hero{
  min-height:100vh; display:flex; align-items:center;
  padding:120px 0 80px; overflow:hidden; background:var(--ink);
}
/* ============ HERO VIDEO BACKGROUND ============ */
.hero-bg-light{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(40,130,255,0.1), transparent 25%);
}
.hero-video-bg {
  position: absolute; inset:0; width: 100%; height: 100%;
  object-fit: cover; z-index:0; opacity:.18;
  transform:scale(1.1);
}
.hero-grid-overlay{
  position:absolute; inset:0; z-index:1;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 70px 70px;
  pointer-events:none;
  opacity:0;
  animation: panGrid 20s linear infinite;
}
@keyframes panGrid { from{background-position:0 0;} to{background-position:70px 70px;} }
.hero-marks{
  position:absolute; left:var(--site-gutter); bottom:40px; z-index:2; display:flex; gap:34px; flex-wrap:wrap;
}
.hero-mark-item{
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-light);
  display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(10px);
}
.hero.loaded .hero-mark-item{ opacity:1; transform:translateY(0); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.hero.loaded .hero-mark-item:nth-child(1){ transition-delay:1.5s; }
.hero.loaded .hero-mark-item:nth-child(2){ transition-delay:1.6s; }
.hero.loaded .hero-mark-item:nth-child(3){ transition-delay:1.7s; }
.hero-mark-item::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 10px var(--gold); transition:background .3s, box-shadow .3s;
}
.hero-mark-item:hover::before{ background:var(--ember); box-shadow:0 0 12px var(--ember); }
@media (max-width:768px){ .hero-marks{display:none;} .hero{align-items:flex-start; padding-top:140px;} }
.hero::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(58, 141, 255, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(34, 211, 238, 0.08), transparent 70%);
  pointer-events:none;
  opacity:0;
}
.hero.loaded .hero-grid-overlay, .hero.loaded::after{ opacity:1; transition:opacity 1.2s var(--ease) .4s; }
.hero-inner{
  position:relative; z-index:2;
  margin: 0;
  width: 100%;
}
.hero-content-main{
  max-width: 1000px;
  margin-left: 0;
}
.hero-title{
  font-family:var(--ff-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(4rem, 9vw, 10rem); line-height:.92; letter-spacing:-.02em; margin:20px 0 30px;
  position:relative;
}
.hero-title .line{display:block; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
.hero-title .line > span{
  display:block; transform:translateY(110%); filter:blur(5px);
}
.hero.loaded .hero-title .line > span{
  transform:translateY(0); filter:blur(0);
  transition:transform 1.2s var(--ease), filter 1s var(--ease);
}
.hero.loaded .hero-title .line:nth-child(1) > span{ transition-delay:.8s; }
.hero.loaded .hero-title .line:nth-child(2) > span{ transition-delay:1s; }
.hero-title::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg, transparent 0%, rgba(200,225,255,.4) 50%, transparent 100%);
  background-size:200% 100%;
  background-position:-200% 0;
  mix-blend-mode:color-dodge;
  opacity:.4;
  animation: lightSweep 8s ease-in-out infinite 4s;
}
@keyframes lightSweep {
  0% { background-position:-200% 0; }
  40% { background-position:200% 0; }
  100% { background-position:200% 0; }
}
.hero-sub{
  font-size:clamp(15px,1.7vw,19px); max-width:560px; color:var(--steel-light); line-height:1.6; margin-bottom:44px;
  opacity:0; transform:translateY(20px);
}
.hero.loaded .hero-sub{opacity:1; transform:translateY(0); transition:opacity 1s var(--ease) 1.3s, transform 1s var(--ease) 1.3s;}
.hero-cta{
  display:flex; gap:18px; flex-wrap:wrap; opacity:0; transform:translateY(20px);
}
.hero.loaded .hero-cta{opacity:1; transform:translateY(0); transition:opacity 1s var(--ease) 1.5s, transform 1s var(--ease) 1.5s;}
.scroll-cue{
  position:absolute; bottom:46px; right:40px; display:flex; align-items:center; gap:12px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-light);
  z-index:2; writing-mode:vertical-rl; transform:rotate(180deg);
  opacity:0;
}
.hero.loaded .scroll-cue{ opacity:1; transition:opacity 1s 2s; }
.scroll-cue .line-anim{width:1px; height:40px; background:rgba(255,255,255,.15); position:relative; overflow:hidden; margin-top:12px;}
.scroll-cue .line-anim::after{content:'';position:absolute;left:0;top:0;width:100%;height:50%;background:var(--gold);animation:scrollflow 2.2s ease-in-out infinite;}
@keyframes scrollflow{ from{transform:translateY(-100%);} to{transform:translateY(200%);} }
@media (max-width:900px){
  .scroll-cue{display:none;}
  .hero-content-main{max-width:100%;}
}
@media (max-width:640px){
  .hero{padding-top:120px;}
  .hero-title{letter-spacing:-.03em;}
}

/* ============ STATS STRIP ============ */
.stats{border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.stat{padding:44px 30px; border-right:1px solid var(--line-dark); text-align:left;}
.stat:last-child{border-right:none;}
.stat-num{font-family:var(--ff-display); font-weight:800; font-size:clamp(34px,4vw,58px); color:var(--paper); line-height:1;}
.stat-num .suffix{color:var(--gold);}
.stat-label{margin-top:10px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.05em; color:var(--steel-light); text-transform:uppercase; line-height:1.5;}
@media (max-width:900px){ .stats-grid{grid-template-columns:repeat(2,1fr);} .stat{border-bottom:1px solid var(--line-dark);} }

/* ============ REVEAL UTILS ============ */
/* Default state for all reveal elements (hidden) */
[data-reveal], [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(5px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}

/* Entrance animation when .in-view is added */
[data-reveal].in-view, [data-reveal-stagger].in-view > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Exit animation when .in-view is removed */
[data-reveal]:not(.in-view), [data-reveal-stagger]:not(.in-view) > * {
  opacity: 0;
  transform: translateY(-40px);
  filter: blur(5px);
}

/* Stagger delays for child elements */
[data-reveal-stagger].in-view > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-stagger].in-view > *:nth-child(2) { transition-delay: 0.15s; }
[data-reveal-stagger].in-view > *:nth-child(3) { transition-delay: 0.25s; }
[data-reveal-stagger].in-view > *:nth-child(4) { transition-delay: 0.35s; }
[data-reveal-stagger].in-view > *:nth-child(5) { transition-delay: 0.45s; }
[data-reveal-stagger].in-view > *:nth-child(6) { transition-delay: 0.55s; }


/* ============ SECTION HEADERS ============ */
.section-pad{padding:120px 0;}
@media (max-width:768px){ .section-pad{padding:80px 0;} }
.section-light{background:var(--panel); color:var(--carbon);}
.section-head{max-width:760px; margin-bottom:64px;}
.section-head h2{
  font-family:var(--ff-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(34px,4.6vw,64px); line-height:1.02; margin:18px 0 0;
}
.section-head p{margin-top:22px; font-size:17px; line-height:1.7; color:var(--steel-light); max-width:620px;}
.section-light .section-head p{color:#3c5468;}

/* ============ WHY HORIZON ============ */
.why-horizon-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:150px 0;
  --merge-image:url('img/optimized/second-DSC02680.webp');
  background:#edf0ee;
}
.why-horizon-section::before{
  display:none;
}
.why-horizon-wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, .78fr);
  align-items:center;
  gap:48px;
}
.why-content-box{
  width:100%;
  max-width:680px;
  padding:52px;
  border:1px solid rgba(35,48,55,.22);
  background:rgba(255,255,255,.9);
  box-shadow:0 24px 65px rgba(31,42,47,.18);
}
.why-content-box .section-head{margin-bottom:42px;}
.why-content-box .section-head h2{color:var(--carbon);}
.why-content-box .eyebrow{color:#9d722c;}
.why-points{display:flex; flex-direction:column; gap:30px;}
.why-point{padding-left:20px; border-left:2px solid var(--gold);}
.why-point h3{font-family:var(--ff-display); font-weight:700; font-size:25px; text-transform:uppercase; color:var(--carbon); margin:0 0 10px;}
.why-point p{font-size:15px; line-height:1.7; color:#3c5468; margin:0;}
.why-rebar-visual{
  position:relative;
  min-height:430px;
  overflow:hidden;
}
.why-rebar-visual::before{
  content:'';
  position:absolute;
  z-index:0;
  top:12%; right:5%; bottom:12%; left:5%;
  border:1px solid rgba(185,132,45,.55);
  transform:skewY(-7deg);
}
.why-rebar-frame{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
}
.why-rebar-frame img{
  position:absolute;
  top:0; left:50%;
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  filter:drop-shadow(0 28px 22px rgba(5,18,29,.32));
  transform:translate(-50%, -22%) rotate(-5deg);
}
.why-rebar-visual.rebar-motion-active .why-rebar-frame img{
  animation:whyRebarSlideIn 1.65s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes whyRebarSlideIn{
  from{opacity:0; transform:translate(70%, -22%) rotate(-13deg);}
  to{opacity:1; transform:translate(-50%, -22%) rotate(-5deg);}
}
@media (max-width:768px){
  .why-horizon-section{padding:90px 0;}
  .why-horizon-section::before{background-position:58% center;}
  .why-horizon-wrap{grid-template-columns:1fr; gap:14px;}
  .why-content-box{padding:34px 26px;}
  .why-content-box .section-head{margin-bottom:34px;}
  .why-rebar-visual{min-height:300px; max-width:520px; width:100%; margin:0 auto;}
}

/* ============ IMAGE CONTENT SECTIONS ============ */
.image-content-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:150px 0;
  --merge-image:var(--section-image);
  background:#edf0ee;
}
.who-we-are-section{--section-image:url('img/optimized/first-DSC02812.webp');}
.strategic-sourcing-section{--section-image:url('img/optimized/second-DSC02728.webp');}
.quality-assurance-section{--section-image:url('img/optimized/first-DSC03084.webp');}
.image-content-section::before{
  display:none;
}
.image-content-box{
  width:min(100%, 680px);
  padding:52px;
  border:1px solid rgba(35,48,55,.22);
  background:rgba(255,255,255,.9);
  box-shadow:0 24px 65px rgba(31,42,47,.18);
}
.image-content-box h2{font-family:var(--ff-display); font-weight:800; text-transform:uppercase; color:var(--carbon); margin:16px 0 0; line-height:1.05;}
.image-content-box .eyebrow{color:#9d722c;}
.image-content-box .body p,
.image-content-box p[style]{color:#3c5468 !important;}
.image-content-box .member-chip{border-color:rgba(35,48,55,.2); color:#3c5468; background:#f5f6f4;}
@media (max-width:768px){
  .image-content-section{padding:90px 0;}
  .image-content-section::before{background-position:58% center;}
  .image-content-box{padding:34px 26px;}
}

/* ============ HOME SECTION RHYTHM & SOFT MERGES ============ */
/* Every homepage panel spans the viewport and shares a consistent visual depth.
   Sections that need more room (such as Contact) can still grow with their content. */
.home-merge{
  position:relative;
  z-index:1;
  isolation:isolate;
  width:100%;
  min-height:680px;
  /* Match the fade depth so the following photo has room to dissolve in. */
  margin-top:-220px;
  padding:220px 0;
  overflow:visible;
}
.home-merge::before{
  content:'';
  position:absolute;
  top:0;
  left:-3%;
  right:-3%;
  height:220px;
  z-index:1;
  pointer-events:none;
  background:var(--merge-image, none) center top/cover no-repeat;
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.8;
  filter:blur(16px) saturate(1.08);
  transform:scale(1.04);
  transform-origin:center top;
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  backdrop-filter:blur(14px) saturate(115%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 38%, #000 72%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 38%, #000 72%, transparent 100%);
}
.home-merge::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(5,14,24,.16), rgba(5,14,24,.16)), var(--merge-image, none);
  background-position:center, center calc(50% + var(--parallax-offset, 0px));
  background-size:cover, cover;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 15%, #000 32%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 15%, #000 32%, #000 100%);
}
.home-merge > *{position:relative; z-index:2;}
.home-merge > .section-pad{padding:0 !important;}
.home-merge.why-horizon-section,
.home-merge.image-content-section,
.home-merge.home-photo-section{background-color:transparent;}

/* Shared frosted-glass surfaces for homepage content and data cards. */
.home-merge :is(.why-content-box, .image-content-box, .vm-card, .snap-card,
  .iso-tab-btn, .iso-detail-card, .iso-spec-box, .prod-card, .wire-copy,
  .contact-grid form, .contact-detail, .csr-row, .leadership){
  background:rgba(8,29,52,.56);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 20px 52px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.home-merge :is(.why-content-box, .image-content-box, .leadership){color:var(--paper);}
.home-merge :is(.why-content-box, .image-content-box) h2{color:#fff;}
.home-merge :is(.why-content-box, .image-content-box) :is(p, p[style], .body p){color:rgba(237,242,247,.88) !important;}
.home-merge :is(.why-content-box, .image-content-box) .eyebrow{color:var(--gold-light);}
.home-merge .why-content-box .why-point h3{color:#fff;}
.home-merge .why-content-box .why-point{border-left-color:var(--gold-light);}
.home-merge .leadership p[style]{color:rgba(237,242,247,.9) !important;}
.home-merge .wire-copy :is(h2, p, p strong){color:var(--paper) !important;}
.home-merge .wire-copy .eyebrow{color:var(--gold-light);}
.home-merge .contact-grid form{padding:34px;}
.home-merge .contact-detail{padding:22px 24px; margin-bottom:16px;}
.home-merge .csr-row{padding:48px; margin-bottom:20px; border-bottom:0;}
.home-merge .leadership{padding:42px;}
.home-merge .vm-card:hover{transform:none; border-color:rgba(255,255,255,.24); box-shadow:0 20px 52px rgba(0,0,0,.28);}
.home-merge .snap-card:hover{border-color:rgba(255,255,255,.24); box-shadow:0 20px 52px rgba(0,0,0,.28);}
.home-merge .snap-card:hover::after{transform:none;}
@media (max-width:768px){
  .home-merge{min-height:0; margin-top:-100px; padding:100px 0;}
  .home-merge::before{height:100px; filter:blur(10px) saturate(1.04);}
  .home-merge .contact-grid form{padding:26px;}
  .home-merge .csr-row, .home-merge .leadership{padding:28px;}
}
.home-photo-section{position:relative; isolation:isolate; overflow:hidden; --merge-image:var(--home-bg); background:#e9ecea;}
.home-photo-section::before{display:none;}
.home-merge.home-photo-section::before{display:block;}
.snapshot-home-section{--home-bg:url('img/optimized/second-DSC03547.webp');}
.vision-home-section{--home-bg:url('img/optimized/first-DSC03548.webp');}
.leadership-home-section{--home-bg:url('img/optimized/second-DSC02742.webp');}
.iso-home-section{--home-bg:url('img/optimized/first-DSC03081.webp');}
.technology-home-section{--home-bg:url('img/optimized/second-DSC03309.webp');}
.sustainability-home-section{--home-bg:url('img/optimized/first-DSC03197.webp');}
.contact-home-section{--home-bg:url('img/optimized/first-DSC03560.webp');}
.technology-home-section{background-color:#1e292d;}
.technology-home-section::after{opacity:.72;}

/* Match the technology QA presentation on the homepage without changing
   the shared QA component used by other pages. */
.page-home .tech-quality-section{
  background-color:transparent !important;
  background-image:none !important;
}
.page-home .tech-quality-section .qa-block{
  margin-top:0;
  padding:42px;
  background:rgba(8,29,52,.56);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 20px 52px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
.page-home .tech-quality-section .sourcing-visual{
  min-height:360px;
  border-color:rgba(255,255,255,.24);
}
.page-home .tech-quality-section .apps-grid{
  gap:16px;
}
.page-home .tech-quality-section .app-card{
  min-height:190px;
  padding:24px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
}
@media (max-width:900px){
  .page-home .tech-quality-section .qa-block{
    padding:28px;
  }
}
@media (max-width:600px){
  .page-home .tech-quality-section .qa-block{
    padding:20px;
  }
  .page-home .tech-quality-section .apps-grid{
    grid-template-columns:1fr !important;
  }
}

/* Shared photo treatments for non-catalog pages. */
.about-overview-section{--home-bg:url('img/optimized/first-DSC02729.webp');}
.about-legacy-section{--home-bg:url('img/optimized/first-DSC02812.webp');}
.about-vision-section{--home-bg:url('img/optimized/first-DSC03548.webp');}
.about-sourcing-section{--home-bg:url('img/optimized/second-DSC02728.webp');}
.about-certifications-section{--home-bg:url('img/optimized/first-DSC03081.webp');}
.tech-dashboard-section{--home-bg:url('second/DSC02694.jpg');}
.tech-process-section{--home-bg:url('img/optimized/second-1.webp');}
.tech-quality-section{--home-bg:url('img/optimized/first-DSC03084.webp');}
.sustainability-dashboard-section{--home-bg:url('img/optimized/first-DSC03197.webp');}
.sustainability-detail-section{--home-bg:url('img/optimized/first-DSC02694.webp');}
.contact-main-section{--home-bg:url('img/optimized/first-DSC03560.webp');}
body:is(.page-about, .page-technology, .page-sustainability, .page-contact) .home-photo-section{
  background-color:transparent !important;
  background-image:none !important;
}
/* Give About sections breathing room while retaining the hero-to-overview merge. */
.page-about :is(.about-legacy-section, .about-vision-section, .about-sourcing-section, .about-certifications-section){
  margin-top:32px;
  padding-top:120px;
  padding-bottom:120px;
  min-height:0;
}
@media (max-width:768px){
  .page-about :is(.about-legacy-section, .about-vision-section, .about-sourcing-section, .about-certifications-section){
    margin-top:20px;
    padding-top:80px;
    padding-bottom:80px;
  }
}
body:is(.page-about, .page-technology, .page-sustainability, .page-contact) .home-merge :is(h2,h3,h4,h5,p,li,span,strong,label,a){
  color:rgba(255,255,255,.92) ;
  text-shadow:0 1px 10px rgba(0,0,0,.42);
}
body:is(.page-about, .page-technology, .page-sustainability, .page-contact) .home-merge :is(.eyebrow,.csr-num,.timeline-year,.mono-tag,.p-num){
  color:#fff !important;
}
body:is(.page-about, .page-technology, .page-sustainability, .page-contact) .home-merge :is(input,select,textarea){
  color:#fff !important;
  caret-color:#fff;
}
body:is(.page-about, .page-technology, .page-sustainability, .page-contact) .home-merge :is(.timeline-wrap,.compare-card,.csr-dash,.csr-dash-item,.app-card,.qa-block){
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.38);
  box-shadow:0 16px 42px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
}
body:is(.page-about, .page-technology, .page-sustainability, .page-contact) .home-merge :is(.btn-outline,.btn-arrow){color:#fff !important;}

/* ============ PRODUCT SNAPSHOT (home) ============ */
.section-pad:has(.snap-grid){
  position:relative; overflow:hidden;
}
.section-pad:has(.snap-grid)::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background:url(https://images.unsplash.com/photo-1593348987803-56953c9a836c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzOTM4NTZ8MHwxfGFsbHx8fHx8fHx8fDE3MjM1NTkyNDB8&ixlib=rb-4.0.3&q=80&w=1080) center/cover;
  opacity:.05;
  transform:scale(1.1);
}
.snap-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.snap-card{
  position:relative; border:1px solid rgba(255,255,255,0.15); padding:46px 40px; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 18px 42px rgba(0,0,0,0.18);
  transition:border-color .4s, box-shadow .4s, transform .45s var(--ease);
}
.snap-card:hover{border-color:rgba(58,141,255,0.55); box-shadow:0 22px 48px rgba(58,141,255,0.18); transform:translateY(-6px);}
.snap-card::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:none;
  opacity:1; transition:transform .6s var(--ease);
}
.snap-card:hover::after{transform:scale(1.02);}
.snap-card .snap-num{font-family:var(--ff-mono); font-size:12px; color:var(--gold); letter-spacing:.1em; position:relative; z-index:2;}
.snap-card h3{font-family:var(--ff-display); font-weight:800; font-size:clamp(30px,3vw,42px); text-transform:uppercase; margin:14px 0 12px; position:relative; z-index:2; color:var(--paper); text-shadow:0 2px 8px rgba(0,0,0,0.5);}
.snap-card p{font-size:14.5px; line-height:1.65; color:#cdd9e6; max-width:420px; position:relative; z-index:2; margin:0 0 22px; text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.snap-card .btn-arrow{position:relative; z-index:2;}
@media (max-width:800px){ .snap-grid{grid-template-columns:1fr;} }

/* ============ CTA BANNER ============ */
.banner{
  background:linear-gradient(120deg, var(--carbon), #1c1409 65%, #241608);
  padding:110px 0; text-align:center; position:relative; overflow:hidden;
}
.banner::before{
  content:''; position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,90,43,.22), transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:pulseglow 5s ease-in-out infinite;
}
@keyframes pulseglow{ 0%,100%{opacity:.6; transform:translate(-50%,-50%) scale(1);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.15);} }
.banner h2{position:relative; font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:clamp(32px,5.4vw,72px); margin:0 0 22px; line-height:1.02;}
.banner p{position:relative; color:var(--steel-light); font-size:17px; margin:0 0 36px;}
.banner .btn-solid{position:relative;}

/* ============ ABOUT ============ */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start;}
.two-col h2{font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,3.6vw,48px); margin:16px 0 0; line-height:1.05;}
.two-col .body p{font-size:16px; line-height:1.8; color:#25384a; margin:0 0 20px;}
.member-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
.member-chip{font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line-light); padding:9px 14px; color:#3c5468; background:var(--panel);}
.about-intro-wrapper .member-chip{border-color:rgba(255,255,255,.2); color:var(--steel-light); background:rgba(255,255,255,.05);}
.membership-highlights{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:30px;}
.membership-highlight{padding:14px 12px; border:1px solid #b9cadb; border-top:3px solid var(--gold); background:#fff;}
.membership-highlight strong{display:block; font-family:var(--ff-display); font-size:20px; font-weight:800; line-height:1; text-transform:uppercase; color:var(--carbon);}
.membership-highlight span{display:block; margin-top:6px; font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#3c5468;}
@media (max-width:600px){.membership-highlights{grid-template-columns:1fr;}}

.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:80px;}
.vm-card{
  position:relative; overflow:hidden; min-height:460px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:52px 44px; border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  box-shadow:0 18px 42px rgba(0,0,0,0.18);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.vm-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(8,29,52,0.42) 0%, rgba(8,29,52,0.72) 62%, rgba(8,29,52,0.88) 100%);
  pointer-events:none;
}
.vm-card:hover{
  transform:translateY(-6px);
  border-color:rgba(58,141,255,0.55);
  box-shadow:0 22px 48px rgba(58,141,255,0.18);
}
.vm-card .vm-bg{
  display:none;
}
.vm-card .vm-content{
  position:relative; z-index:2;
}
.vm-card.mission{background:rgba(255,255,255,0.04);}
.vm-card .eyebrow{color:var(--gold-light);}
.vm-card h3{font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:clamp(28px,3vw,38px); margin:14px 0 16px; color:var(--paper); text-shadow:0 2px 8px rgba(0,0,0,0.5);}
.vm-card p{font-size:15.5px; line-height:1.75; margin:0 0 20px; color:#cdd9e6; text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.vm-pillars{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:20px;
  border-top:1px solid var(--line-dark);
}
.vm-pillar-tag{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:6px 12px; border-radius:2px; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12); color:var(--gold-light);
  transition:background .3s, border-color .3s;
}
.vm-card:hover .vm-pillar-tag{
  background:rgba(58,141,255,0.18); border-color:var(--gold);
}
@media (max-width:800px){ .vm-grid{grid-template-columns:1fr;} }

/* ============ ISO CERTIFICATIONS SHOWCASE ============ */
.section-iso {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.iso-showcase-container {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 36px;
  align-items: stretch;
}
.iso-nav-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.iso-tab-btn {
  background: rgba(17, 44, 80, 0.4);
  border: 1px solid var(--line-dark);
  padding: 22px 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  color: var(--paper);
  cursor: pointer;
  transition: all 0.35s var(--ease);
  position: relative;
}
.iso-tab-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.35s;
}
.iso-tab-btn:hover {
  background: rgba(17, 44, 80, 0.8);
  border-color: rgba(58, 141, 255, 0.3);
  transform: translateX(4px);
}
.iso-tab-btn.active {
  background: rgba(58, 141, 255, 0.12);
  border-color: var(--gold);
}
.iso-tab-btn.active::before {
  transform: scaleY(1);
  opacity: 1;
}
.iso-tab-badge {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: rgba(58, 141, 255, 0.15);
  padding: 6px 10px;
  border-radius: 2px;
  border: 1px solid rgba(58, 141, 255, 0.25);
  white-space: nowrap;
  font-weight: 600;
}
.iso-tab-info {
  flex-grow: 1;
  margin: 0 18px;
}
.iso-tab-info h4 {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: var(--paper);
}
.iso-tab-info span {
  font-size: 13px;
  color: var(--steel-light);
  display: block;
}
.iso-tab-btn svg {
  color: var(--steel-light);
  transition: transform 0.35s var(--ease), color 0.35s;
  flex-shrink: 0;
}
.iso-tab-btn:hover svg, .iso-tab-btn.active svg {
  color: var(--gold-light);
  transform: translateX(3px);
}

.iso-detail-card {
  background: rgba(12, 36, 66, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(58, 141, 255, 0.2);
  border-radius: 4px;
  padding: 40px 44px;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
.iso-pane {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.iso-pane.active {
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 1;
  transform: translateY(0);
}
.iso-pane-header {
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 20px;
}
.iso-icon-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.iso-pane-header h3 {
  font-family: var(--ff-display);
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--paper);
}
.iso-pane-header p {
  font-size: 15px;
  line-height: 1.7;
  color: #cdd9e6;
  margin: 0;
}

.iso-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.iso-spec-box {
  background: rgba(8, 29, 52, 0.6);
  border: 1px solid var(--line-dark);
  padding: 18px 20px;
  border-radius: 2px;
}
.iso-spec-num {
  display: block;
  font-family: var(--ff-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.iso-spec-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--steel-light);
  text-transform: uppercase;
}

.iso-highlights {
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
}
.iso-highlights h4 {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.iso-highlights ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.iso-highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--paper);
}
.iso-highlights li svg {
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .iso-showcase-container {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .iso-tab-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .iso-tab-info {
    margin: 0;
  }
  .iso-spec-grid {
    grid-template-columns: 1fr;
  }
  .iso-detail-card {
    padding: 26px 22px;
  }
}

.img-container{position:relative; overflow:hidden; border:1px solid var(--line-light); background:var(--panel-2);}
.img-container img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

.sourcing{margin-top:100px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.sourcing-visual{aspect-ratio:4/3; position:relative; overflow:hidden; border:1px solid var(--line-light);}
@media (max-width:900px){ .sourcing{grid-template-columns:1fr;} }

.leadership{margin-top:100px; border-top:1px solid var(--line-light); padding-top:56px; display:grid; grid-template-columns:.5fr 1fr; gap:50px;}
@media (max-width:900px){ .leadership{grid-template-columns:1fr;} }

/* ============ PRODUCTS ============ */
.prod-intro-band{
  background-color:var(--carbon); padding:150px 0 90px; text-align:center;
  position:relative;
}
.prod-intro-band::before{
  content:''; position:absolute; inset:0; background:var(--bg-img) center/cover; opacity:.1;
}
.prod-intro-band h1{font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:clamp(40px,7vw,96px); margin:20px auto 22px; line-height:.98;}
.prod-intro-band p{max-width:640px; margin:0 auto; color:var(--steel-light); font-size:16px; line-height:1.7;}
.prod-intro-band .eyebrow{justify-content:center;}

/* ===== NEW PRODUCT SHOWCASE ===== */
.product-showcase{
  display:grid; grid-template-columns: 45% 55%;
  gap: 30px; margin-top: 60px;
  min-height: 600px;
}
.product-info-pane{ display: flex; flex-direction: column; }
.product-list{
  display:flex; flex-direction:column; gap:12px;
  flex-grow: 1;
}
.product-card-item{
  position:relative; cursor:pointer;
  border: 1px solid transparent; border-radius: 2px;
  transition: border-color .4s;
}
.product-card-item::before{
  content:''; position:absolute; left:-1px; top:15%; bottom:15%;
  width:2px; background:var(--gold);
  transform:scaleY(0); opacity:0;
  transition: transform .5s var(--ease), opacity .5s;
}
.product-card-item.active{ border-color: rgba(255,255,255,.15); }
.product-card-item.active::before{ transform:scaleY(1); opacity:1; }
.product-card-item .prod-card{
  transition: background .4s;
  height: auto;
}
.product-card-item:not(.active) .prod-card{ background: transparent; }
.product-card-item:not(.active) .prod-card h3,
.product-card-item:not(.active) .prod-card .tag,
.product-card-item:not(.active) .prod-card .subtitle,
.product-card-item:not(.active) .prod-card .desc,
.product-card-item:not(.active) .prod-card .prod-specs{ opacity: .6; }

.product-visual-pane{
  position:sticky; top: 100px; height: calc(100vh - 140px); min-height: 500px;
  background: var(--ink-2); border: 1px solid var(--line-dark);
  overflow: hidden;
}
.product-image-bg, .product-image-main{
  position:absolute; inset:0; width:100%; height:100%;
  background-size: cover; background-position: center;
  will-change: transform, opacity;
}
.product-image-bg{
  background: radial-gradient(circle at 50% 50%, rgba(8,29,52,0.5), var(--ink) 70%);
}
.product-image-main{
  transition: transform .8s var(--ease), opacity .8s var(--ease);
}
.product-image-main.exiting{
  opacity:0; transform: translateX(20%) scale(1.05);
}

.product-nav-controls{display:flex; align-items:center; gap:14px; margin-top:24px;}
.product-nav-arrow{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line-dark); background:transparent; color:var(--paper);
  display:flex; align-items:center; justify-content:center; transition:border-color .3s, background .3s, color .3s;
}
.product-nav-arrow:hover{border-color:var(--gold); color:var(--gold-light); background:rgba(58, 141, 255, .1);}
.product-nav-arrow svg{ transition: transform .3s var(--ease); }
.product-nav-arrow:hover:first-child svg{ transform:translateX(-3px); }
.product-nav-arrow:hover:last-child svg{ transform:translateX(3px); }

.prod-card{
  background:var(--ink-2); padding:44px; position:relative; overflow:hidden; border:1px solid var(--line-dark);
  --mx:50%; --my:50%;
}
.prod-card .tag{font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; color:var(--gold); text-transform:uppercase;}
.prod-card h3{font-family:var(--ff-display); font-weight:800; font-size:34px; text-transform:uppercase; margin:12px 0 6px; letter-spacing:.01em;}
.prod-card .subtitle{font-size:13.5px; color:var(--steel-light); margin:0 0 20px; font-style:normal;}
.prod-card .desc{font-size:14.5px; line-height:1.7; color:#c3ccd8; margin:0 0 26px; position:relative; z-index:1;}
.prod-specs{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; border-top:1px solid var(--line-dark); padding-top:22px; position:relative; z-index:1;}
.prod-specs div b{display:block; font-family:var(--ff-mono); font-size:17px; color:var(--gold-light); font-weight:500;}
.prod-specs div span{display:block; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--steel-light); margin-top:4px;}

.wire-section{margin-top:120px; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
@media (max-width:900px){ .wire-section{grid-template-columns:1fr; gap:40px;} }
.wire-visual{aspect-ratio:1/1;}
.wire-copy p{font-size:16px; line-height:1.8; color:var(--steel-light); margin:0 0 18px;}
.spec-strip{margin-top:130px; position:relative;}
.spec-strip::before{content:'WIRE ROD PERFORMANCE'; position:absolute; top:-14px; left:24px; z-index:1; padding:0 10px; background:var(--ink); font-family:var(--ff-mono); font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--gold);}
.spec-strip-grid{display:grid; grid-template-columns:1fr; gap:1px; padding:1px; background:rgba(255,255,255,.16);}
.spec-strip-grid > div{position:relative; display:grid; grid-template-columns:minmax(210px,.9fr) 1.7fr; align-items:center; min-height:92px; padding:22px 68px 22px 30px; overflow:hidden; background:linear-gradient(100deg, #16232b, #202b2e); transition:transform .35s var(--ease), background .35s, box-shadow .35s;}
.spec-strip-grid > div::before{content:'0' counter(spec); counter-increment:spec; position:absolute; top:50%; right:28px; transform:translateY(-50%); font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; color:rgba(255,255,255,.35);}
.spec-strip-grid{counter-reset:spec;}
.spec-strip-grid > div::after{content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg, var(--gold), transparent);}
.spec-strip-grid > div:hover{z-index:1; transform:translateX(8px); background:linear-gradient(100deg, #29353a, #1c272b); box-shadow:0 14px 30px rgba(0,0,0,.25);}
.spec-strip-grid b{display:block; font-family:var(--ff-display); font-size:clamp(22px,2vw,29px); font-weight:800; color:var(--paper); line-height:1.08; text-transform:uppercase;}
.spec-strip-grid span{display:block; padding-left:28px; border-left:1px solid rgba(255,255,255,.2); font-family:var(--ff-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light); line-height:1.45;}
@media (max-width:800px){ .spec-strip{margin-top:85px;} }
@media (max-width:560px){ .spec-strip-grid > div{grid-template-columns:1fr; gap:10px; padding:24px 55px 24px 24px;} .spec-strip-grid span{padding-left:0; border-left:none;} }
.wire-cta{margin-top:34px;}

@media (max-width:1024px){
  .product-showcase{ grid-template-columns: 1fr; }
  .product-visual-pane{ position:relative; top:0; height: 50vh; }
  .product-list{
    display: grid; grid-template-columns: 1fr 1fr;
  }
  .product-card-item .prod-card{ padding: 24px; }
  .prod-card h3{ font-size: 26px; }
}
@media (max-width:640px){ .product-list{ grid-template-columns: 1fr; } }

/* ===== HOMEPAGE PRODUCT CINEMATIC SLIDER ===== */
#products > .section-pad{ padding-top:20px; padding-bottom:20px; }
#products .section-head{margin-bottom:42px;}
.product-showcase{
  display:block;
  position:relative;
  width:100vw;
  min-height:720px;
  margin:0 0 0 calc(50% - 50vw);
  overflow:hidden;
  background:#182023;
 
}
.product-visual-pane{
  position:absolute;
  inset:0;
  top:0;
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  background:#182023;
}
.product-visual-pane::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(9,13,14,.65) 0%, rgba(9,13,14,.22) 47%, transparent 73%), linear-gradient(to top, rgba(9,13,14,.76) 0%, rgba(9,13,14,.28) 37%, transparent 67%);
}
.product-image-bg{display:none;}
.product-image-main{z-index:0; background-position:center;}
.product-slide-heading{position:absolute; top:54px; left:max(28px, calc((100% - 1240px) / 2)); z-index:2; max-width:600px; color:#fff;}
.product-slide-heading .eyebrow{color:#f0c66d; margin:0 0 14px;}
.product-slide-heading h2{font-family:var(--ff-display); font-size:clamp(30px,3.6vw,54px); line-height:.98; font-weight:800; text-transform:uppercase; margin:0 0 14px; text-shadow:0 2px 14px rgba(0,0,0,.44);}
.product-slide-heading p:last-child{margin:0; max-width:500px; font-size:14px; line-height:1.6; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.54);}
.product-info-pane{
  position:absolute;
  left:max(28px, calc((100% - 1240px) / 2));
  right:max(28px, calc((100% - 1240px) / 2));
  bottom:42px;
  z-index:2;
  display:block;
  color:#fff;
}
.product-list{display:block; max-width:620px;}
.product-card-item{display:none; border:0; cursor:default;}
.product-card-item.active{display:block;}
.product-card-item::before{display:none;}
.product-card-item .prod-card{
  max-width:620px;
  padding:0;
  border:0;
  background:transparent!important;
  overflow:visible;
}
.product-card-item:not(.active) .prod-card h3,
.product-card-item:not(.active) .prod-card .tag,
.product-card-item:not(.active) .prod-card .subtitle,
.product-card-item:not(.active) .prod-card .desc,
.product-card-item:not(.active) .prod-card .prod-specs{opacity:1;}
.prod-card .tag{display:inline-block; padding:8px 12px; border:1px solid rgba(255,255,255,.5); background:rgba(10,15,16,.54); color:#f0c66d; font-size:10px;}
.prod-card h3{font-size:clamp(48px,5.5vw,82px); line-height:.9; letter-spacing:.035em; margin:18px 0 10px; color:#fff; text-shadow:0 3px 16px rgba(0,0,0,.42);}
.prod-card .subtitle{font-family:var(--ff-mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#f4f4ef; margin:0 0 14px;}
.prod-card .desc{max-width:590px; font-size:14px; line-height:1.65; color:#f4f4ef; margin:0 0 20px; text-shadow:0 1px 8px rgba(0,0,0,.55);}
.prod-specs{max-width:570px; gap:10px 24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.48);}
.prod-specs div b{font-size:16px; color:#fff;}
.prod-specs div span{color:#e7c67e;}
.product-nav-controls{position:absolute; right:0; bottom:0; z-index:3; margin:0; gap:10px;}
.product-nav-arrow{width:52px; height:52px; border-color:rgba(255,255,255,.65); background:rgba(10,15,16,.4); color:#fff;}
.product-nav-arrow:hover{border-color:#fff; background:#fff; color:#152025;}
@media (max-width:900px){
  .product-showcase{min-height:660px;}
  .product-info-pane{left:26px; right:26px; bottom:30px;}
  .product-slide-heading{top:34px; left:26px; right:26px;}
  .product-nav-controls{right:0; bottom:auto; top:-66px;}
}
@media (max-width:600px){
  .product-showcase{min-height:690px;}
  .product-image-main{background-position:60% center;}
  .product-info-pane{left:20px; right:20px; bottom:24px;}
  .product-slide-heading{top:26px; left:20px; right:20px;}
  .product-slide-heading p:last-child{display:none;}
  .prod-card h3{font-size:52px;}
  .prod-card .desc{font-size:13px;}
  .prod-specs{grid-template-columns:1fr 1fr;}
  .product-nav-controls{top:-60px;}
  .product-nav-arrow{width:45px; height:45px;}
}

/* ===== WIRE ROD IMAGE SECTION ===== */
.wire-section{
  position:relative;
  isolation:isolate;
  width:100vw;
  min-height:620px;
  margin:0 0 0 calc(50% - 50vw);
  padding:90px max(28px, calc((100vw - 1240px) / 2));
  display:block;
  overflow:hidden;
  background:#edf0ee;
}
.wire-section::before{content:''; position:absolute; inset:0; z-index:-1; background:url('img/optimized/second-DSC03297.webp') center/cover no-repeat;}
.wire-visual{display:none;}
.wire-copy{width:min(100%, 600px); padding:40px; border:1px solid rgba(35,48,55,.2); background:rgba(255,255,255,.9); box-shadow:0 20px 48px rgba(31,42,47,.18);}
.wire-copy .eyebrow{color:#9d722c;}
.wire-copy h2{color:var(--carbon);}
.wire-copy p{color:#3c5468;}
.wire-copy p strong{color:var(--carbon)!important;}
@media (max-width:900px){.wire-section{min-height:unset; margin-top:80px; padding:80px 26px;}.wire-copy{padding:32px 26px;}}
#products .spec-strip{width:100vw; margin:0 0 0 calc(50% - 50vw); padding:72px max(28px, calc((100vw - 1240px) / 2)); background:#edf0ee;}
#products .spec-strip::before{background:#edf0ee;}
@media (max-width:800px){#products .spec-strip{padding:62px 26px;}}

/* ============ TECHNOLOGY / PROCESS ============ */
.process-wrap{position:relative; margin-top:20px;}
.process-track{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;
  border-top:1px solid var(--line-dark);
}
.process-line-fill{
  position:absolute; top:-1px; left:0; height:2px; width:0%; background:linear-gradient(90deg,var(--gold),var(--ember));
  transition:width 1.2s var(--ease);
}
.p-step{padding:44px 34px 0 0; position:relative;}
.p-step .p-num{font-family:var(--ff-mono); font-size:13px; color:var(--steel-light); display:block; margin-bottom:18px;}
.p-step.active .p-num{color:var(--gold);}
.p-step .p-dot{position:absolute; top:-6px; left:0; width:11px; height:11px; border-radius:50%; background:var(--ink); border:2px solid var(--steel); transition:all .5s var(--ease);}
.p-step.active .p-dot{background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 6px rgba(201,151,62,.18);}
.p-step h4{font-family:var(--ff-display); font-weight:700; text-transform:uppercase; font-size:23px; margin:0 0 12px;}
.p-step p{font-size:14px; line-height:1.7; color:var(--steel-light); margin:0; padding-right:8px;}
@media (max-width:900px){ .process-track{grid-template-columns:1fr; gap:40px;} .process-line-fill{display:none;} .p-step{padding-left:24px;} .p-step .p-dot{left:0;top:6px;} }

/* ===== SCROLL STORYTELLING (process) ===== */
.technology-home-section > .wrap > h3{position:relative; width:max-content; max-width:100%; padding-bottom:16px; font-size:clamp(32px,4vw,48px)!important; letter-spacing:.02em;}
.technology-home-section > .wrap > h3::after{content:''; position:absolute; bottom:0; left:0; width:72px; height:3px; background:var(--gold);}
.story-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; margin-top:50px; padding:28px; border:1px solid rgba(255,255,255,.16); background:rgba(9,15,17,.34);}
.story-sticky{position:sticky; top:110px; height:62vh; min-height:420px; align-self:start;}
.story-visual{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(24px) scale(.94); transition:opacity .6s var(--ease), transform .6s var(--ease);
  background:#182125;
  border:1px solid rgba(201,151,62,.5); overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.28);
}
.story-visual::after{content:'HORIZON STEEL · PRODUCTION FLOW'; position:absolute; left:16px; bottom:16px; padding:8px 10px; background:rgba(13,18,19,.78); border-left:2px solid var(--gold); font-family:var(--ff-mono); font-size:9px; letter-spacing:.1em; color:var(--paper);}
.story-visual.active{opacity:1; transform:translateY(0) scale(1);}
.story-visual img{width:100%; height:100%; object-fit:cover;}
.story-progress{position:absolute; left:0; bottom:-30px; width:100%; height:2px; background:var(--line-dark);}
.story-progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--gold),var(--ember)); transition:width .3s;}
.story-content{display:flex; flex-direction:column;}
.story-block{min-height:58vh; display:flex; flex-direction:column; justify-content:center; opacity:.4; transition:opacity .5s var(--ease), background .5s; border-left:2px solid rgba(255,255,255,.2); padding:34px;}
.story-block.active{opacity:1; border-left-color:var(--gold); background:linear-gradient(90deg, rgba(201,151,62,.12), transparent);}
.story-block .p-num{font-family:var(--ff-mono); font-size:13px; color:var(--steel-light); display:block; margin-bottom:16px;}
.story-block.active .p-num{color:var(--gold);}
.story-block h4{font-family:var(--ff-display); font-weight:700; text-transform:uppercase; font-size:30px; margin:0 0 14px;}
.story-block p{font-size:15.5px; line-height:1.75; color:var(--steel-light); max-width:460px; margin:0;}
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr; gap:0; padding:16px;}
  .story-sticky{position:relative; top:0; height:280px; margin-bottom:14px;}
  .story-block{min-height:auto; padding:34px 0 34px 24px; opacity:1; border-left-color:var(--line-dark);}
  .story-block.active{border-left-color:var(--gold);}
}

/* ===== PROCESS IMAGE SLIDER ===== */
.story-grid{display:block; position:relative; width:100vw; min-height:720px; margin:34px 0 0 calc(50% - 50vw); padding:0; border:0; background:#1b2528; overflow:hidden;}
.story-sticky{position:absolute; inset:0; top:0; width:100%; height:100%; min-height:0; margin:0;}
.story-visual{background:#1b2528; border:0; box-shadow:none; transform:scale(1.04);}
.story-visual.active{transform:scale(1);}
.story-visual::after{display:none;}
.process-slide-heading{position:absolute; z-index:3; top:54px; left:max(28px, calc((100% - 1240px) / 2)); max-width:580px; color:#fff;}
.process-slide-heading .eyebrow{margin:0 0 14px; color:#f0c66d;}
.process-slide-heading h3{font-family:var(--ff-display); font-size:clamp(38px,4.4vw,66px); line-height:.92; font-weight:800; text-transform:uppercase; margin:0 0 14px; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.45);}
.process-slide-heading p:last-child{margin:0; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.55);}
.story-progress{left:max(24px, calc((100% - 1180px) / 2)); bottom:28px; width:150px; z-index:3; background:rgba(255,255,255,.42);}
.story-content{position:absolute; z-index:3; left:max(24px, calc((100% - 1180px) / 2)); bottom:72px; width:min(600px, calc(100% - 48px)); display:block;}
.story-block{display:none; min-height:0; padding:28px 32px; border-left:3px solid var(--gold); background:rgba(15,20,21,.78); box-shadow:0 16px 38px rgba(0,0,0,.24);}
.story-block.active{display:flex; background:rgba(15,20,21,.78);}
.story-block .p-num{color:#f0c66d; margin-bottom:10px;}
.story-block h4{margin:0 0 10px; font-size:clamp(34px,4vw,52px); color:#fff;}
.story-block p{max-width:540px; color:#f0f2ed;}
.story-controls{position:absolute; z-index:4; right:max(24px, calc((100% - 1180px) / 2)); bottom:28px; display:flex; align-items:center; gap:12px; color:#fff;}
.story-nav-arrow{width:46px; height:46px; border:1px solid rgba(255,255,255,.65); background:rgba(15,20,21,.55); color:#fff; font-size:22px; transition:background .25s, color .25s;}
.story-nav-arrow:hover{background:#fff; color:#1b2528;}
.story-count{font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em;}
.story-count b{color:#f0c66d;}
@media (max-width:700px){
  .story-grid{min-height:650px;}
  .process-slide-heading{top:28px; left:20px; right:20px;}
  .process-slide-heading p:last-child{display:none;}
  .story-content{left:18px; bottom:82px; width:calc(100% - 36px);}
  .story-block{padding:24px;}
  .story-controls{right:18px; bottom:20px;}
  .story-progress{left:18px; bottom:42px; width:105px;}
}

.mill-grid{margin-top:110px; display:grid; grid-template-columns:1fr 1.7fr; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.14); gap:1px; counter-reset:mill-row;}
.mill-row{display:contents; counter-increment:mill-row;}
.mill-row > div{padding:27px 30px; background:#1b2528; transition:background .3s, transform .3s;}
.mill-row > div:first-child{position:relative; padding-left:66px; font-family:var(--ff-mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light); display:flex; align-items:center;}
.mill-row > div:first-child::before{content:'0' counter(mill-row); position:absolute; left:28px; top:50%; transform:translateY(-50%); width:25px; height:25px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:var(--gold); font-size:9px;}
.mill-row > div:last-child{font-size:16px; font-weight:600; line-height:1.5; color:var(--paper); background:#263135;}
.mill-row:hover > div{background:#303b3e;}
.mill-row:hover > div:last-child{background:#3a4548;}
@media (max-width:700px){
  .mill-grid{grid-template-columns:1fr;}
  .mill-row > div:first-child{padding:20px 24px 8px 58px;}
  .mill-row > div:first-child::before{left:22px; top:24px; transform:none;}
  .mill-row > div:last-child{padding:8px 24px 22px 58px;}
}

.qa-block{margin-top:110px; display:grid; grid-template-columns:.6fr 1fr; gap:60px; align-items:center;}
@media (max-width:900px){ .qa-block{grid-template-columns:1fr;} }

/* ============ MARQUEE ============ */
.marquee-wrap{overflow:hidden; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:26px 0; background:var(--ink-2);}
.marquee-track{display:flex; gap:60px; width:max-content; animation:marquee 26s linear infinite;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-track span{
  font-family:var(--ff-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-light);
  display:flex; align-items:center; gap:16px; white-space:nowrap;
}
.marquee-track span b{color:var(--gold-light); font-weight:600;}
.marquee-track span::after{content:'—'; color:var(--line-dark); margin-left:16px;}

/* ============ SUSTAINABILITY ============ */
.csr-row{display:grid; grid-template-columns:.55fr 1fr; gap:60px; align-items:center; padding:70px 0; border-bottom:1px solid var(--line-dark);}
.csr-row:last-child{border-bottom:none;}
.csr-row:nth-child(even){grid-template-columns:1fr .55fr;}
.csr-row:nth-child(even) .csr-visual{order:2;}
.csr-num{font-family:var(--ff-mono); font-size:13px; color:var(--gold); letter-spacing:.08em;}
.csr-row h3{font-family:var(--ff-display); font-weight:800; text-transform:uppercase; font-size:clamp(26px,3vw,38px); margin:14px 0 16px;}
.csr-row p{font-size:15.5px; line-height:1.8; color:var(--steel-light); margin:0; max-width:520px;}
@media (max-width:800px){ .csr-row, .csr-row:nth-child(even){grid-template-columns:1fr; gap:30px;} .csr-row:nth-child(even) .csr-visual{order:0;} }

/* ============ CONTACT ============ */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:80px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:50px;} }
.field{margin-bottom:22px;}
.field label{display:block; font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-light); margin-bottom:9px;}
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-dark); color:var(--paper);
  padding:12px 2px; font-family:var(--ff-body); font-size:15px; transition:border-color .3s; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--gold);}
.field select option{background:var(--ink);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }
.submit-row{margin-top:34px; display:flex; align-items:center; gap:20px;}
.form-msg{font-family:var(--ff-mono); font-size:12px; color:var(--gold-light); opacity:0; transition:opacity .4s;}
.form-msg.show{opacity:1;}

.quote-block{
  border-left:2px solid var(--gold); padding:8px 0 8px 26px; margin:56px 0 0; font-family:var(--ff-display);
  font-size:clamp(20px,2.4vw,28px); line-height:1.4; color:var(--gold-light); font-weight:500;
}
.quote-block cite{display:block; font-family:var(--ff-mono); font-size:12px; letter-spacing:.05em; color:var(--steel-light); margin-top:14px; font-style:normal; text-transform:uppercase;}

.contact-detail{margin-bottom:30px;}
.contact-detail h4{font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:0 0 10px;}
.contact-detail p, .contact-detail a{font-size:15px; line-height:1.7; color:var(--paper); margin:0; display:block;}
.map-embed{margin-top:10px; border:1px solid var(--line-dark); height:220px; overflow:hidden; position:relative;}
.map-embed iframe{width:100%; height:100%; border:0; filter:grayscale(.4) invert(.92) contrast(.9);}

/* ============ FOOTER ============ */
footer{background:var(--carbon); padding:90px 0 34px; border-top:1px solid var(--line-dark);}
.footer-grid{display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:50px; padding-bottom:60px; border-bottom:1px solid var(--line-dark);}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr; row-gap:40px;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }
.footer-grid h5{font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin:0 0 18px;}
.footer-grid p{font-size:14px; line-height:1.75; color:var(--steel-light); margin:0;}
.footer-grid ul li{margin-bottom:11px;}
.footer-grid ul li a{font-size:14px; color:var(--paper); opacity:.82; transition:opacity .3s, padding-left .3s;}
.footer-grid ul li a:hover{opacity:1; color:var(--gold-light);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:30px; flex-wrap:wrap; gap:16px;}
.footer-logo{ height: 38px !important; }
.foot-bottom p{font-size:12.5px; color:var(--steel-light); margin:0; font-family:var(--ff-mono);}
.foot-social{display:flex; gap:18px;}
.foot-social a{font-family:var(--ff-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--steel-light);}
.foot-social a:hover{color:var(--gold-light);}

/* util */
.mono-tag{font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
.hidden-on-mobile{ }
@media (max-width:700px){ .hidden-on-mobile{display:none;} }

/* ============ SUBPAGE HERO ============ */
.subpage-hero {
  position: relative;
  padding: 160px 0 80px;
  background: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
}
.subpage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  filter: blur(1px);
}
.subpage-hero-inner {
  position: relative;
  z-index: 2;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin-bottom: 18px;
}
.breadcrumb a {
  color: var(--paper);
  opacity: .7;
  transition: opacity .3s, color .3s;
}
.breadcrumb a:hover {
  opacity: 1;
  color: var(--gold-light);
}
.breadcrumb span.sep {
  color: var(--gold);
}
.subpage-hero h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(38px, 6.5vw, 84px);
  line-height: 0.98;
  letter-spacing: -.02em;
  margin: 12px 0 20px;
  color: var(--paper);
}
.subpage-hero p.hero-lead {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
  color: var(--steel-light);
  max-width: 720px;
  margin: 0;
}

/* Page specific hero backgrounds */
.subpage-hero.about-hero::before { background-image: url('img/optimized/first-DSC02729.webp');  }
.subpage-hero.about-hero{
  min-height:740px;
  display:flex;
  align-items:flex-end;
  padding:190px 0 260px;
}
@media (max-width:768px){
  .subpage-hero.about-hero{
    min-height:610px;
    padding:150px 0 150px;
  }
}
.subpage-hero.products-hero::before { background-image: url('img/optimized/first-DSC02812.webp'); }
.subpage-hero.tech-hero::before { background-image: url('second/DSC02694.jpg'); }
.subpage-hero.sustainability-hero::before { background-image: url('img/optimized/first-DSC02694.webp'); }
.subpage-hero.contact-hero::before { background-image: url('img/optimized/second-DSC02680.webp'); }

/* Sustainability hero: keep the impact metrics beside the introductory copy. */
.sustainability-hero .sustainability-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.sustainability-hero .subpage-hero-inner { z-index: auto; }
.sustainability-hero .hz-sustainability-stats {
  width: 100%;
  min-height: 0;
  grid-template-columns: 1fr;
}
.sustainability-hero .hz-sus-stat { padding: 20px 24px; }
.sustainability-hero .hz-sus-stat:not(:last-child)::after {
  top: auto;
  right: 24px;
  bottom: 0;
  left: 24px;
  width: auto;
  height: 1px;
}
@media (max-width: 900px) {
  .sustainability-hero .sustainability-hero-layout { grid-template-columns: 1fr; }
  .sustainability-hero .hz-sustainability-stats { grid-template-columns: repeat(3, 1fr); }
  .sustainability-hero .hz-sus-stat:not(:last-child)::after {
    top: 24px;
    right: 0;
    bottom: 24px;
    left: auto;
    width: 1px;
    height: auto;
  }
}
@media (max-width: 620px) {
  .sustainability-hero .hz-sustainability-stats { grid-template-columns: 1fr; }
  .sustainability-hero .hz-sus-stat:not(:last-child)::after {
    top: auto;
    right: 24px;
    bottom: 0;
    left: 24px;
    width: auto;
    height: 1px;
  }
}

/* ============ SPECS TABLE ============ */
.specs-table-wrap {
  margin-top: 50px;
  overflow-x: auto;
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
}
.specs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 680px;
}
.specs-table th {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--ink-3);
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-dark);
}
.specs-table td {
  padding: 18px 24px;
  font-size: 14.5px;
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--ff-body);
}
.specs-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.specs-table td.mono {
  font-family: var(--ff-mono);
  color: var(--gold-light);
}

/* ============ CSR DASHBOARD ============ */
.csr-dash {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
  padding: 40px;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
}
.csr-dash-item b {
  font-family: var(--ff-display);
  font-size: clamp(32px, 4vw, 54px);
  color: var(--ember);
  display: block;
  line-height: 1;
}
.csr-dash-item span {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--steel-light);
  margin-top: 10px;
  display: block;
}
@media (max-width: 768px) {
  .csr-dash { grid-template-columns: 1fr; gap: 30px; }
}

/* ============ ACTIVE PAGE NAV HIGHLIGHT ============ */
.nav-links a.active-page {
  color: var(--gold-light);
  opacity: 1;
}
.nav-links a.active-page::after {
  width: 100%;
}

/* ============ BESPOKE SUBPAGE COMPONENTS ============ */

/* --- Timeline Component (About Page) --- */
.about-overview-section{
  --parallax-offset:-110px;
  min-height:0;
  padding-bottom:92px;
}
.about-overview-card{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(290px,.85fr);
  gap:54px;
  max-width:900px;
  padding:38px 42px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.14);
  box-shadow:0 16px 42px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
}
.about-overview-copy h2{
  margin:14px 0 0;
  font-family:var(--ff-display);
  font-weight:800;
  font-size:clamp(38px,4.4vw,62px);
  line-height:.95;
  text-transform:uppercase;
}
.about-overview-copy .body{margin-top:24px; max-width:560px;}
.about-overview-copy .body p{margin:0 0 17px; font-size:16px; line-height:1.82;}
.company-profile-links{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:28px;}
.company-profile-label{
  margin-right:5px;
  font-family:var(--ff-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-light) !important;
}
.company-profile-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(255,255,255,.08);
  color:#fff !important;
  font-family:var(--ff-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1;
  text-transform:uppercase;
  text-shadow:none !important;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.company-profile-btn:hover{background:var(--gold); border-color:var(--gold); transform:translateY(-2px);}
.company-profile-btn span{color:inherit !important; font-size:14px; text-shadow:none !important;}
.overview-card-footer{
  display:flex;
  align-items:flex-end;
  border-left:1px solid rgba(255,255,255,.22);
  padding-left:42px;
}
.about-overview-card .membership-highlights{width:100%; grid-template-columns:1fr; margin:0; gap:9px;}
.about-overview-card .membership-highlight{
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 17px;
  border:1px solid rgba(255,255,255,.32);
  border-left:3px solid var(--gold-light);
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
}
.about-overview-card .membership-logo{
  display:block;
  order:2;
  flex:0 0 64px;
  width:64px;
  height:64px;
  margin-left:auto;
  object-fit:contain;
  object-position:center;
  padding:3px;
  border-radius:50%;
  background:#fff;
  image-rendering:auto;
}
.about-overview-card .membership-highlight > div{order:1; min-width:0;}
.about-overview-card .membership-logo--bqati{
  background:#fff url('img/memberships/bqati.webp') left center / auto 150px no-repeat;
  border-radius:50%;
}
.about-overview-card .membership-highlight strong{font-size:19px; color:#fff !important;}
.about-overview-card .membership-highlight span{color:rgba(255,255,255,.72) !important; text-shadow:none;}
.about-legacy-section{min-height:0; padding-bottom:120px;}
.legacy-section{max-width:1100px; margin-top:0;}
.legacy-heading{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:48px;
  align-items:end;
  padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.28);
}
.legacy-heading h3{
  margin:12px 0 0;
  font-family:var(--ff-display);
  font-weight:800;
  font-size:clamp(34px,4vw,56px);
  line-height:.95;
  text-transform:uppercase;
}
.legacy-heading > p{margin:0; padding-bottom:4px; font-size:15px; line-height:1.75; color:rgba(255,255,255,.78) !important;}
.about-legacy-section .timeline-wrap{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  margin-top:-105px;
  padding:0;
  border:0;
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.about-legacy-section .timeline-item{
  min-height:270px;
  margin:0;
  padding:36px 25px 16px;
  border-left:1px solid rgba(255,255,255,.24);
}
.about-legacy-section .timeline-item:last-child{border-right:1px solid rgba(255,255,255,.24);}
.about-legacy-section .timeline-item::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold-light),transparent);
}
.about-legacy-section .timeline-dot{left:20px; top:-6px; width:12px; height:12px; border-color:#173b55; box-shadow:0 0 0 5px rgba(255,255,255,.12);}
.about-legacy-section .timeline-year{font-size:10px; line-height:1.5; min-height:46px; color:var(--gold-light) !important;}
.about-legacy-section .timeline-title{font-size:18px; line-height:1.15; margin-bottom:12px;}
.about-legacy-section .timeline-desc{font-size:13px; line-height:1.65; color:rgba(255,255,255,.77) !important; text-shadow:none !important;}
@media (max-width:900px){
  .about-overview-card{grid-template-columns:1fr; gap:35px; padding:42px;}
  .overview-card-footer{border-left:0; border-top:1px solid rgba(255,255,255,.22); padding:28px 0 0;}
  .about-overview-card .membership-highlights{grid-template-columns:repeat(3,1fr);}
  .about-legacy-section .timeline-wrap{grid-template-columns:1fr 1fr;}
  .about-legacy-section .timeline-item:nth-child(2n+1){border-left:1px solid rgba(255,255,255,.24);}
  .about-legacy-section .timeline-item:nth-child(2n){border-right:1px solid rgba(255,255,255,.24);}
}
@media (max-width:600px){
  .about-overview-section{padding-bottom:90px;}
  .about-overview-card{padding:32px 24px;}
  .company-profile-links{align-items:flex-start;}
  .company-profile-label{width:100%; margin-bottom:2px;}
  .about-overview-card .membership-highlights,.legacy-heading,.about-legacy-section .timeline-wrap{grid-template-columns:1fr;}
  .legacy-section{margin-top:80px;}
  .legacy-heading{gap:20px; padding-bottom:28px;}
  .about-legacy-section .timeline-item,.about-legacy-section .timeline-item:nth-child(n){min-height:0; padding:31px 22px 25px; border-right:1px solid rgba(255,255,255,.24);}
}

/* ============ CONTINUOUS PAGE BACKGROUND ============ */
/* One visual canvas now runs behind every section instead of restarting the
   photography at each section boundary. */
body{
  --page-background:url('img/horizon-steel-factory-interior.webp');
  --page-parallax-y:0px;
  background:var(--ink);
  isolation:isolate;
}
body.page-about{--page-background:url('img/optimized/first-DSC02729.webp');}
body.page-products,
body.page-rebar,
body.page-wire-rod{--page-background:url('img/optimized/first-DSC02812.webp');}
body.page-technology{--page-background:url('second/DSC02694.jpg');}
body.page-sustainability{--page-background:url('img/optimized/first-DSC03197.webp');}
body.page-contact{--page-background:url('img/contect.avif');}

body::before{
  content:'';
  position:fixed;
  z-index:-2;
  inset:-10vh -3vw;
  pointer-events:none;
  background:
    linear-gradient(rgba(5,14,24,.50), rgba(5,14,24,.68)),
    var(--page-background) center/cover no-repeat;
  transform:translate3d(0, var(--page-parallax-y), 0) scale(1.08);
  will-change:transform;
}
body::after{
  content:'';
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,13,23,.12), rgba(4,13,23,.34));
}

/* Remove the old per-section photography and fade seams. */
body :is(.home-merge, .home-photo-section, .why-horizon-section,
  .image-content-section, .about-certifications,
  .wire-applications-section, .wire-capabilities-section){
  --merge-image:none;
  --home-bg:none;
  background-color:transparent !important;
  background-image:none !important;
}
body :is(.home-merge, .home-photo-section, .why-horizon-section,
  .image-content-section, .about-certifications,
  .wire-applications-section, .wire-capabilities-section)::before,
body :is(.home-merge, .home-photo-section, .why-horizon-section,
  .image-content-section, .about-certifications,
  .wire-applications-section, .wire-capabilities-section)::after{
  background-image:none !important;
  background-color:transparent !important;
  filter:none;
  -webkit-mask-image:none;
  mask-image:none;
}

/* Keep deliberate product/process imagery inside sliders and cards intact. */
body #technology,
body #technology.home-merge{background-color:transparent !important;}

@media (prefers-reduced-motion:reduce){
  body::before{transform:scale(1.08); will-change:auto;}
}
.timeline-wrap {
  position: relative;
  margin-top: 60px;
  padding-left: 30px;
  border-left: 2px solid var(--line-light);
}
.timeline-item {
  position: relative;
  margin-bottom: 44px;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: -37px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 4px rgba(58, 141, 255, 0.2);
}
.timeline-year {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  color: #2f6fe0;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.timeline-title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--carbon);
  margin: 0 0 8px;
}
.timeline-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: #3c5468;
  margin: 0;
}

/* --- Interactive Billet Comparison (About Page) --- */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-card {
  padding: 34px;
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
  position: relative;
}
.compare-card.highlight {
  border-color: var(--gold);
  background: linear-gradient(145deg, var(--ink-2), rgba(58, 141, 255, 0.08));
}
.compare-card h4 {
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 16px;
}
.compare-card ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.compare-card ul li {
  font-size: 14px;
  color: var(--steel-light);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
}
.compare-card ul li b {
  color: var(--paper);
  font-weight: 600;
}

/* --- Interactive Rebar Weight Calculator (Products Page) --- */
.calc-box {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  padding: 40px;
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  align-items: flex-end;
}
@media (max-width: 900px) {
  .calc-box { grid-template-columns: 1fr; }
}
.calc-field label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin-bottom: 10px;
}
.calc-field select, .calc-field input {
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line-dark);
  color: var(--paper);
  padding: 14px;
  font-family: var(--ff-body);
  font-size: 15px;
  outline: none;
  transition: border-color .3s;
}
.calc-field select:focus, .calc-field input:focus {
  border-color: var(--gold);
}
.calc-result {
  background: var(--ink-3);
  border: 1px solid var(--gold);
  padding: 20px;
  text-align: center;
}
.calc-result-num {
  font-family: var(--ff-display);
  font-size: 38px;
  font-weight: 800;
  color: var(--ember);
  line-height: 1;
}
.calc-result-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin-top: 6px;
}

/* --- Wire Rod Application Cards Grid (Products Page) --- */
.wire-applications-section,.wire-capabilities-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:130px 0;
  color:#fff;
  background:#0b1b2a;
}
.wire-applications-section::before,.wire-capabilities-section::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:center/cover no-repeat;
  transform:scale(1.03);
}
.wire-applications-section::after,.wire-capabilities-section::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg,rgba(4,16,29,.90),rgba(6,28,46,.64));
}
.wire-applications-section::before{background-image:url('img/hot-wire-rod-loop.webp');}
.wire-capabilities-section::before{background-image:url('img/optimized/second-DSC03309.webp');}
.wire-capabilities-section::after{background:linear-gradient(120deg,rgba(4,16,29,.91),rgba(8,41,61,.66));}
.wire-section-head{max-width:720px; margin-bottom:54px;}
.wire-section-head .eyebrow{color:var(--gold-light);}
.wire-section-head h2{
  margin:15px 0 20px;
  color:#fff;
  font-family:var(--ff-display);
  font-size:clamp(42px,5.3vw,76px);
  line-height:.9;
  font-weight:800;
  text-transform:uppercase;
}
.wire-section-head > p:last-child{margin:0; max-width:600px; color:rgba(255,255,255,.85); font-size:16px; line-height:1.75;}
.wire-applications-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.wire-application-card{
  position:relative;
  min-height:320px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  box-shadow:0 18px 46px rgba(0,0,0,.22);
  -webkit-backdrop-filter:blur(16px) saturate(118%);
  backdrop-filter:blur(16px) saturate(118%);
}
.wire-application-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78; transition:transform .6s var(--ease),opacity .4s var(--ease);}
.wire-application-card::after{content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(3,13,24,.96),rgba(3,13,24,.05) 72%);}
.wire-application-card > div{position:absolute; z-index:1; right:22px; bottom:21px; left:22px;}
.wire-application-card span{display:block; margin-bottom:25px; color:var(--gold-light); font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em;}
.wire-application-card h3{margin:0 0 7px; color:#fff; font-family:var(--ff-display); font-size:22px; line-height:1; text-transform:uppercase;}
.wire-application-card p{margin:0; color:rgba(255,255,255,.8); font-size:13px; line-height:1.55;}
.wire-application-card:hover img{transform:scale(1.08); opacity:1;}
.wire-application-card-featured{grid-column:span 2;}
.wire-capabilities-head{margin-bottom:46px;}
.wire-capabilities-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.wire-capabilities-grid > div{
  min-height:175px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.14);
  box-shadow:0 16px 42px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
}
.wire-capabilities-grid b{color:#fff; font-family:var(--ff-display); font-size:clamp(25px,2.7vw,38px); line-height:1; text-transform:uppercase;}
.wire-capabilities-grid span{margin-top:13px; color:rgba(255,255,255,.8); font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; line-height:1.5; text-transform:uppercase;}
@media (max-width:900px){
  .wire-applications-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wire-capabilities-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
  .wire-applications-section,.wire-capabilities-section{padding:82px 0;}
  .wire-applications-grid,.wire-capabilities-grid{grid-template-columns:1fr;}
  .wire-application-card,.wire-application-card-featured{grid-column:auto; min-height:280px;}
  .wire-capabilities-grid > div{min-height:145px;}
}
.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 900px) {
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .apps-grid { grid-template-columns: 1fr; }
}
.app-card {
  background: var(--panel);
  border: 1px solid var(--line-light);
  padding: 24px 20px;
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.app-card:hover {
  transform: translateY(-4px);
  border-color: #2f6fe0;
  background: #ffffff;
}
.app-card .app-icon {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: #2f6fe0;
  letter-spacing: .08em;
  margin-bottom: 12px;
  display: block;
}
.app-card h4 {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--carbon);
  margin: 0 0 6px;
}
.app-card p {
  font-size: 13.5px;
  color: #4a5c72;
  margin: 0;
  line-height: 1.5;
}

/* --- Quick Navigation Bar --- */
.quick-nav-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.quick-nav-btn {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--line-dark);
  color: var(--paper);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color .3s, background .3s, color .3s;
}
.quick-nav-btn:hover, .quick-nav-btn.active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

/* ============ NAVIGATION DROPDOWN ============ */
.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.dropdown-trigger svg {
  transition: transform 0.3s var(--ease);
}
.nav-item-dropdown:hover .dropdown-trigger svg {
  transform: rotate(180deg);
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(12, 36, 66, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(58, 141, 255, 0.15);
  border-radius: 10px;
  padding: 10px;
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s var(--ease);
  z-index: 1050;
  backdrop-filter: blur(18px);
}
.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu,
.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}
.dropdown-item {
  display: flex !important;
  flex-direction: column;
  padding: 12px 16px !important;
  border-radius: 8px;
  transition: background 0.25s, transform 0.25s !important;
  color: var(--paper) !important;
  opacity: 0.9 !important;
  text-transform: none !important;
}
.dropdown-item::after { display: none !important; }
.dropdown-item:hover {
  background: rgba(58, 141, 255, 0.18) !important;
  transform: translateX(4px);
  opacity: 1 !important;
}
.dropdown-item .dd-title {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.dropdown-item .dd-sub {
  font-family: var(--ff-body);
  font-size: 11.5px;
  color: var(--steel-light);
  margin-top: 3px;
}

@media (max-width: 900px) {
  .nav-item-dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .dropdown-trigger {
    font-size: 20px;
    font-weight: 700;
    color: var(--paper);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .dropdown-trigger svg {
    width: 14px;
    height: 14px;
    transition: transform 0.35s var(--ease);
  }
  .nav-item-dropdown.open .dropdown-trigger svg {
    transform: rotate(180deg);
    color: var(--gold);
  }

  .dropdown-menu {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-top: 10px;
    padding: 10px;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 8px;
    box-shadow: none;
    backdrop-filter: none;
  }

  .nav-item-dropdown.open .dropdown-menu {
    display: flex;
    animation: fadeInDropdown 0.3s var(--ease) forwards;
  }

  @keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .dropdown-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 14px !important;
    width: 100%;
  }
  .dropdown-item:hover, .dropdown-item:active {
    background: rgba(58, 141, 255, 0.18) !important;
    border-color: rgba(58, 141, 255, 0.3);
  }
}

/* ============ PRODUCT CATALOG CARDS ============ */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

/* BRAND COLOR DEFINITIONS */
.catalog-card[data-brand="gold"], .modal-product-content[data-brand="gold"] { --brand-color: #CB9A3E; --brand-glow: rgba(203, 154, 62, 0.4); }
.catalog-card[data-brand="force"], .modal-product-content[data-brand="force"] { --brand-color: #4a5cbb; --brand-glow: rgba(74, 92, 187, 0.45); }
.catalog-card[data-brand="xcel"], .modal-product-content[data-brand="xcel"] { --brand-color: #8fa3b8; --brand-glow: rgba(143, 163, 184, 0.4); }
.catalog-card[data-brand="tuff"], .modal-product-content[data-brand="tuff"] { --brand-color: #188A8B; --brand-glow: rgba(24, 138, 139, 0.45); }

.catalog-card[data-brand="lowcarbon"], .modal-product-content[data-brand="lowcarbon"] { --brand-color: #E58E26; --brand-glow: rgba(229, 142, 38, 0.4); }
.catalog-card[data-brand="medcarbon"], .modal-product-content[data-brand="medcarbon"] { --brand-color: #20BF6B; --brand-glow: rgba(32, 191, 107, 0.4); }
.catalog-card[data-brand="jislow"], .modal-product-content[data-brand="jislow"] { --brand-color: #9b59b6; --brand-glow: rgba(155, 89, 182, 0.4); }
.catalog-card[data-brand="welding"], .modal-product-content[data-brand="welding"] { --brand-color: #FA8231; --brand-glow: rgba(250, 130, 49, 0.4); }
.catalog-card[data-brand="jismed"], .modal-product-content[data-brand="jismed"] { --brand-color: #38bdf8; --brand-glow: rgba(56, 189, 248, 0.4); }
.catalog-card[data-brand="chq"], .modal-product-content[data-brand="chq"] { --brand-color: #0FB9B1; --brand-glow: rgba(15, 185, 177, 0.4); }

.catalog-card {
  background: linear-gradient(145deg, rgba(17, 44, 80, 0.85), rgba(8, 29, 52, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid var(--brand-color, rgba(255, 255, 255, 0.2));
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.catalog-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-color, linear-gradient(90deg, var(--gold), var(--ember)));
  opacity: 0.8;
  transition: opacity 0.3s var(--ease);
}
.catalog-card:hover {
  transform: translateY(-8px);
  border-color: var(--brand-color, rgba(58, 141, 255, 0.55));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px var(--brand-glow, rgba(58, 141, 255, 0.18));
}

.card-img-wrap {
  width: 100%;
  height: 190px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 22px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
}
.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.catalog-card:hover .card-img-wrap img {
  transform: scale(1.08);
}

.catalog-card-tag {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--brand-color, var(--gold-light));
  border: 1px solid var(--brand-color, rgba(58, 141, 255, 0.3));
  border-radius: 4px;
  margin-bottom: 14px;
}

.catalog-card h3 {
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 6px 0 8px;
  letter-spacing: 0.03em;
  color: #ffffff;
}

.catalog-card .card-tagline {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-color, var(--ember));
  margin-bottom: 16px;
}

.catalog-card .card-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--steel-light);
  margin-bottom: 22px;
  flex-grow: 1;
}

.catalog-card-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  margin-bottom: 22px;
  margin-top: 10px;
}

.spec-chip {
  display: flex;
  flex-direction: column;
}
.spec-chip .lbl {
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--steel-light);
  letter-spacing: 0.05em;
}
.spec-chip .val {
  font-family: var(--ff-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--paper);
  margin-top: 3px;
}

.card-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-color, var(--gold));
  padding: 13px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--brand-color, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  margin-top: 6px;
  transition: all 0.3s var(--ease);
}
.catalog-card:hover .card-action-btn {
  background: var(--brand-color, var(--gold));
  color: #ffffff;
  border-color: var(--brand-color, var(--gold));
}

/* ============ POPUP / MODAL BRAND ACCENTS ============ */
.modal-product-content .modal-header-tag {
  background: rgba(0, 0, 0, 0.4);
  color: var(--brand-color, var(--gold-light));
  border-color: var(--brand-color, rgba(58, 141, 255, 0.4));
}
.modal-product-content .modal-tagline {
  color: var(--brand-color, var(--ember));
}
.modal-product-content .modal-tab-btn.active {
  color: var(--brand-color, var(--gold));
  border-bottom-color: var(--brand-color, var(--gold));
  background: rgba(255, 255, 255, 0.06);
}
.modal-product-content .cert-highlight {
  color: var(--brand-color, var(--ember)) !important;
  font-weight: 700;
}
.modal-overview-hero-img {
  width: 100%;
  height: 240px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ============ POPUP / MODAL SYSTEM ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 22, 0.88);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.product-modal {
  background: #0d1a2d;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.8), 0 0 45px rgba(58, 141, 255, 0.18);
  border-radius: 16px;
  width: 100%;
  max-width: 980px;
  height: 88vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transform: translateY(30px) scale(0.96);
  transition: transform 0.35s var(--ease);
}
.modal-backdrop.active .product-modal {
  transform: translateY(0) scale(1);
}

.modal-product-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
  z-index: 10;
}
.modal-close-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  transform: rotate(90deg);
}

.modal-header {
  padding: 28px 36px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(17, 44, 80, 0.85), rgba(13, 26, 45, 0.5));
  position: relative;
  flex-shrink: 0;
}

.modal-header-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  background: rgba(58, 141, 255, 0.2);
  color: var(--gold-light);
  border: 1px solid rgba(58, 141, 255, 0.4);
  border-radius: 4px;
  margin-bottom: 14px;
}

.modal-header h2 {
  font-family: var(--ff-display);
  font-size: 38px;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  margin: 6px 0 10px;
  letter-spacing: 0.02em;
}

.modal-header .modal-tagline {
  font-size: 16px;
  font-weight: 600;
  color: var(--ember);
  margin: 4px 0 0;
}

.mill-stamp-badge {
  position: absolute;
  right: 80px;
  top: 28px;
  font-family: var(--ff-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  padding: 6px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 768px) {
  .mill-stamp-badge { display: none; }
  .modal-backdrop { padding: 10px; align-items: center; }
  .product-modal { height: 92vh; max-height: 92vh; border-radius: 14px; }
  .modal-header { padding: 20px 18px 16px; padding-right: 56px; }
  .modal-header-tag { margin-bottom: 10px; padding: 4px 10px; font-size: 10px; }
  .modal-header h2 { font-size: 26px; margin: 4px 0 8px; }
  .modal-header .modal-tagline { font-size: 14px; }
  .modal-body { padding: 20px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* ============ TAB SYSTEM INSIDE POPUP ============ */
.modal-nav-tabs {
  display: flex;
  background: rgba(8, 20, 36, 0.95);
  padding: 0 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 12px;
  overflow-x: auto;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .modal-nav-tabs { padding: 0 14px; gap: 6px; }
  .modal-tab-btn { padding: 12px 14px; font-size: 11px; }
}

.modal-tab-btn {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--steel-light);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}

.modal-tab-btn:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.03);
}

.modal-tab-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(58, 141, 255, 0.1);
}

.modal-body {
  padding: 32px 36px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}

.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
  animation: fadeInTab 0.3s var(--ease) forwards;
}

@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Overview Tab Styling inside Popup */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 12px;
}
@media (max-width: 700px) {
  .overview-grid { grid-template-columns: 1fr; }
}

.overview-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 20px;
}
.overview-box h4 {
  font-family: var(--ff-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0 0 12px;
}
.overview-box ul {
  padding-left: 18px;
  margin: 0;
}
.overview-box li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--paper);
  margin-bottom: 8px;
}

/* ============ MILL CERTIFICATE SPEC TABLES ============ */
.mill-cert-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  margin-top: 12px;
  background: rgba(8, 20, 36, 0.7);
}

.mill-cert-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-mono);
  font-size: 12.5px;
  text-align: left;
}

.mill-cert-table th {
  background: rgba(17, 44, 80, 0.9);
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
}

.mill-cert-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--paper);
  white-space: nowrap;
}

.mill-cert-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.mill-cert-table tbody tr:hover {
  background: rgba(58, 141, 255, 0.12);
}

.cert-highlight {
  color: var(--ember);
  font-weight: 600;
}

.table-footnote {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--steel-light);
  margin-top: 14px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============ HOMEPAGE SLIDER MERGES & NEUTRAL GLASS ============ */
#products.home-merge{--merge-image:url('img/optimized/second-gold.webp');}
#products .product-showcase,
#technology .story-grid{
  isolation:isolate;
  margin-top:0;
}
#products .product-showcase::before,
#technology .story-grid::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.12), transparent 13%, transparent 82%, rgba(255,255,255,.12));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 17%, transparent 80%, #000 100%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 17%, transparent 80%, #000 100%);
}
#products .product-slide-heading{top:76px;}
#products .product-info-pane{bottom:72px;}
#technology .process-slide-heading{top:76px;}
#technology .story-controls{bottom:48px;}

/* Neutral transparent-white glass: no blue or black card fills. */
.home-merge :is(.why-content-box, .image-content-box, .vm-card, .snap-card,
  .iso-tab-btn, .iso-detail-card, .iso-spec-box, .prod-card, .wire-copy,
  .contact-grid form, .contact-detail, .csr-row, .leadership, .story-grid,
  .mill-row > div, .spec-strip-grid > div){
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.42) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
}
.home-merge .product-card-item .prod-card{padding:30px; max-width:620px;}

/* Keep every homepage label readable on photo and glass surfaces. */
.home-merge :is(.section-head h2, .section-head p, .leadership p, .csr-row h3,
  .csr-row p, .story-block h4, .story-block p, .mill-row > div,
  .spec-strip-grid > div, .wire-copy h2, .wire-copy p){
  color:#fff !important;
  text-shadow:0 1px 12px rgba(0,0,0,.42);
}
.home-merge :is(.section-head .eyebrow, .csr-num, .story-block .p-num,
  .mill-row > div:first-child, .spec-strip-grid span){color:#fff !important;}
.home-merge .story-block.active{background:rgba(255,255,255,.12);}
.home-merge .story-block{border-left-color:rgba(255,255,255,.55);}
.home-merge .story-block.active{border-left-color:#fff;}

/* The five process cards sit alongside the process slider on larger screens. */
#technology .process-experience{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(360px, .7fr);
  gap:20px;
  align-items:stretch;
}
#technology .process-experience .story-grid{
  width:100%;
  min-height:760px;
  margin:0;
}
#technology .process-experience .process-slide-heading{top:42px; left:36px; right:36px;}
#technology .process-experience .story-content{left:36px; bottom:84px; width:calc(100% - 72px);}
#technology .process-experience .story-progress{left:36px; bottom:36px; width:120px;}
#technology .process-experience .story-controls{right:36px; bottom:30px;}
#technology .process-experience .mill-grid{
  width:auto;
  margin:0;
  padding:0;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-rows:1fr;
  align-content:stretch;
}
#technology .process-experience .mill-feature{min-height:0; padding:24px;}
#technology .process-experience .mill-feature:last-child{grid-column:span 2;}
@media (max-width:900px){
  #technology .process-experience{grid-template-columns:1fr;}
  #technology .process-experience .story-grid{min-height:680px;}
  #technology .process-experience .mill-grid{width:100%; grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:600px){
  #technology .process-experience .process-slide-heading{top:28px; left:20px; right:20px;}
  #technology .process-experience .story-content{left:20px; width:calc(100% - 40px);}
  #technology .process-experience .mill-grid{grid-template-columns:1fr;}
  #technology .process-experience .mill-feature:last-child{grid-column:auto;}
}

/* One visual group: the process slider and its performance cards. */
.process-experience{position:relative;}
#technology .process-experience .mill-grid{padding-top:32px;}

/* A subtle dark wash keeps text readable without hiding the photography. */
.wire-section{--parallax-offset:0px;}
.wire-section::before{background-position:center calc(50% + var(--parallax-offset, 0px));}
.wire-section::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:rgba(5,14,24,.14);}
.wire-section > *{position:relative; z-index:1;}
.product-image-main{background-position:center calc(50% + var(--parallax-offset, 0px));}
.story-visual::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(5,14,24,.14);}
.story-visual img{position:relative; z-index:0;}

/* Process specifications stay with the process slider as feature cards. */
#technology .mill-grid{
  width:100%;
  margin:0;
  padding:72px 0 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  overflow:visible;
  border:0;
  background:transparent;
}
#technology .mill-feature{
  min-height:200px;
  padding:28px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 16px 42px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
}
#technology .mill-feature span{
  display:block;
  font-family:var(--ff-mono);
  font-size:10px;
  letter-spacing:.11em;
  color:#fff;
}
#technology .mill-feature h4{
  margin:18px 0 10px;
  font-family:var(--ff-display);
  font-size:clamp(24px,2.3vw,34px);
  line-height:1;
  text-transform:uppercase;
  color:#fff;
}
#technology .mill-feature p{margin:0; color:rgba(255,255,255,.88); font-size:14px; line-height:1.65;}
#technology .mill-feature:last-child{grid-column:span 2;}

/* Wire Rod performance lives inside the Wire Rods showcase. */
.wire-performance{margin-top:110px; padding-top:64px; border-top:1px solid rgba(255,255,255,.35);}
.wire-performance-head{max-width:630px; margin-bottom:54px; color:#fff;}
.wire-performance-head .eyebrow{color:#fff;}
.wire-performance-head h2{
  margin:16px 0 18px;
  font-family:var(--ff-display);
  font-size:clamp(40px,5vw,70px);
  line-height:.92;
  text-transform:uppercase;
  color:#fff;
}
.wire-performance-head p{margin:0; max-width:520px; color:rgba(255,255,255,.9); line-height:1.7;}
.wire-performance-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px;}
.wire-performance-card{
  min-height:230px;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 16px 42px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
}
.wire-performance-card span{font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.75); margin-bottom:auto;}
.wire-performance-card strong{font-family:var(--ff-display); font-size:clamp(28px,3vw,42px); line-height:.95; color:#fff; text-transform:uppercase;}
.wire-performance-card p{margin:12px 0 0; color:rgba(255,255,255,.88); font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; line-height:1.5; text-transform:uppercase;}
@media (max-width:900px){
  #technology .mill-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .wire-performance-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:600px){
  #technology .mill-grid, .wire-performance-grid{grid-template-columns:1fr;}
  #technology .mill-feature:last-child{grid-column:auto;}
  #technology .mill-feature, .wire-performance-card{min-height:unset;}
  .wire-performance{margin-top:72px; padding-top:42px;}
}

/* The interactive ISO panel is retained only on About as compact badge evidence. */
.page-home #iso-certifications{display:none;}
.about-certifications{
  position:relative;
  overflow:hidden;
  padding:80px 0 100px;
  background:linear-gradient(rgba(5,14,24,.2), rgba(5,14,24,.28)), url('img/optimized/first-DSC03081.webp') center/cover no-repeat;
}
.about-certifications-inner{max-width:1000px; margin:0 auto; text-align:center; color:#fff;}
.about-certifications .eyebrow{color:#fff;}
.about-certifications h2{
  margin:16px 0 20px;
  font-family:var(--ff-display);
  font-size:clamp(46px,6vw,82px);
  line-height:.9;
  text-transform:uppercase;
  color:#fff;
}
.certification-copy{
  max-width:820px;
  margin:0 auto 34px;
  padding:20px 26px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:28px;
  background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);
  line-height:1.75;
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
}
.certification-badges{display:flex; justify-content:center; gap:24px; flex-wrap:nowrap;}
.certification-badge{
  width:150px;
  min-height:150px;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
}
.certification-badge span{font-family:var(--ff-display); font-size:34px; font-weight:800; line-height:.85;}
.certification-badge strong{margin-top:8px; font-family:var(--ff-mono); font-size:10px; letter-spacing:.04em;}
.certification-badge small{margin-top:7px; font-family:var(--ff-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78);}
.certification-badge img{display:block; max-width:100%; max-height:112px; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));}
.home-iso-certifications{
  padding:70px 0 120px;
  overflow:visible;
  box-sizing:border-box;
}
.home-iso-certifications .about-certifications-inner{padding-bottom:12px;}
.home-iso-certifications .certification-badge{
  width:180px;
  min-height:180px;
  border-radius:22px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.45);
}
.home-iso-certifications .certification-badge img{max-height:130px;}
@media (max-width:600px){.about-certifications{padding:70px 0 80px;}.home-iso-certifications{padding:70px 0 100px;}.certification-copy{padding:20px 18px;}.certification-badges{gap:16px;}.certification-badge{width:132px; min-height:132px;}.home-iso-certifications .certification-badge{width:144px; min-height:144px;}}

/* Full-width Process slider: its own changing images are the only background. */
#technology{
  --merge-image:none;
  background-color:var(--ink);
}
#technology.home-merge{
  margin-top:0;
  padding:0px 0 80px;
  min-height:0;
  overflow:hidden;
}
#technology .process-experience{display:block;}
#technology .process-experience .story-grid{
  width:100vw;
  min-height:720px;
  margin:0 0 0 calc(50% - 50vw);
}
#technology .process-experience .process-slide-heading{top:54px; left:max(28px, calc((100% - 1240px) / 2)); right:auto;}
#technology .process-experience .story-content{left:max(24px, calc((100% - 1180px) / 2)); bottom:72px; width:min(600px, calc(100% - 48px));}
#technology .process-experience .story-progress{left:max(24px, calc((100% - 1180px) / 2)); bottom:28px; width:150px;}
#technology .process-experience .story-controls{right:max(24px, calc((100% - 1180px) / 2)); bottom:28px;}
#technology .process-experience .mill-grid{
  width:100%;
  margin:0;
  padding:32px 0 0;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
#technology .process-experience .mill-feature:last-child{grid-column:span 2;}
@media (max-width:900px){
  #technology .process-experience .story-grid{min-height:680px;}
  #technology .process-experience .mill-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:600px){
  #technology .process-experience .story-grid{min-height:650px;}
  #technology .process-experience .process-slide-heading{top:28px; left:20px; right:20px;}
  #technology .process-experience .story-content{left:20px; width:calc(100% - 40px); bottom:82px;}
  #technology .process-experience .story-progress{left:20px; bottom:42px; width:105px;}
  #technology .process-experience .story-controls{right:20px; bottom:20px;}
  #technology .process-experience .mill-grid{grid-template-columns:1fr;}
  #technology .process-experience .mill-feature:last-child{grid-column:auto;}
}

/* Final cascade guard: all page-level sections share the canvas above. */
body :is(.subpage-hero, .home-merge, .home-photo-section,
  .why-horizon-section, .image-content-section, .about-certifications,
  .wire-applications-section, .wire-capabilities-section){
  background-color:transparent !important;
  background-image:none !important;
}
body > section:not(.hero),
body .section-light{
  background-color:transparent !important;
  background-image:none !important;
}
body :is(.subpage-hero, .home-merge, .home-photo-section,
  .why-horizon-section, .image-content-section, .about-certifications,
  .wire-applications-section, .wire-capabilities-section)::before,
body :is(.subpage-hero, .home-merge, .home-photo-section,
  .why-horizon-section, .image-content-section, .about-certifications,
  .wire-applications-section, .wire-capabilities-section)::after{
  background-image:none !important;
  background-color:transparent !important;
  filter:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* Clean section rhythm: no overlap bands between sections. */
body .home-merge{
  min-height:0;
  margin-top:0 !important;
  padding-top:clamp(76px, 8vw, 120px);
  padding-bottom:clamp(76px, 8vw, 120px);
  overflow:hidden;
}
body .home-merge::before,
body .home-merge::after{
  content:none !important;
  display:none !important;
}
body :is(#products .product-showcase, #technology .story-grid)::before{
  content:none !important;
  display:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Scroll reveal starts just below its resting position and plays once as the
   content enters the viewport. */
[data-reveal],
[data-reveal-stagger] > *{
  opacity:0;
  transform:translate3d(0, 28px, 0);
  filter:none;
  transition:
    opacity .72s var(--ease),
    transform .72s var(--ease);
  will-change:opacity, transform;
}
[data-reveal].in-view,
[data-reveal-stagger].in-view > *{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:none;
  will-change:auto;
}
[data-reveal]:not(.in-view),
[data-reveal-stagger]:not(.in-view) > *{
  transform:translate3d(0, 28px, 0);
  filter:none;
}
@media (max-width:768px){
  body .home-merge{
    padding-top:72px;
    padding-bottom:72px;
  }
}

/* ============ PERFORMANCE + RESPONSIVE CONSOLIDATION ============ */
/* Translucent fills preserve the glass look without keeping dozens of costly
   live backdrop-blur layers active throughout long pages. */
body *{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
[data-reveal],
[data-reveal-stagger] > *{will-change:auto;}
body::before{will-change:auto;}

@media (min-width:901px){
  header.scrolled,
  .nav-links,
  body:is(.page-technology, .page-sustainability) .csr-dash-item,
  .whatsapp-float{
    -webkit-backdrop-filter:blur(8px) saturate(115%) !important;
    backdrop-filter:blur(8px) saturate(115%) !important;
  }
}

@media (max-width:900px){
  html{scroll-padding-top:72px;}
  body::before{
    inset:0;
    transform:none !important;
    background-position:center center;
  }
  .wrap,
  section:not(:has(.wrap)){
    width:100%;
    padding-left:20px;
    padding-right:20px;
  }
  header{padding:18px 0;}
  header.scrolled{padding:12px 0;}
  .logo .site-logo{width:min(205px, 54vw);}
  .hero{
    min-height:100svh;
    padding:110px 0 64px;
    background:
      linear-gradient(rgba(5,14,24,.42), rgba(5,14,24,.68)),
      url('img/horizon-steel-hero-rolling-mill.webp') 58% center/cover no-repeat;
  }
  .hero-video-bg{display:none;}
  .hero-inner{min-height:calc(100svh - 174px); align-items:flex-end;}
  .hero-title{font-size:clamp(54px, 17vw, 86px);}
  .hero-sub{max-width:100%; font-size:15px; line-height:1.65;}
  .hero-cta{gap:12px;}
  .hero-cta .btn{min-height:48px; padding:14px 18px;}
  .subpage-hero{padding:120px 0 72px; min-height:auto;}
  .subpage-hero h1{font-size:clamp(48px, 14vw, 72px);}
  .subpage-hero .hero-lead{font-size:15px; line-height:1.7;}

  body .home-merge{
    padding-top:68px;
    padding-bottom:68px;
  }
  .section-pad{padding:68px 0;}
  .section-head{margin-bottom:38px;}
  .section-head h2{font-size:clamp(36px, 11vw, 52px);}
  .section-head p{font-size:15px;}
  .why-content-box,
  .image-content-box,
  .leadership,
  .home-merge .csr-row{padding:26px !important;}
  .why-points{grid-template-columns:1fr; gap:24px;}
  .snap-card{min-height:360px; padding:28px;}
  .leadership{margin-top:0; gap:28px;}

  .product-showcase,
  .wire-section,
  .story-grid,
  #technology .process-experience .story-grid{
    width:100% !important;
    margin-left:0 !important;
  }
  #products .product-showcase{min-height:900px;}
  #products .product-slide-heading{left:20px; right:20px; top:28px;}
  #products .product-info-pane{left:20px; right:20px; bottom:20px;}
  #products .product-card-item .prod-card{padding:22px;}
  #products .prod-card h3{font-size:clamp(42px, 13vw, 58px);}
  #products .prod-card .tag{line-height:1.45;}
  #products .prod-card .desc{line-height:1.55;}
  #products .prod-specs{gap:12px;}
  #products .wire-section{padding:68px 20px; margin-top:52px;}
  #products .wire-copy{width:100%; padding:26px;}
  .wire-performance{margin-top:64px; padding-top:42px;}
  .wire-performance-card{min-height:170px; padding:24px;}

  #technology.home-merge{padding-bottom:68px;}
  #technology .process-experience .story-grid{min-height:650px;}
  #technology .process-experience .story-content{left:20px; width:calc(100% - 40px);}
  #technology .process-experience .mill-grid{padding-top:20px;}
  #technology .mill-feature{min-height:0;}

  .csr-row,
  .csr-row:nth-child(even){padding:28px !important; gap:26px;}
  .csr-visual{min-height:260px;}
  .csr-row h3{font-size:32px;}
  body:is(.page-technology, .page-sustainability) .csr-dash-item{min-height:170px;}

  .contact-grid{gap:36px;}
  .contact-grid form{padding:26px !important;}
  .footer-grid{gap:32px;}
  footer{padding:64px 0 26px;}
  .foot-bottom{gap:18px; flex-direction:column; align-items:flex-start;}

  .table-wrap,
  .comparison-table-wrap,
  .specs-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table{max-width:none;}
  .comparison-table{min-width:680px;}
  .modal-content{width:calc(100% - 24px); max-height:90svh;}
}

@media (max-width:600px){
  .wrap,
  section:not(:has(.wrap)){padding-left:16px; padding-right:16px;}
  .hero-title{font-size:clamp(50px, 16vw, 72px);}
  .hero-cta{display:grid; grid-template-columns:1fr; width:100%;}
  .hero-cta .btn{width:100%; justify-content:center;}
  body .home-merge,.section-pad{padding-top:58px; padding-bottom:58px;}
  .why-content-box,.image-content-box,.leadership,.home-merge .csr-row{padding:22px !important;}
  .snap-card{min-height:320px;}
  #products .product-showcase{min-height:880px;}
  #products .product-slide-heading{left:16px; right:16px;}
  #products .product-slide-heading h2{font-size:34px;}
  #products .product-info-pane{left:16px; right:16px;}
  #products .product-card-item .prod-card{padding:18px;}
  #products .prod-specs{grid-template-columns:1fr 1fr;}
  #products .wire-section{padding:58px 16px;}
  .wire-performance-grid{grid-template-columns:1fr;}
  .certification-badges{display:grid; grid-template-columns:1fr 1fr;}
  .home-iso-certifications .certification-badge{width:100%; min-height:138px;}
  .iso-nav-grid{grid-template-columns:1fr;}
  .iso-detail-card{padding:22px;}
  .iso-spec-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .whatsapp-float{box-shadow:0 8px 22px rgba(0,0,0,.26);}
}

/* Product slider: reserve separate vertical zones for heading, product copy,
   specifications and navigation so none of the panels overlap the text. */
#products .product-showcase{min-height:840px;}
#products .product-slide-heading{top:54px;}
#products .product-info-pane{
  bottom:40px;
  padding-bottom:70px;
}
#products .product-nav-controls{
  top:auto;
  right:0;
  bottom:0;
}
@media (max-width:900px){
  #products .product-showcase{min-height:900px;}
  #products .product-info-pane{
    bottom:28px;
    padding-bottom:66px;
  }
  #products .product-nav-controls{top:auto; bottom:0;}
}

/* Product photography is independent from page parallax. Repainting a
   viewport-sized slider image on every scroll caused visible stutter. */
#products .product-image-main{
  background-position:center center !important;
  will-change:opacity, transform;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
#products .product-image-main.exiting{
  opacity:0;
  transform:scale(1.015);
}
@media (max-width:600px){
  #products .product-image-main{background-position:60% center !important;}
}

/* Wire Rod feature image uses the same cinematic contrast as the product
   slider while retaining the shared glass-card treatment. */
#products .wire-section::after{
  content:'';
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,14,24,.72) 0%, rgba(5,14,24,.48) 52%, rgba(5,14,24,.28) 100%),
    linear-gradient(180deg, rgba(5,14,24,.14), rgba(5,14,24,.52));
}
#products .wire-section > *{position:relative; z-index:1;}

/* Site-wide WhatsApp shortcut. */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:1100;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px 8px 8px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:999px;
  background:rgba(20,153,82,.94);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  backdrop-filter:blur(14px) saturate(125%);
  transition:transform .25s var(--ease), background .25s, box-shadow .25s;
}
.whatsapp-float:hover{
  transform:translateY(-3px);
  background:#1ebd68;
  box-shadow:0 18px 40px rgba(0,0,0,.38);
}
.whatsapp-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  overflow:hidden;
}
.whatsapp-mark img{display:block; width:38px; height:38px; object-fit:contain;}
.whatsapp-label{font-size:13px; font-weight:700; letter-spacing:.01em;}
@media (max-width:600px){
  .whatsapp-float{
    right:16px;
    bottom:16px;
    width:52px;
    min-height:52px;
    padding:7px;
  }
  .whatsapp-mark{width:38px; height:38px;}
  .whatsapp-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
}

/* Technology + Sustainability metrics: one glass surface per number card.
   The previous parent-and-child blur combination created a double overlay. */
body:is(.page-technology, .page-sustainability) .csr-dash{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  margin-top:0;
  padding:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body:is(.page-technology, .page-sustainability) .csr-dash-item{
  position:relative;
  min-height:220px;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.30) !important;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.075)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 18px 44px rgba(1,10,20,.24) !important;
  -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
  backdrop-filter:blur(18px) saturate(135%) !important;
  transition:transform .35s var(--ease), border-color .35s, background .35s, box-shadow .35s;
}
body.page-technology .tech-stat-icon{
  position:relative;
  z-index:1;
  width:52px;
  height:52px;
  margin:0 0 auto;
  color:var(--gold-light);
}
body.page-technology .tech-stat-icon svg{
  display:block;
  width:100%;
  height:100%;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body:is(.page-technology, .page-sustainability) .csr-dash-item::before{
  content:'';
  position:absolute;
  width:150px;
  height:150px;
  top:-82px;
  right:-58px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(80,166,255,.26), transparent 68%);
  pointer-events:none;
}
body:is(.page-technology, .page-sustainability) .csr-dash-item:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.48) !important;
  background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.10)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 24px 54px rgba(1,10,20,.30) !important;
}
body:is(.page-technology, .page-sustainability) .csr-dash-item b{
  position:relative;
  z-index:1;
  margin:0 0 16px;
  font-size:clamp(46px, 5.5vw, 76px);
  line-height:.86;
  color:#fff !important;
  text-shadow:0 4px 22px rgba(0,0,0,.26) !important;
}
body:is(.page-technology, .page-sustainability) .csr-dash-item span{
  position:relative;
  z-index:1;
  max-width:250px;
  margin:0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.24);
  color:rgba(255,255,255,.82) !important;
  font-size:11px;
  line-height:1.6;
  text-shadow:none !important;
}
@media (max-width:900px){
  body:is(.page-technology, .page-sustainability) .csr-dash{
    grid-template-columns:1fr;
    gap:16px;
  }
  body:is(.page-technology, .page-sustainability) .csr-dash-item{
    min-height:180px;
    padding:28px;
  }
  body.page-technology .tech-stat-icon{
    width:44px;
    height:44px;
  }
}

/* Final performance guard after all component styles. */
@media (max-width:900px){
  body *{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}
@media (min-width:901px){
  body:is(.page-technology, .page-sustainability) .csr-dash-item{
    -webkit-backdrop-filter:blur(8px) saturate(115%) !important;
    backdrop-filter:blur(8px) saturate(115%) !important;
  }
}

/* Optimized client-required hero video (720p H.264, fast-start). */
.hero-video-bg{
  display:block !important;
  opacity:.30;
  transform:scale(1.04);
}
@media (max-width:900px){
  .hero-video-bg{
    display:block !important;
    opacity:.34;
    transform:scale(1.02);
  }
}
@media (max-width:600px){
  #products .product-showcase{min-height:940px;}
  #products .product-slide-heading{top:28px;}
  #products .product-info-pane{
    bottom:22px;
    padding-bottom:62px;
  }
  #products .product-card-item .prod-card{padding:24px;}
  #products .product-nav-controls{top:auto; bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal], [data-reveal-stagger] > *{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* About: circular milestone journey on large screens. */
@media (min-width:901px){
  .legacy-section{margin-left:auto; margin-right:auto;}
  .legacy-heading{
    grid-template-columns:1fr;
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }
  .legacy-heading > p{max-width:680px; margin-left:auto; margin-right:auto;}
  .about-legacy-section .timeline-wrap{
    position:relative;
    display:block;
    height:720px;
    margin-top:38px;
    padding:0;
    overflow:visible;
  }
  .about-legacy-section .timeline-wrap::before{
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:min(42vw,380px);
    aspect-ratio:1;
    border:1px solid rgba(255,255,255,.32);
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 20px rgba(255,255,255,.035), 0 0 0 40px rgba(255,255,255,.02);
  }
  .about-legacy-section .timeline-wrap::after{
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:min(42vw,380px);
    aspect-ratio:1;
    border:2px dashed rgba(214,174,99,.7);
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(-18deg);
    opacity:.55;
  }
  .timeline-cycle-arrows{
    position:absolute;
    z-index:1;
    top:50%; left:50%;
    width:min(42vw,380px);
    aspect-ratio:1;
    color:var(--gold-light);
    overflow:visible;
    pointer-events:none;
    transform:translate(-50%,-50%) rotate(-18deg);
  }
  .timeline-cycle-arrows path:not(:first-child){
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
  }
  .timeline-cycle-core{
    position:absolute;
    z-index:2;
    top:50%; left:50%;
    display:flex;
    width:155px; height:155px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid var(--gold-light);
    border-radius:50%;
    background:#102f49;
    box-shadow:0 0 0 10px rgba(214,174,99,.1);
    text-align:center;
    transform:translate(-50%,-50%);
  }
  .timeline-cycle-core span{font-family:var(--ff-display); font-size:25px; font-weight:800; line-height:.84; letter-spacing:.04em; color:#fff;}
  .timeline-cycle-core small{margin-top:10px; font-family:var(--ff-mono); font-size:8px; letter-spacing:.09em; color:var(--gold-light);}
  .about-legacy-section .timeline-item{
    position:absolute;
    z-index:3;
    width:205px;
    min-height:0;
    margin:0;
    padding:18px 18px 16px;
    border:1px solid rgba(255,255,255,.28) !important;
    border-left:3px solid var(--gold-light) !important;
    background:rgba(8,29,52,.91);
    box-shadow:0 14px 28px rgba(0,0,0,.22);
  }
  .about-legacy-section .timeline-item::before{display:none;}
  .about-legacy-section .timeline-dot{left:auto; right:14px; top:14px; width:9px; height:9px; box-shadow:0 0 0 4px rgba(255,255,255,.12);}
  .about-legacy-section .timeline-year{min-height:0; padding-right:18px; margin-bottom:9px; font-size:9px;}
  .about-legacy-section .timeline-title{font-size:16px; margin-bottom:8px;}
  .about-legacy-section .timeline-desc{font-size:11px; line-height:1.52;}
  .about-legacy-section .timeline-item:nth-of-type(2){top:-10%; left:50%; transform:translateX(-50%);}
  .about-legacy-section .timeline-item:nth-of-type(3){top:22%; right:10%;}
  .about-legacy-section .timeline-item:nth-of-type(4){bottom:0; right:20%;}
  .about-legacy-section .timeline-item:nth-of-type(5){bottom:0; left:20%;}
  .about-legacy-section .timeline-item:nth-of-type(6){top:22%; left:10%;}
}
@media (max-width:900px){
  .timeline-cycle-core{display:none;}
}

/* -----------------------------sustainability-detail-section----------------------------- */
/* =========================================================
   MAIN SECTION
========================================================= */

.hz-sustainability {

  position: relative;

  width: 100%;

  overflow: hidden;

  background:
    var(--hz-dark);

  color:
    var(--hz-white);

}


/* =========================================================
   BACKGROUND
========================================================= */

.hz-sustainability-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

  background-image:

    linear-gradient(
      90deg,

      rgba(2, 9, 18, 0.97) 0%,

      rgba(2, 9, 18, 0.83) 33%,

      rgba(2, 9, 18, 0.68) 65%,

      rgba(2, 9, 18, 0.86) 100%
    ),

    linear-gradient(
      0deg,

      rgba(2, 9, 18, 0.98) 0%,

      rgba(2, 9, 18, 0.67) 50%,

      rgba(2, 9, 18, 0.42) 100%
    ),

    url("img/optimized/first-DSC03197.webp");

  background-size:
    cover;

  background-position:
    center;

}


/* =========================================================
   INNER WRAPPER
========================================================= */

.hz-sustainability-inner {

  position: relative;

  z-index: 2;

  width:
    min(1660px, calc(100% - 110px));

  margin:
    0 auto;

  padding:
    70px 0 65px;

}


/* =========================================================
   TOP LAYOUT
========================================================= */

.hz-sustainability-top {

  display:
    grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.45fr);

  gap:
    70px;

  align-items:
    center;

  margin-bottom:
    55px;

}


/* =========================================================
   HEADER
========================================================= */

.hz-sustainability-heading {

  max-width:
    560px;

}


.hz-sustainability-eyebrow {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    20px;

  color:
    white;

  font-family:
    var(--hz-mono);

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    0.15em;

}


.hz-eyebrow-line {

  width:
    4px;

  height:
    16px;

  background:
    var(--hz-blue);

}


.hz-sustainability-title {

  margin:
    0;

  font-family:
    var(--hz-display);

  font-size:
    clamp(65px, 5.5vw, 80px);

  font-weight:
    800;

  line-height:
    0.88;

  letter-spacing:
    -0.02em;

  text-transform:
    uppercase;

}


.hz-sustainability-title span {

  color:
    var(--hz-blue);

}


.hz-sustainability-intro {

  max-width:
    520px;

  margin:
    22px 0 0;

  color:
    rgba(255,255,255,0.77);

  font-family:
    var(--hz-body);

  font-size:
    16px;

  line-height:
    1.6;

}


/* =========================================================
   STATS
========================================================= */

.hz-sustainability-stats {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  min-height:
    180px;

  border:
    1px solid rgba(255,255,255,0.22);

  background:
    rgba(4, 15, 27, 0.42);

  backdrop-filter:
    blur(8px);

  width:100%;
}


.hz-sus-stat {

  display:
    grid;

  grid-template-columns:
    52px minmax(0, 1fr);

  grid-template-rows:
    auto 1fr;

  align-items:
    center;

  gap:
    8px 14px;

  position:
    relative;

  padding:
    26px 24px;

}


.hz-sus-stat:not(:last-child)::after {

  content: "";

  position:
    absolute;

  right:
    0;

  top:
    28px;

  bottom:
    28px;

  width:
    1px;

  background:
    rgba(255,255,255,0.18);

}


/* =========================================================
   STAT ICON
========================================================= */

.hz-sus-stat-icon {

  grid-row:
    1 / 3;

  align-self:
    center;

  width:
    48px;

  height:
    48px;

  color:
    var(--hz-blue);

}


.hz-sus-stat-icon svg {

  width:
    100%;

  height:
    100%;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


/* =========================================================
   STAT NUMBER
========================================================= */

.hz-sus-stat-number {

  grid-column:
    2;

  grid-row:
    1;

  color:
    white;

  font-family:
    var(--hz-display);

  font-size:
    clamp(52px, 4.5vw, 78px);

  line-height:
    0.9;

  white-space:
    nowrap;

}


/* =========================================================
   STAT COPY
========================================================= */

.hz-sus-stat-copy {

  grid-column:
    2;

  grid-row:
    2;

  min-width:
    0;

}


.hz-sus-stat-copy strong {

  display:
    block;

  margin-bottom:
    8px;

  color:
    white;

  font-family:
    var(--hz-mono);

  font-size:
    11px;

  line-height:
    1.5;

  letter-spacing:
    0.09em;

}


.hz-sus-stat-copy span {

  display:
    block;

  color:
    rgba(255,255,255,0.70);

  font-family:
    var(--hz-body);

  font-size:
    16px;

  line-height:
    1.45;

}


/* =========================================================
   CARDS GRID
========================================================= */

.hz-sustainability-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    24px;

}


/* =========================================================
   CARD
========================================================= */

.hz-sus-card {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  min-height:
    570px;

  overflow:
    hidden;

  border:
    1px solid rgba(255,255,255,0.30);

  background:
    rgba(3, 13, 23, 0.76);

}


/* =========================================================
   CARD IMAGE
========================================================= */

.hz-sus-card-image {

  position:
    relative;

  flex:
    0 0 205px;

  height:
    205px;

  background-size:
    cover;

  background-position:
    center;

  overflow:
    hidden;

}


.hz-sus-card-image::after {

  content: "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    22%;

  height:
    3px;

  background:
    var(--hz-blue);

}


.hz-sus-image-overlay {

  position:
    absolute;

  inset:
    0;

  background:

    linear-gradient(
      to bottom,
      rgba(2, 9, 18, 0.05),
      rgba(2, 9, 18, 0.32)
    );

}


/* =========================================================
   CARD BODY
========================================================= */

.hz-sus-card-body {

  display:
    flex;

  flex-direction:
    column;

  flex:
    1;

  padding:
    25px 25px 24px;

}


.hz-sus-card-index {

  margin-bottom:
    12px;

  color:
    var(--hz-blue);

  font-family:
    var(--hz-mono);

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.12em;

}


.hz-sus-card h3 {

  margin:
    0;

  color:
    white;

  font-family:
    var(--hz-display);

  font-size:
    clamp(32px, 2.4vw, 35px);

  font-weight:
    700;

  line-height:
    0.98;

  text-transform:
    uppercase;

}


.hz-sus-card-rule {

  width:
    42px;

  height:
    3px;

  margin:
    15px 0 18px;

  background:
    var(--hz-blue);

}


.hz-sus-card p {

  margin:
    0 0 14px;

  color:
    rgba(255,255,255,0.75);

  font-family:
    var(--hz-body);

  font-size:
    16px;

  line-height:
    1.5;

}


/* =========================================================
   ARROW
========================================================= */

.hz-sus-card-arrow {

 display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: auto;
    margin-bottom: 10px;
    border: 1px solid var(--hz-blue);
    border-radius: 50%;
    color: var(--hz-blue);
    text-decoration: none;
    font-size: 19px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;

}


.hz-sus-card-arrow:hover {

  background:
    var(--hz-blue);

  color:
    white;

  transform:
    translateX(3px);

}


/* =========================================================
   CARD HOVER
========================================================= */

.hz-sus-card {

  transition:
    border-color 0.25s ease,
    transform 0.3s ease;

}


.hz-sus-card:hover {

  border-color:
    rgba(22, 140, 255, 0.8);

  transform:
    translateY(-4px);

}


.hz-sus-card-image {

  transition:
    transform 0.6s ease;

}


.hz-sus-card:hover
.hz-sus-card-image {

  transform:
    scale(1.015);

}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1350px) {

  .hz-sustainability-inner {

    width:
      calc(100% - 70px);

  }


  .hz-sustainability-top {

    grid-template-columns:
      0.75fr 1.25fr;

    gap:
      40px;

  }


  .hz-sus-stat {

    grid-template-columns:
      auto 1fr;

    gap:
      12px;

  }


  .hz-sus-stat-number {

    grid-row:
      1 / 3;

  }


  .hz-sus-stat-icon {

    display:
      none;

  }


  .hz-sus-card-body {

    padding:
      22px;

  }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

  .hz-sustainability-inner {

    width:
      calc(100% - 40px);

  }


  .hz-sustainability-top {

    display:
      block;

  }


  .hz-sustainability-heading {

    margin-bottom:
      40px;

  }


  .hz-sustainability-stats {

    grid-template-columns:
      repeat(3, 1fr);

  }


  .hz-sustainability-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .hz-sus-card {

    min-height:
      530px;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

  .hz-sustainability-inner {

    width:
      calc(100% - 32px);

    padding:
      50px 0;

  }


  .hz-sustainability-title {

    font-size:
      56px;

  }


  .hz-sustainability-stats {

    grid-template-columns:
      1fr;

  }


  .hz-sus-stat {

    grid-template-columns:
      65px 1fr;

    padding:
      25px 20px;

  }


  .hz-sus-stat:not(:last-child)::after {

    top:
      auto;

    bottom:
      0;

    left:
      20px;

    right:
      20px;

    width:
      auto;

    height:
      1px;

  }


  .hz-sus-stat-number {

    grid-row:
      1 / 3;

    font-size:
      58px;

  }


  .hz-sustainability-grid {

    grid-template-columns:
      1fr;

    gap:
      18px;

  }


  .hz-sus-card {

    min-height:
      auto;

  }


  .hz-sus-card-image {

    flex-basis:
      220px;

    height:
      220px;

  }


  .hz-sus-card h3 {

    font-size:
      35px;

  }

}

/* ______________________________________ABOUT________________________________________ */

hz-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.hz-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.hz-display-title {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(64px, 6.2vw, 128px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.hz-section-label {
  display: flex;
  gap: 11px;
  align-items: center;

  margin-bottom: 28px;

  color: var(--hz-blue);
  font-family: var(--mono-font);

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.hz-title-rule {
  width: 38px;
  height: 3px;

  margin: 28px 0 20px;

  background: var(--hz-blue);
}

.hz-lead-copy {
  max-width: 620px;

  margin: 0;

  color: rgba(255, 255, 255, 0.82);

  font-size: 17px;
  line-height: 1.72;
}


/* =========================================================
   SECTION 01 — VISION & MISSION
========================================================= */

.hz-vision-mission {
  min-height: 900px;

  background-image:
    url("assets/factory-vision.jpg");

  background-position: center;
}

/* .hz-vision-mission .hz-bg-overlay {
  
} */

.hz-vm-grid {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr 1fr;

  width: min(1640px, calc(100% - 120px));
  min-height: 900px;

  margin: 0 auto;
}

.hz-vm-panel {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
}

.hz-vision {
  padding-right: 10%;
}

.hz-mission {
  padding-left: 14%;
  padding-top: 125px;
}

.hz-mission .hz-lead-copy {
  max-width: 680px;
}


/* =========================================================
   LARGE 01 / 02
========================================================= */

.hz-big-number {
  position: absolute;
  z-index: 1;

  font-family: var(--display-font);

  font-size: clamp(200px, 24vw, 430px);
  font-weight: 500;
  line-height: 0.8;

  color: transparent;

  -webkit-text-stroke:
    1px rgba(255, 255, 255, 0.22);

  pointer-events: none;
}

.hz-number-one {
  top: 65px;
  left: 48%;
}

.hz-number-two {
  bottom: 45px;
  left: 44%;
}


/* =========================================================
   DIAGONAL LINE
========================================================= */

.hz-diagonal-line {
  position: absolute;
  z-index: 3;

  top: -120px;
  left: 62%;

  width: 2px;
  height: 1250px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--hz-blue) 14%,
      var(--hz-blue) 86%,
      transparent
    );

  transform: rotate(15deg);
  transform-origin: top center;

  pointer-events: none;
}

.hz-diagonal-dot {
  position: absolute;

  top: 325px;
  left: 50%;

  width: 12px;
  height: 12px;

  border: 3px solid rgba(255,255,255,0.4);
  border-radius: 50%;

  background: var(--hz-blue);

  transform: translate(-50%, -50%);

  box-shadow:
    0 0 0 8px rgba(22, 140, 255, 0.12),
    0 0 18px rgba(22, 140, 255, 0.8);
}


/* =========================================================
   VALUE / ICON ROWS
========================================================= */

.hz-value-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin-top: 45px;

  padding-top: 35px;

  border-top:
    1px solid rgba(22, 140, 255, 0.75);
}

.hz-value-row-four {
  grid-template-columns: repeat(4, 1fr);
}

.hz-value {
  min-height: 135px;

  padding: 0 25px;

  border-right:
    1px solid rgba(255, 255, 255, 0.22);
}

.hz-value:first-child {
  padding-left: 0;
}

.hz-value:last-child {
  border-right: 0;
}

.hz-value span {
  display: block;

  margin-top: 12px;

  font-family: var(--mono-font);

  font-size: 12px;
  font-weight: 700;

  line-height: 1.55;

  letter-spacing: 0.1em;

  color: rgba(255, 255, 255, 0.92);
}

.hz-icon {
  width: 42px;
  height: 42px;

  color: white;
}

.hz-icon svg {
  width: 100%;
  height: 100%;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hz-materials {
  min-height: 950px;

  background-image:
    url("assets/factory-materials.jpg");

  background-position: center;
}

.hz-materials .hz-bg-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(2, 9, 18, 0.98) 0%,
      rgba(2, 9, 18, 0.88) 30%,
      rgba(3, 11, 20, 0.72) 58%,
      rgba(2, 9, 18, 0.84) 100%
    );
}

.hz-materials-inner {
  position: relative;
  z-index: 2;

  width: min(1660px, calc(100% - 110px));

  margin: 0 auto;

  padding: 55px 0 0;
}


/* =========================================================
   MATERIALS HEADER
========================================================= */

.hz-materials-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;

  max-width: 680px;
}

.hz-number-box {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  background: var(--hz-blue);

  color: #fff;

  font-family: var(--mono-font);
  font-weight: 700;
}

.hz-eyebrow-line {
     display: flex;
    align-items: flex-start;
    gap: 70px;
    margin-bottom: 39px;
    font-family: var(--mono-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;

}

.hz-eyebrow-line .hz-line {
  display: block;

  width: 230px;
  height: 2px;

  background: var(--hz-blue);
}

.hz-materials-heading .hz-display-title {
  font-size: clamp(56px, 5.2vw, 100px);
}

.hz-materials-intro {
  max-width: 520px;

  margin: 20px 0 0;

  color: rgba(255, 255, 255, 0.75);

  font-size: 16px;
  line-height: 1.55;
}


/* =========================================================
   COMPARISON GRID
========================================================= */

.hz-comparison {
  display: grid;

  grid-template-columns:
    minmax(280px, 1fr)
    minmax(300px, 520px)
    minmax(260px, 0.9fr);

  align-items: end;

  margin-top: -400px; 
}


/* =========================================================
   LEFT SIDE
========================================================= */

.hz-comparison-title {
  margin-bottom: 20px;

  padding-bottom: 15px;

  border-bottom:
    1px solid rgba(255,255,255,0.35);

  font-family: var(--mono-font);

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 0.12em;

  color: rgba(255,255,255,0.6);
}

.hz-comparison-title.hz-blue {
  color: var(--hz-blue);

  border-color:
    rgba(22, 140, 255, 0.65);
}

.hz-spec-row {
  display: grid;

  grid-template-columns:
    185px
    minmax(35px, 1fr)
    210px;

  align-items: center;

  gap: 14px;

  min-height: 72px;
}

.hz-spec-name {
  font-family: var(--mono-font);

  font-size: 12px;
  line-height: 1.4;

  color: rgba(255,255,255,0.9);
}

.hz-spec-value {
  font-family: var(--mono-font);

  font-size: 13px;
  line-height: 1.45;

  letter-spacing: 0.04em;

  color: var(--hz-white);
}

.hz-spec-line {
  position: relative;

  width: min(100%, 520px);
  height: 1px;

  background:
    rgba(22, 140, 255, 0.75);
}

.hz-spec-line::after {
  content: "";

  position: absolute;

  right: -4px;
  top: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--hz-blue);

  transform: translateY(-50%);
}


/* =========================================================
   BILLET
========================================================= */

.hz-billet-wrap {
  position: relative;

  z-index: 4;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  height: 1000px;
}

.hz-billet {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  max-height: 1000px;

  object-fit: cover;

  filter:
    contrast(1.08)
    saturate(1.05);
}

.hz-billet-glow {
  
    position: absolute;
    right: 12%;
    /* top: 10%; */
    width: 40px;
    height: 56%;
    background: rgba(255, 90, 0, 0.7);
    filter: blur(35px);
    opacity: 0.7;

}

.hz-billet-wrap img{
  width: 50%;
    height: 70%;
        margin-bottom: -100px;
}

/* =========================================================
   RIGHT SIDE
========================================================= */

.hz-alternative {
  padding-bottom: 48px;
}

.hz-alt-row {
  display: grid;

  grid-template-columns: 100px 1fr;

  gap: 22px;

  align-items: center;

  min-height: 72px;

  font-family: var(--mono-font);

  font-size: 13px;
  line-height: 1.42;

  color: rgba(255,255,255,0.72);
}

.hz-alt-line {
  position: relative;

  display: block;

  height: 1px;

  background:
    rgba(255,255,255,0.35);
}

.hz-alt-line::before {
  content: "";

  position: absolute;

  left: -4px;
  top: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #7d8791;

  transform: translateY(-50%);
}


/* =========================================================
   MATERIALS FOOTER
========================================================= */

.hz-materials-footer {
  position: relative;

  display: grid;

  grid-template-columns: 1fr 2px 1.25fr;

  gap: 40px;

  align-items: center;

  min-height: 145px;

  margin-top: 0;

  padding: 25px 8%;

  border-top:
    1px solid rgba(22, 140, 255, 0.8);

  background:
    rgba(3, 13, 24, 0.94);
}

.hz-footer-statement {
  display: flex;
  align-items: center;
  gap: 24px;
}

.hz-footer-statement strong {
  font-family: var(--display-font);

  font-size: 28px;
  line-height: 1;

  letter-spacing: 0.01em;
}

.hz-shield {
  width: 52px;
  height: 58px;

  display: grid;
  place-items: center;

  border:
    2px solid var(--hz-blue);

  border-radius:
    18px 18px 24px 24px;

  color: var(--hz-blue);

  font-size: 22px;
}

.hz-footer-divider {
  width: 2px;
  height: 58px;

  background:
    var(--hz-blue);

  transform: rotate(12deg);
}

.hz-materials-footer p {
  margin: 0;

  color: rgba(255,255,255,0.68);

  font-size: 15px;
  line-height: 1.6;
}


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

@media (max-width: 1200px) {

  .hz-vm-grid {
    width: calc(100% - 60px);
  }

  .hz-vision {
    padding-right: 6%;
  }

  .hz-mission {
    padding-left: 8%;
  }

  .hz-value span {
    font-size: 10px;
  }

  .hz-materials-inner {
    width: calc(100% - 60px);
  }

  .hz-comparison {
    grid-template-columns:
      minmax(330px, 1fr)
      260px
      minmax(300px, 1fr);
  }

  .hz-spec-row {
    grid-template-columns:
      135px
      1fr
      160px;
  }

}


@media (max-width: 900px) {

  .hz-section {
    min-height: auto;
  }


  /* VISION / MISSION */

  .hz-vm-grid {
    display: block;

    width: calc(100% - 40px);

    min-height: auto;

    padding: 80px 0;
  }

  .hz-vm-panel {
    padding:
      60px 0;
  }

  .hz-vision {
    border-bottom:
      1px solid rgba(255,255,255,0.15);
  }

  .hz-mission {
    padding-top: 100px;
  }

  .hz-diagonal-line,
  .hz-big-number {
    display: none;
  }

  .hz-value-row,
  .hz-value-row-four {
    grid-template-columns:
      repeat(2, 1fr);

    row-gap: 30px;
  }

  .hz-value:nth-child(2) {
    border-right: 0;
  }


  /* MATERIALS */

  .hz-materials-inner {
    width: calc(100% - 40px);

    padding-bottom: 0;
  }

  .hz-comparison {
    display: flex;
    flex-direction: column;

    margin-top: -400px;
  }

  .hz-standard,
  .hz-alternative {
    width: 100%;
  }

  .hz-billet-wrap {
    order: -1;

    width: 100%;
    height: 430px;

    margin-bottom: 50px;
  }

  .hz-billet {
    max-height: 430px;
  }

  .hz-alternative {
    margin-top: 60px;
  }

  .hz-materials-footer {
    grid-template-columns: 1fr;

    margin-top: 60px;

    padding: 35px;
  }

  .hz-footer-divider {
    display: none;
  }

}


@media (max-width: 600px) {

  .hz-display-title {
    font-size: 52px;
  }

  .hz-materials-heading {
    grid-template-columns: 1fr;
  }

  .hz-number-box {
    margin-bottom: 8px;
  }

  .hz-eyebrow-line .hz-line {
    flex: 1;
  }

  .hz-value-row,
  .hz-value-row-four {
    grid-template-columns: 1fr;
  }

  .hz-value {
    padding:
      18px 0;

    border-right: 0;

    border-bottom:
      1px solid rgba(255,255,255,0.15);
  }

  .hz-spec-row {
    grid-template-columns:
      1fr;

    gap: 7px;

    padding: 20px 0;

    border-bottom:
      1px solid rgba(255,255,255,0.12);
  }

  .hz-spec-line {
    display: none;
  }

  .hz-alt-row {
    grid-template-columns:
      45px 1fr;
  }

}

:root {

  --hz-blue: #168cff;
  --hz-blue-soft: #63b5ff;

  --hz-dark: #020912;
  --hz-navy: #06111d;

  --hz-white: #f5f7fa;
  --hz-muted: rgba(255, 255, 255, 0.68);

  --hz-line: rgba(255, 255, 255, 0.18);

  --hz-display:
    "Arial Narrow",
    "Roboto Condensed",
    "Helvetica Neue Condensed",
    Impact,
    sans-serif;

  --hz-body:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  --hz-mono:
    "Courier New",
    monospace;
}


* {
  box-sizing: border-box;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.hz-about-section {

  position: relative;

  width: 100%;

  min-height: 900px;

  overflow: hidden;

  background:
    #020912;

  color:
    var(--hz-white);

}


/* =========================================================
   BACKGROUND
========================================================= */

.hz-about-bg {

  position: absolute;

  inset: 0;

  z-index: 0;



  background-size:
    cover;

  background-position:
    center;

}


/* subtle blue atmosphere */

.hz-about-bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(
      circle at 50% 50%,
      rgba(22, 140, 255, 0.05),
      transparent 38%
    );

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.hz-about-inner {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(420px, 0.95fr)
    minmax(420px, 1.1fr)
    minmax(320px, 0.72fr);

  width:
    min(1640px, calc(100% - 120px));

  min-height:
    735px;

  margin:
    0 auto;

  padding-top:
    80px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.hz-about-content {

  position: relative;

  z-index: 4;

  padding-top:
    25px;

}


/* eyebrow */

.hz-about-eyebrow {

  display: flex;

  align-items: center;

  gap: 25px;

  margin-bottom:
    28px;

}


.hz-section-number {

  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  flex: 0 0 40px;

  background:
    var(--hz-blue);

  color:
    white;

  font-family:
    var(--hz-mono);

  font-size:
    15px;

  font-weight:
    700;

}


.hz-eyebrow-text {

  color:
    var(--hz-blue);

  font-family:
    var(--hz-mono);

  font-size:
    14px;

  font-weight:
    700;

  letter-spacing:
    0.18em;

}


/* =========================================================
   TITLE
========================================================= */

.hz-about-title {

  margin:
    0;

  font-family:
    var(--hz-display);

  font-size:
    clamp(80px, 7vw, 135px);

  font-weight:
    800;

  line-height:
    0.88;

  letter-spacing:
    -0.025em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

}


.hz-about-title span {

  color:
    var(--hz-blue);

}


.hz-about-short-rule {

  width:
    45px;

  height:
    3px;

  margin:
    30px 0 20px;

  background:
    var(--hz-blue);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hz-about-description {

  max-width:
    535px;

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.82);

  font-family:
    var(--hz-body);

  font-size:
    18px;

  line-height:
    1.75;

}


/* =========================================================
   STATS
========================================================= */

.hz-about-stats {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  max-width:
    650px;

  margin-top:
    50px;

}


.hz-stat {

  position:
    relative;

  min-height:
    165px;

  padding:
    0 32px;

  border-right:
    1px solid rgba(22, 140, 255, 0.78);

}


.hz-stat:first-child {

  padding-left:
    0;

}


.hz-stat:last-child {

  border-right:
    none;

}


.hz-stat-icon {

  width:
    45px;

  height:
    45px;

  margin-bottom:
    14px;

  color:
    var(--hz-blue);

}


.hz-stat-icon svg {

  width:
    100%;

  height:
    100%;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.6;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.hz-stat-value {

  font-family:
    var(--hz-display);

  font-size:
    clamp(36px, 3vw, 52px);

  line-height:
    1;

  white-space:
    nowrap;

}


.hz-stat-label {

  margin-top:
    8px;

  color:
    rgba(255, 255, 255, 0.82);

  font-family:
    var(--hz-mono);

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.5;

  letter-spacing:
    0.12em;

}


/* =========================================================
   WORKER IMAGE
========================================================= */

.hz-worker-wrap {

  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    center;

  height:
    735px;

  pointer-events:
    none;

}


.hz-worker-image {

  display:
    block;

  width:
    auto;

  height:
    100%;

  max-width:
    120%;

  object-fit:
    contain;

  object-position:
    bottom center;

  filter:
    contrast(1.05)
    saturate(0.95);

}


/* soft edge fade */

.hz-worker-wrap::before {

  content: "";

  position:
    absolute;

  inset:
    auto 5% 0 5%;

  height:
    110px;

  z-index:
    4;

  background:

    linear-gradient(
      to bottom,
      transparent,
      rgba(2, 9, 18, 0.62)
    );

}


/* =========================================================
   INDUSTRY AFFILIATIONS
========================================================= */

.hz-affiliations {

  position:
    relative;

  z-index:
    5;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    25px 0 30px 35px;

}


.hz-affiliations-heading {

  margin-left:
    34px;

  margin-bottom:
    20px;

  font-family:
    var(--hz-mono);

  letter-spacing:
    0.12em;

}


.hz-affiliations-heading span {

  display:
    block;

  color:
    var(--hz-blue);

  font-size:
    13px;

  margin-bottom:
    4px;

}


.hz-affiliations-heading strong {

  display:
    block;

  color:
    white;

  font-size:
    14px;

  font-weight:
    700;

}


/* main vertical line */

.hz-affiliations-line {

  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    50px;

  padding:
    25px 0 25px 35px;

}


.hz-affiliations-line::before {

  content: "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  bottom:
    0;

  width:
    2px;

  background:

    linear-gradient(
      to bottom,

      var(--hz-blue),

      rgba(22, 140, 255, 0.55)
    );

}


/* =========================================================
   INDIVIDUAL AFFILIATION
========================================================= */

.hz-affiliation {

  position:
    relative;

  display:
    grid;

  grid-template-columns:
    90px 1fr;

  gap:
    25px;

  align-items:
    center;

  min-height:
    100px;

}


.hz-affiliation-dot {

  position:
    absolute;

  left:
    -42px;

  top:
    50%;

  width:
    12px;

  height:
    12px;

  border:
    2px solid white;

  border-radius:
    50%;

  background:
    var(--hz-blue);

  transform:
    translateY(-50%);

  box-shadow:
    0 0 0 4px rgba(22, 140, 255, 0.14);

}


.hz-affiliation-logo {

  display:
    grid;

  place-items:
    center;

  width:
    86px;

  height:
    86px;

  overflow:
    hidden;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.97);

}


.hz-affiliation-logo img {

  display:
    block;

  width:
    80%;

  height:
    80%;

  object-fit:
    contain;

}


.hz-affiliation-copy strong {

  display:
    block;

  font-family:
    var(--hz-display);

  font-size:
    clamp(27px, 2vw, 38px);

  font-weight:
    700;

  line-height:
    1;

  text-transform:
    uppercase;

}


.hz-affiliation-copy span {

  display:
    block;

  margin-top:
    8px;

  color:
    rgba(255,255,255,0.72);

  font-family:
    var(--hz-mono);

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    0.14em;

}


/* =========================================================
   BOTTOM BAND
========================================================= */

.hz-about-footer {

  position:
    relative;

  z-index:
    6;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    2px
    minmax(320px, 0.7fr);

  gap:
    130px;

  align-items:
    center;

  min-height:
    165px;

  padding:
    30px max(60px, calc((100vw - 1640px) / 2));

  border-top:
    1px solid rgba(22, 140, 255, 0.8);

  background:
    rgb(3 12 22 / 28%)

}


.hz-about-footer p {

  max-width:
    820px;

  margin:
    0;

  color:
    rgba(255,255,255,0.68);

  font-family:
    var(--hz-body);

  font-size:
    17px;

  line-height:
    1.65;

}


.hz-about-footer-divider {

  width:
    2px;

  height:
    60px;

  background:
    var(--hz-blue);

  transform:
    rotate(12deg);

}


.hz-about-statement {

  font-family:
    var(--hz-display);

  text-transform:
    uppercase;

}


.hz-about-statement span,
.hz-about-statement strong {

  display:
    block;

  font-size:
    clamp(28px, 2.4vw, 42px);

  line-height:
    1.1;

}


.hz-about-statement span {

  color:
    white;

}


.hz-about-statement strong {

  margin-top:
    3px;

  color:
    var(--hz-blue);

  font-weight:
    700;

}


/* =========================================================
   HOVER DETAILS
   Optional subtle interaction
========================================================= */

.hz-affiliation {

  transition:
    transform 0.25s ease;

}


.hz-affiliation-logo {

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.hz-affiliation:hover {

  transform:
    translateX(5px);

}


.hz-affiliation:hover .hz-affiliation-logo {

  transform:
    scale(1.04);

  box-shadow:
    0 0 0 4px rgba(22, 140, 255, 0.15);

}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1300px) {

  .hz-about-inner {

    width:
      calc(100% - 70px);

    grid-template-columns:
      1fr 0.9fr 0.72fr;

  }


  .hz-about-title {

    font-size:
      92px;

  }


  .hz-about-description {

    max-width:
      450px;

    font-size:
      16px;

  }


  .hz-about-stats {

    max-width:
      560px;

  }


  .hz-stat {

    padding:
      0 20px;

  }


  .hz-stat-value {

    font-size:
      40px;

  }


  .hz-affiliation {

    grid-template-columns:
      70px 1fr;

    gap:
      18px;

  }


  .hz-affiliation-logo {

    width:
      68px;

    height:
      68px;

  }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 980px) {

  .hz-about-section {

    min-height:
      auto;

  }


  .hz-about-inner {

    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    width:
      calc(100% - 50px);

    min-height:
      auto;

    padding:
      70px 0 0;

  }


  .hz-about-content {

    grid-column:
      1 / -1;

  }


  .hz-about-title {

    white-space:
      normal;

  }


  .hz-about-description {

    max-width:
      620px;

  }


  .hz-about-stats {

    max-width:
      620px;

  }


  .hz-worker-wrap {

    height:
      530px;

    margin-top:
      30px;

  }


  .hz-affiliations {

    padding-left:
      10px;

  }


  .hz-about-footer {

    grid-template-columns:
      1fr;

    gap:
      25px;

    padding:
      35px;

  }


  .hz-about-footer-divider {

    display:
      none;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

  .hz-about-inner {

    display:
      block;

    width:
      calc(100% - 36px);

    padding-top:
      55px;

  }


  .hz-about-eyebrow {

    gap:
      15px;

  }


  .hz-eyebrow-text {

    font-size:
      10px;

    letter-spacing:
      0.12em;

  }


  .hz-section-number {

    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;

  }


  .hz-about-title {

    font-size:
      64px;

  }


  .hz-about-description {

    font-size:
      15px;

  }


  .hz-about-stats {

    grid-template-columns:
      1fr;

    margin-top:
      35px;

  }


  .hz-stat {

    display:
      grid;

    grid-template-columns:
      45px 1fr;

    column-gap:
      18px;

    min-height:
      auto;

    padding:
      22px 0;

    border-right:
      0;

    border-bottom:
      1px solid rgba(22, 140, 255, 0.4);

  }


  .hz-stat-icon {

    grid-row:
      1 / span 2;

    margin:
      0;

  }


  .hz-stat-value {

    font-size:
      38px;

  }


  .hz-worker-wrap {

    height:
      440px;

    margin-top:
      15px;

  }


  .hz-affiliations {

    padding:
      50px 0;

  }


  .hz-affiliations-line {

    gap:
      35px;

  }


  .hz-affiliation {

    grid-template-columns:
      68px 1fr;

  }


  .hz-affiliation-logo {

    width:
      65px;

    height:
      65px;

  }


  .hz-affiliation-copy strong {

    font-size:
      28px;

  }


  .hz-about-footer {

    padding:
      30px 18px;

  }


  .hz-about-footer p {

    font-size:
      14px;

  }


  .hz-about-statement span,
  .hz-about-statement strong {

    font-size:
      30px;

  }

}

/* ________________________________________PRODUCT_______________________________ */


/* =========================================================
   MAIN SECTION
========================================================= */

.hz-applications-section {

  position: relative;

  width: 100%;

  min-height: 930px;

  overflow: hidden;

  background:
    var(--hz-dark);

  color:
    var(--hz-white);

}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.hz-applications-bg {

  position: absolute;

  inset: 0;

  z-index: 0;



  background-size:
    cover;

  background-position:
    center top;

}


/* subtle dark vignette */

.hz-applications-bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(
      circle at 74% 17%,
      transparent 0%,
      rgba(2, 9, 18, 0.08) 42%,
      rgba(2, 9, 18, 0.48) 100%
    );

}


/* =========================================================
   CONTENT WRAPPER
========================================================= */

.hz-applications-inner {

  position: relative;

  z-index: 2;

  width:
    min(1660px, calc(100% - 90px));

  margin:
    0 auto;

  padding:
    42px 0 55px;

}


/* =========================================================
   HEADER
========================================================= */

.hz-applications-header {

  max-width:
    850px;

}


/* eyebrow row */

.hz-applications-eyebrow {

  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  margin-bottom:
    22px;

}


.hz-app-section-number {

  display:
    grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  background:
    var(--hz-blue);

  color:
    white;

  font-family:
    var(--hz-mono);

  font-size:
    15px;

  font-weight:
    700;

}


.hz-app-eyebrow-text {

  color:
    var(--hz-blue);

  font-family:
    var(--hz-mono);

  font-size:
    14px;

  font-weight:
    700;

  letter-spacing:
    0.17em;

}


/* =========================================================
   MAIN TITLE
========================================================= */

.hz-applications-title {

  margin:
    0;

  font-family:
    var(--hz-display);

  font-size:
    clamp(62px, 5.7vw, 105px);

  font-weight:
    800;

  line-height:
    0.89;

  letter-spacing:
    -0.025em;

  text-transform:
    uppercase;

}


.hz-applications-title span {

  color:
    var(--hz-blue);

}


.hz-app-short-rule {

  width:
    40px;

  height:
    3px;

  margin:
    23px 0 14px;

  background:
    var(--hz-blue);

}


.hz-applications-intro {

  max-width:
    620px;

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.75);

  font-family:
    var(--hz-body);

  font-size:
    17px;

  line-height:
    1.65;

}


/* =========================================================
   APPLICATION GRID
========================================================= */

.hz-application-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    18px;

  margin-top:
    25px;

}


/* =========================================================
   APPLICATION CARDS
========================================================= */

.hz-application-card {

  position:
    relative;

  height:
    320px;

  overflow:
    hidden;

  border:
    1px solid rgba(255, 255, 255, 0.42);

  background-image:
    var(--card-image);

  background-size:
    cover;

  background-position:
    center;

  cursor:
    default;

}


/* image zoom */

.hz-application-card::before {

  content: "";

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  background-image:
    var(--card-image);

  background-size:
    cover;

  background-position:
    center;

  transition:
    transform 0.6s ease;

}


/* dark gradient */

.hz-card-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:

    linear-gradient(
      90deg,

      rgba(2, 9, 18, 0.96) 0%,

      rgba(2, 9, 18, 0.68) 38%,

      rgba(2, 9, 18, 0.12) 100%
    ),

    linear-gradient(
      0deg,

      rgba(2, 9, 18, 0.60) 0%,

      transparent 65%
    );

}


/* card copy */

.hz-card-content {

  position:
    relative;

  z-index:
    3;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-start;

  height:
    100%;

  padding:
    26px;

}


.hz-card-number {

  margin-bottom:
    6px;

  color:
    var(--hz-blue);

  font-family:
    var(--hz-display);

  font-size:
    40px;

  line-height:
    1;

}


.hz-card-title {

  margin:
    0;

  color:
    white;

  font-family:
    var(--hz-display);

  font-size:
    clamp(34px, 2.5vw, 46px);

  font-weight:
    700;

  line-height:
    1;

  text-transform:
    uppercase;

}


.hz-card-rule {

  width:
    37px;

  height:
    3px;

  margin:
    13px 0;

  background:
    var(--hz-blue);

}


.hz-card-description {

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.91);

  font-family:
    var(--hz-mono);

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.55;

  letter-spacing:
    0.1em;

}


/* =========================================================
   CARD HOVER
========================================================= */

.hz-application-card:hover::before {

  transform:
    scale(1.05);

}


.hz-application-card {

  transition:
    border-color 0.3s ease;

}


.hz-application-card:hover {

  border-color:
    rgba(22, 140, 255, 0.9);

}


.hz-card-content {

  transition:
    transform 0.35s ease;

}


.hz-application-card:hover
.hz-card-content {

  transform:
    translateY(-5px);

}


/* =========================================================
   PERFORMANCE SECTION
========================================================= */

.hz-performance-section {

  position:
    relative;

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top:
    34px;

  padding-top:
    38px;

}


.hz-performance-top-line {

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    1px;

  background:
    rgba(22, 140, 255, 0.85);

}


/* =========================================================
   PERFORMANCE ITEM
========================================================= */

.hz-performance-item {

  position:
    relative;

  min-height:
    145px;

  padding:
    0 42px;

}


.hz-performance-item:first-of-type {

  padding-left:
    68px;

}


.hz-performance-item:not(:last-child)::after {

  content: "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    1px;

  height:
    130px;

  background:
    rgba(22, 140, 255, 0.75);

}


.hz-performance-value {

  color:
    white;

  font-family:
    var(--hz-display);

  font-size:
    clamp(48px, 4vw, 70px);

  font-weight:
    700;

  line-height:
    0.95;

  letter-spacing:
    -0.02em;

  white-space:
    nowrap;

}


.hz-performance-value span {

  font-size:
    0.52em;

  letter-spacing:
    0;

}


.hz-performance-long {

  font-size:
    clamp(42px, 3.4vw, 62px);

}


.hz-performance-unit {

  margin-top:
    12px;

  color:
    var(--hz-blue);

  font-family:
    var(--hz-mono);

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1.4;

  letter-spacing:
    0.12em;

}


.hz-performance-label {

  margin-top:
    13px;

  color:
    rgba(255, 255, 255, 0.84);

  font-family:
    var(--hz-mono);

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.45;

  letter-spacing:
    0.1em;

}


/* =========================================================
   OPTIONAL STAGGERED ENTRANCE ANIMATION
========================================================= */

@keyframes hzFadeUp {

  from {

    opacity:
      0;

    transform:
      translateY(20px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}


.hz-application-card {

  animation:
    hzFadeUp 0.65s ease both;

}


.hz-application-card:nth-child(1) {

  animation-delay:
    0.05s;

}


.hz-application-card:nth-child(2) {

  animation-delay:
    0.12s;

}


.hz-application-card:nth-child(3) {

  animation-delay:
    0.19s;

}


.hz-application-card:nth-child(4) {

  animation-delay:
    0.26s;

}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1300px) {

  .hz-applications-inner {

    width:
      calc(100% - 60px);

  }


  .hz-application-card {

    height:
      295px;

  }


  .hz-card-content {

    padding:
      22px;

  }


  .hz-performance-item {

    padding:
      0 28px;

  }


  .hz-performance-item:first-of-type {

    padding-left:
      30px;

  }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 950px) {

  .hz-applications-section {

    min-height:
      auto;

  }


  .hz-applications-inner {

    width:
      calc(100% - 40px);

    padding:
      55px 0;

  }


  .hz-application-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .hz-application-card {

    height:
      320px;

  }


  .hz-performance-section {

    grid-template-columns:
      repeat(2, 1fr);

    row-gap:
      35px;

  }


  .hz-performance-item {

    padding:
      20px 30px;

  }


  .hz-performance-item:first-of-type {

    padding-left:
      30px;

  }


  .hz-performance-item:nth-child(2)::after {

    display:
      none;

  }


  .hz-performance-item:nth-child(3),
  .hz-performance-item:nth-child(4) {

    border-top:
      1px solid rgba(22, 140, 255, 0.28);

    padding-top:
      35px;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 620px) {

  .hz-applications-inner {

    width:
      calc(100% - 32px);

  }


  .hz-applications-eyebrow {

    gap:
      14px;

  }


  .hz-app-section-number {

    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;

  }


  .hz-app-eyebrow-text {

    font-size:
      10px;

    letter-spacing:
      0.11em;

  }


  .hz-applications-title {

    font-size:
      52px;

  }


  .hz-applications-intro {

    font-size:
      15px;

  }


  /* cards */

  .hz-application-grid {

    grid-template-columns:
      1fr;

    gap:
      14px;

  }


  .hz-application-card {

    height:
      250px;

  }


  .hz-card-title {

    font-size:
      38px;

  }


  /* stats */

  .hz-performance-section {

    grid-template-columns:
      1fr;

    margin-top:
      28px;

  }


  .hz-performance-item,
  .hz-performance-item:first-of-type {

    min-height:
      auto;

    padding:
      28px 0;

    border-bottom:
      1px solid rgba(22, 140, 255, 0.35);

  }


  .hz-performance-item::after {

    display:
      none;

  }


  .hz-performance-item:nth-child(3),
  .hz-performance-item:nth-child(4) {

    border-top:
      none;

    padding-top:
      28px;

  }


  .hz-performance-value,
  .hz-performance-long {

    font-size:
      52px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hz-application-card {

    animation:
      none;

  }


  .hz-application-card::before,
  .hz-card-content {

    transition:
      none;

  }

}

/* ___________________________WIRE RODS____________________________ */

/* =========================================================
   SECTION
========================================================= */

.hz-wire-rods {

  position: relative;

  width: 100%;

  min-height: 980px;

  overflow: hidden;

  background: var(--hz-dark);

  color: var(--hz-white);

}


/* =========================================================
   BACKGROUND
========================================================= */

.hz-wire-rods-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

  background-image:

    linear-gradient(
      90deg,

      rgba(2,9,18,0.98) 0%,

      rgba(2,9,18,0.94) 24%,

      rgba(2,9,18,0.55) 43%,

      rgba(2,9,18,0.06) 67%,

      rgba(2,9,18,0.13) 100%
    ),

    linear-gradient(
      0deg,

      rgba(2,9,18,0.99) 0%,

      rgba(2,9,18,0.92) 28%,

      rgba(2,9,18,0.18) 58%,

      rgba(2,9,18,0.05) 100%
    ),

    url("img/optimized/second-DSC03297.webp");

  background-size: cover;

  background-position: center top;

}


/* optional soft vignette */

.hz-wire-rods-bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 72% 34%,
      transparent 0%,
      rgba(2,9,18,0.03) 40%,
      rgba(2,9,18,0.45) 100%
    );

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.hz-wire-rods-inner {

  position: relative;

  z-index: 2;

  width:
    min(1660px, calc(100% - 110px));

  margin: 0 auto;

}


/* =========================================================
   TOP HERO
========================================================= */

.hz-wire-rods-top {

  min-height: 720px;

  display: flex;

  align-items: flex-start;

  padding-top: 55px;

}


/* =========================================================
   HERO COPY
========================================================= */

.hz-wire-rods-copy {

  width: min(100%, 38vw);

}


.hz-wire-rods-eyebrow {

  display: flex;

  align-items: center;

  gap: 12px;

  color: white;

  font-family: var(--hz-mono);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.14em;

}


.hz-wire-rods-eyebrow span:first-child {

  color: var(--hz-blue);

}


.hz-wire-short-rule {

  width: 30px;

  height: 3px;

  margin: 18px 0 26px;

  background: var(--hz-blue);

}


/* =========================================================
   TITLE
========================================================= */

.hz-wire-main-title {

  margin: 0;

  font-family: var(--hz-display);

  font-size: clamp(66px, 5.7vw, 108px);

  font-weight: 800;

  line-height: 0.88;

  letter-spacing: -0.025em;

  text-transform: uppercase;

}


.hz-wire-main-title span {

  color: var(--hz-blue);

}


/* =========================================================
   BODY COPY
========================================================= */

.hz-wire-rods-copy p {

  margin: 24px 0 0;

  color: rgba(255,255,255,0.79);

  font-family: var(--hz-body);

  font-size: 15px;

  line-height: 1.62;

}


.hz-wire-applications strong {

  color: var(--hz-blue);

  font-weight: 500;

}


/* =========================================================
   CTA
========================================================= */

.hz-wire-cta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  max-width: 355px;

  min-height: 48px;

  margin-top: 28px;

  padding: 0 18px;

  border: 1px solid var(--hz-blue);

  color: white;

  text-decoration: none;

  font-family: var(--hz-mono);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.1em;

  transition:
    background 0.25s ease,
    color 0.25s ease;

}


.hz-wire-arrow {

  color: var(--hz-blue);

  font-size: 24px;

  transition: transform 0.25s ease;

}


.hz-wire-cta:hover {

  background: var(--hz-blue);

}


.hz-wire-cta:hover .hz-wire-arrow {

  color: white;

  transform: translateX(4px);

}


/* =========================================================
   PERFORMANCE BAND
========================================================= */

.hz-wire-performance {

  position: relative;

  margin-top: 50px;

  padding-bottom: 55px;

}


/* dark backdrop only at bottom */

.hz-wire-performance::before {

  content: "";

  position: absolute;

  z-index: -1;

  left: calc((100vw - 100%) / -2);

  right: calc((100vw - 100%) / -2);

  top: -55px;

  bottom: 0;

  background:

    linear-gradient(
      180deg,

      rgba(2,9,18,0.10) 0%,

      rgba(2,9,18,0.86) 22%,

      rgba(2,9,18,0.98) 60%,

      #020912 100%
    );

}


/* =========================================================
   PERFORMANCE LABEL
========================================================= */

.hz-wire-performance-heading {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 18px;

}


.hz-wire-performance-label {

  flex: 0 0 auto;

  color: var(--hz-blue);

  font-family: var(--hz-mono);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.12em;

}


.hz-wire-performance-line {

  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      to right,
      var(--hz-blue),
      rgba(22,140,255,0.45),
      transparent
    );

}


/* =========================================================
   PERFORMANCE INTRO
========================================================= */

.hz-wire-performance-intro {

  display: grid;

  grid-template-columns:
    minmax(300px, 0.52fr)
    1px
    minmax(300px, 1.48fr);

  gap: 140px;

  align-items: center;

  max-width: 980px;

  margin-bottom: 34px;

}


.hz-wire-performance-intro h2 {

  margin: 0;

  font-family: var(--hz-display);

  font-size: clamp(45px, 3.7vw, 68px);

  font-weight: 800;

  line-height: 0.9;

  text-transform: uppercase;

}


.hz-wire-performance-intro h2 span {

  color: var(--hz-blue);

}


.hz-wire-intro-divider {

  width: 1px;

  height: 70px;

  background: var(--hz-blue);

}


.hz-wire-performance-intro p {

  max-width: 360px;

  margin: 0;

  color: rgba(255,255,255,0.8);

  font-family: var(--hz-body);

  font-size: 15px;

  line-height: 1.6;

}


/* =========================================================
   METRICS
========================================================= */

.hz-wire-metrics {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid rgba(255,255,255,0.22);

  padding-top: 22px;

}


/* =========================================================
   METRIC
========================================================= */

.hz-wire-metric {

  position: relative;

  min-height: 150px;

  padding: 0 45px;

}


.hz-wire-metric:first-child {

  padding-left: 0;

}


.hz-wire-metric:not(:last-child)::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  width: 1px;

  height: 140px;

  background: rgba(22,140,255,0.75);

}


.hz-wire-metric-index {

  margin-bottom: 11px;

  color: var(--hz-blue);

  font-family: var(--hz-mono);

  font-size: 14px;

  font-weight: 700;

}


.hz-wire-metric-value {

  color: white;

  font-family: var(--hz-display);

  font-size: clamp(48px, 4vw, 74px);

  font-weight: 800;

  line-height: 0.9;

  letter-spacing: -0.02em;

  white-space: nowrap;

}


.hz-wire-metric-unit {

  margin-top: 3px;

  color: white;

  font-family: var(--hz-display);

  font-size: clamp(27px, 2.2vw, 40px);

  font-weight: 700;

  line-height: 1;

}


.hz-wire-metric-label {

  margin-top: 10px;

  color: rgba(255,255,255,0.68);

  font-family: var(--hz-mono);

  font-size: 11px;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 0.08em;

}


.hz-wire-metric-tolerance {

  font-size: clamp(42px, 3.4vw, 65px);

}


.hz-wire-metric-text {

  font-size: clamp(40px, 3.3vw, 60px);

}


.hz-wire-metric-lower {

  margin-top: 30px;

}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1300px) {

  .hz-wire-rods-inner {

    width: calc(100% - 70px);

  }


  .hz-wire-rods-copy {

    width: 440px;

  }


  .hz-wire-rods-top {

    min-height: 630px;

  }


  .hz-wire-metric {

    padding: 0 30px;

  }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 950px) {

  .hz-wire-rods {

    min-height: auto;

  }


  .hz-wire-rods-inner {

    width: calc(100% - 40px);

  }


  .hz-wire-rods-bg {

    background-position: 62% top;

  }


  .hz-wire-rods-top {

    min-height: 730px;

  }


  .hz-wire-rods-copy {

    width: min(420px, 55vw);

  }


  .hz-wire-main-title {

    font-size: 68px;

  }


  .hz-wire-performance-intro {

    grid-template-columns:
      1fr;

    gap: 18px;

  }


  .hz-wire-intro-divider {

    display: none;

  }


  .hz-wire-metrics {

    grid-template-columns:
      repeat(2, 1fr);

    row-gap: 35px;

  }


  .hz-wire-metric {

    padding: 25px 30px;

  }


  .hz-wire-metric:first-child {

    padding-left: 30px;

  }


  .hz-wire-metric:nth-child(2)::after {

    display: none;

  }


  .hz-wire-metric:nth-child(3),
  .hz-wire-metric:nth-child(4) {

    border-top:
      1px solid rgba(22,140,255,0.25);

    padding-top: 32px;

  }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 620px) {

  .hz-wire-rods-inner {

    width: calc(100% - 32px);

  }


  .hz-wire-rods-bg {

    background-position: 65% top;

  }


  .hz-wire-rods-bg::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
      rgba(2,9,18,0.36);

  }


  .hz-wire-rods-top {

    min-height: 730px;

    padding-top: 40px;

  }


  .hz-wire-rods-copy {

    width: 100%;

    max-width: 360px;

  }


  .hz-wire-main-title {

    font-size: 57px;

  }


  .hz-wire-rods-copy p {

    font-size: 14px;

  }


  .hz-wire-performance {

    padding-bottom: 35px;

  }


  .hz-wire-performance-intro h2 {

    font-size: 47px;

  }


  .hz-wire-metrics {

    grid-template-columns: 1fr;

  }


  .hz-wire-metric,
  .hz-wire-metric:first-child {

    min-height: auto;

    padding: 28px 0;

    border-bottom:
      1px solid rgba(22,140,255,0.28);

  }


  .hz-wire-metric::after {

    display: none;

  }


  .hz-wire-metric:nth-child(3),
  .hz-wire-metric:nth-child(4) {

    border-top: none;

  }


  .hz-wire-metric-value,
  .hz-wire-metric-text,
  .hz-wire-metric-tolerance {

    font-size: 52px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .hz-wire-cta,
  .hz-wire-arrow {

    transition: none;
  }

}

/* _______________________________CONTACT____________________________________________ */

/* ================================
   HORIZON CONTACT SECTION
================================ */

.horizon-contact {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 100px 7vw 35px;
    overflow: hidden;
    background: #071522;
    color: #ffffff;
    font-family: var(--ff-body);
}

/* Keep every later-added section on the site's shared type system. */
:root {
  --hz-display: var(--ff-display);
  --hz-body: var(--ff-body);
  --hz-mono: var(--ff-mono);
  --display-font: var(--ff-display);
  --body-font: var(--ff-body);
  --mono-font: var(--ff-mono);
}


/* BACKGROUND */

.horizon-contact-bg {
    position: absolute;
    inset: 0;
    background-image: url("YOUR-STEEL-FACTORY-IMAGE.jpg");
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    z-index: 0;
}

.horizon-contact-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(4, 13, 22, 0.94) 0%,
            rgba(4, 18, 30, 0.78) 42%,
            rgba(4, 15, 25, 0.88) 100%
        );
    z-index: 1;
}


/* MAIN WRAPPER */

.horizon-contact-wrapper {
    position: relative;
    z-index: 3;

    max-width: 1450px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 70px;

    align-items: start;
}


/* ================================
   INTRO
================================ */

.horizon-contact-intro {
    padding-top: 10px;
}

.horizon-contact-label {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #68b9ff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.horizon-contact-label span {
    width: 28px;
    height: 2px;
    background: #e2aa45;
    display: inline-block;
}


.horizon-contact-intro h2 {
    margin: 25px 0 20px;

    max-width: 560px;

    font-size: clamp(48px, 5vw, 82px);
    line-height: 0.92;
    letter-spacing: -3px;
    font-weight: 700;
}

.horizon-contact-intro h2 strong {
    display: block;
    color: #5eb5ff;
    font-weight: 700;
}


.horizon-contact-description {
    max-width: 500px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 15px;
    line-height: 1.8;

    margin-bottom: 40px;
}


/* ================================
   CONTACT STACK
================================ */

.horizon-contact-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.horizon-contact-info {
    position: relative;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 17px 20px;

    background: rgba(9, 26, 40, 0.46);

    border: 1px solid rgba(145, 200, 235, 0.18);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease;
}

.horizon-contact-info:hover {
    transform: translateX(8px);

    background: rgba(13, 42, 62, 0.66);

    border-color: rgba(91, 182, 255, 0.5);
}


.horizon-contact-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(85, 174, 240, 0.3),
            rgba(7, 24, 38, 0.8)
        );

    border: 1px solid rgba(102, 187, 242, 0.38);

    color: #ffffff;

    font-size: 17px;
}


.horizon-contact-info small {
    display: block;

    margin-bottom: 6px;

    color: #55adf5;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}


.horizon-contact-info p {
    margin: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 12px;
    line-height: 1.55;
}


/* ================================
   RIGHT SIDE
================================ */

.horizon-contact-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* ================================
   FORM
================================ */

.horizon-contact-form {
    position: relative;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(21, 44, 60, 0.63),
            rgba(5, 18, 29, 0.48)
        );

    border: 1px solid rgba(139, 205, 239, 0.28);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.28);

    overflow: hidden;
}


.horizon-contact-form::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 150px;
    height: 2px;

    background: linear-gradient(
        90deg,
        #e2aa45,
        transparent
    );
}


.horizon-form-heading {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 28px;
}


.horizon-form-heading > span {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(81, 177, 244, 0.35);

    color: #64baff;

    background: rgba(8, 29, 44, 0.7);
}


.horizon-form-heading small {
    display: block;

    color: #5db5fa;

    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 700;

    margin-bottom: 5px;
}


.horizon-form-heading h3 {
    margin: 0;

    font-size: 21px;
    letter-spacing: 0.5px;
}


/* FORM GRID */

.horizon-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


.horizon-input-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.horizon-input-box label {
    color: #6bb9f3;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


.horizon-input-box input,
.horizon-input-box select,
.horizon-input-box textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid rgba(164, 204, 226, 0.22);

    background: rgba(2, 14, 24, 0.42);

    color: #ffffff;

    outline: none;

    font-family: inherit;

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}


.horizon-input-box input,
.horizon-input-box select {
    height: 48px;
    padding: 0 14px;
}


.horizon-input-box textarea {
    min-height: 125px;

    padding: 14px;

    resize: vertical;
}


.horizon-input-box input::placeholder,
.horizon-input-box textarea::placeholder {
    color: rgba(255, 255, 255, 0.34);
}


.horizon-input-box select {
    appearance: none;

    background-image:
        linear-gradient(45deg, transparent 50%, #6bb9f3 50%),
        linear-gradient(135deg, #6bb9f3 50%, transparent 50%);

    background-position:
        calc(100% - 18px) 20px,
        calc(100% - 13px) 20px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


.horizon-input-box select option {
    background: #071b2a;
    color: #ffffff;
}


.horizon-input-box input:focus,
.horizon-input-box select:focus,
.horizon-input-box textarea:focus {
    border-color: rgba(91, 181, 248, 0.75);

    background: rgba(6, 27, 42, 0.65);
}


.horizon-full-input {
    margin-top: 20px;
}


.horizon-message-box {
    margin-top: 20px;
}


/* BUTTON */

.horizon-submit-btn {
    margin-top: 20px;

    height: 52px;

    padding: 0 24px;

    border: 1px solid rgba(241, 184, 81, 0.65);

    background:
        linear-gradient(
            90deg,
            #d89d35,
            #efb84f
        );

    color: #101820;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.horizon-submit-btn span {
    font-size: 20px;
    line-height: 1;
}


.horizon-submit-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(226, 170, 69, 0.25);
}


/* ================================
   MAP
================================ */

.horizon-map-box {
    position: relative;

    min-height: 210px;

    overflow: hidden;

    border: 1px solid rgba(133, 194, 229, 0.25);

    background:
        linear-gradient(
            rgba(6, 22, 34, 0.65),
            rgba(6, 22, 34, 0.78)
        ),
        url("YOUR-MAP-IMAGE.jpg");

    background-size: cover;
    background-position: center;

    backdrop-filter: blur(10px);
}


.horizon-map-top {
    position: absolute;

    top: 17px;
    left: 20px;

    display: flex;
    align-items: center;
    gap: 8px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}


.horizon-map-top i {
    color: #63b9f7;
}


.horizon-map-content {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 25px;
}


.horizon-map-pin {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    font-size: 25px;

    background:
        rgba(22, 62, 87, 0.72);

    border: 1px solid rgba(91, 186, 248, 0.6);

    box-shadow:
        0 0 0 10px rgba(72, 165, 222, 0.08),
        0 0 35px rgba(61, 164, 225, 0.2);
}


.horizon-map-location {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


.horizon-map-location strong {
    font-size: 17px;
}


.horizon-map-location span {
    color: rgba(255, 255, 255, 0.55);

    font-size: 11px;
}


.horizon-map-location a {
    margin-top: 8px;

    color: #66baff;

    font-size: 11px;

    text-decoration: none;
}


/* ================================
   QUOTE
================================ */

.horizon-contact-quote {
    position: relative;

    z-index: 3;

    max-width: 1450px;

    margin: 25px auto 0;

    padding: 17px 25px;

    display: flex;
    align-items: center;

    gap: 15px;

    border: 1px solid rgba(118, 182, 218, 0.22);

    background: rgba(6, 23, 36, 0.5);

    backdrop-filter: blur(15px);
}


.horizon-quote-mark {
    color: #e2aa45;

    font-size: 34px;

    line-height: 1;
}


.horizon-contact-quote p {
    margin: 0 0 4px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 12px;

    font-style: italic;
}


.horizon-contact-quote small {
    color: #5fb6f5;

    font-size: 8px;

    letter-spacing: 1.5px;

    font-weight: 700;
}


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

@media (max-width: 1100px) {

    .horizon-contact {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .horizon-contact-wrapper {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .horizon-contact-intro h2 {
        font-size: 65px;
    }

    .horizon-contact-stack {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 700px) {

    .horizon-contact {
        padding: 70px 20px 25px;
    }

    .horizon-contact-intro h2 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .horizon-contact-description {
        font-size: 13px;
    }

    .horizon-contact-stack {
        grid-template-columns: 1fr;
    }

    .horizon-contact-form {
        padding: 20px;
    }

    .horizon-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .horizon-full-input,
    .horizon-message-box {
        margin-top: 18px;
    }

    .horizon-map-content {
        padding: 20px;
    }

    .horizon-map-pin {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }

    .horizon-map-location strong {
        font-size: 14px;
    }

    .horizon-contact-quote {
        align-items: flex-start;
        padding: 15px;
    }

    .horizon-contact-quote p {
        font-size: 10px;
        line-height: 1.5;
    }

}

/* Final contact overrides: shared fonts, an embedded map, and a legible quote. */
.horizon-contact-form { font-family: var(--ff-body); }
.horizon-form-heading h3 { font-family: var(--ff-display); }
.horizon-form-heading small,
.horizon-input-box label,
.horizon-submit-btn,
.horizon-map-top,
.horizon-contact-quote small { font-family: var(--ff-mono); }
.horizon-input-box input,
.horizon-input-box select,
.horizon-input-box textarea { font-family: var(--ff-body); }
.horizon-map-box { background: #dbe5e8; }
.horizon-map-frame { display:block; width:100%; height:210px; border:0; filter:saturate(.82) contrast(1.05); }
.horizon-map-top { z-index:1; padding:8px 10px; background:rgba(6, 22, 34, .84); text-decoration:none; }
.horizon-contact-quote p { font-size:clamp(16px, 1.35vw, 21px); line-height:1.45; }
@media (max-width:700px) { .horizon-contact-quote p { font-size:15px; } }

/* Home process slider: give the photography and stage copy more room. */
#technology .process-experience .story-grid { min-height: 860px; }

/* About document downloads. Add wire-rods.pdf and steel-bars.pdf to profile-pdf/ when ready. */
.about-downloads {
  padding: 24px 0;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line-dark);
}
.about-download-menu { position: relative; width: min(100%, 360px); }
.about-download-menu summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 18px;
  color: var(--paper);
  border: 1px solid var(--line-dark);
  background: rgba(255,255,255,.04);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  list-style: none;
}
.about-download-menu summary::-webkit-details-marker { display: none; }
.about-download-menu[open] summary span { transform: rotate(45deg); }
.about-download-options {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  width: 100%;
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.about-download-options a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--ff-body);
  font-size: 14px;
}
.about-download-options a:last-child { border-bottom: 0; }
.about-download-options a:hover { color: var(--gold-light); background: rgba(255,255,255,.05); }
.about-download-options a span { font-family: var(--ff-mono); }
@media (max-width:900px) { #technology .process-experience .story-grid { min-height: 740px; } }
@media (max-width:600px) { #technology .process-experience .story-grid { min-height: 680px; } }

/* ================================================================
   FINAL MOBILE RESPONSIVE SAFETY NET
   Shared by every PHP page. Keep this block last so older page-level
   rules cannot reintroduce fixed widths on phones.
================================================================ */
@media (max-width: 900px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  *,
  *::before,
  *::after {
    min-width: 0;
  }

  img,
  video,
  iframe,
  svg {
    max-width: 100%;
  }

  /* Navigation and tap targets */
  .nav-inner { gap: 12px; }
  .nav-cta .btn { display: none; }
  .burger {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
  .nav-links {
    padding: 92px 20px 30px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links > a,
  .nav-links .dropdown-trigger {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .dropdown-item { min-height: 48px; }

  /* Prevent grid/flex children from forcing page overflow */
  .stats-grid,
  .snap-grid,
  .vm-grid,
  .apps-grid,
  .sourcing,
  .leadership,
  .csr-row,
  .contact-grid,
  .horizon-contact-wrapper,
  .horizon-contact-stack,
  .footer-grid,
  .catalog-grid,
  .wire-performance-grid,
  .iso-nav-grid,
  .iso-spec-grid,
  .overview-grid {
    max-width: 100%;
  }

  .sourcing-visual,
  .img-container,
  .csr-visual,
  .why-rebar-visual {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Product catalog cards and dialogs */
  .catalog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .catalog-card {
    width: 100%;
    max-width: 100%;
    padding: 22px;
  }
  .catalog-card h3 {
    font-size: clamp(27px, 9vw, 34px);
    overflow-wrap: anywhere;
  }
  .product-modal,
  .modal-content {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
  .modal-header,
  .modal-body { padding-left: 18px; padding-right: 18px; }
  .modal-nav-tabs { scrollbar-width: thin; }

  /* Wide data stays usable with a contained horizontal swipe. */
  .table-wrap,
  .comparison-table-wrap,
  .specs-table-wrap,
  .modal-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  /* Forms, contact details and long addresses/emails */
  input,
  select,
  textarea,
  button { max-width: 100%; }
  .horizon-contact,
  .horizon-contact-wrapper,
  .horizon-contact-right,
  .horizon-contact-form,
  .horizon-contact-info > div:last-child {
    width: 100%;
    max-width: 100%;
  }
  .horizon-contact-info p,
  .horizon-contact-info a,
  .footer-grid p,
  .footer-grid a {
    overflow-wrap: anywhere;
  }
  .horizon-contact-bg,
  .hero-video-bg {
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
  }

  .foot-bottom { width: 100%; }
  .foot-social { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }

  .wrap,
  section:not(:has(.wrap)) {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-title,
  .subpage-hero h1,
  .horizon-contact-intro h2 {
    overflow-wrap: anywhere;
  }

  .section-head h2 { line-height: .98; }
  .section-head p,
  .hero-lead,
  .hero-sub { font-size: 15px; }

  .stats-grid { grid-template-columns: 1fr; }
  .stat { padding: 24px 16px; }

  .catalog-card { padding: 18px; }
  .catalog-card-specs { grid-template-columns: 1fr; }
  .card-action-btn {
    min-height: 48px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .horizon-contact { padding-left: 16px; padding-right: 16px; }
  .horizon-contact-form,
  .horizon-map-content { padding: 18px; }
  .horizon-contact-info { align-items: flex-start; }
  .horizon-contact-icon { flex: 0 0 auto; }

  footer { padding-top: 52px; }
  .footer-grid { gap: 30px; padding-bottom: 42px; }
  .foot-bottom { align-items: flex-start; }
}

@media (max-width: 360px) {
  .wrap,
  section:not(:has(.wrap)),
  .horizon-contact {
    padding-left: 12px;
    padding-right: 12px;
  }
  .logo .site-logo { width: min(178px, 58vw); }
  .hero-title { font-size: clamp(46px, 16vw, 58px); }
  .catalog-card,
  .why-content-box,
  .image-content-box,
  .home-merge .csr-row { padding: 16px !important; }
  .catalog-card h3 { font-size: 26px; }
  .horizon-contact-form { padding: 16px; }
}

/* ================================================================
   FINAL DESKTOP / LAPTOP ALIGNMENT
   Fluid gutters replace the old fixed 200px offset and keep every
   shared section on the same vertical alignment line.
================================================================ */
html { overflow-x: clip; }

.wrap,
section:not(:has(.wrap)) {
  padding-left: clamp(24px, 8vw, 200px);
  padding-right: clamp(24px, 8vw, 200px);
}

/* Full-bleed media may visually cover the viewport but must never create
   a horizontal page scroll because of the browser scrollbar width. */
.hero,
.subpage-hero,
.product-showcase,
.product-visual-pane,
.story-grid,
.story-sticky,
.wire-section,
.horizon-contact {
  max-width: 100%;
  overflow-x: clip;
}

.hero-video-bg,
.horizon-contact-bg {
  left: 0;
  right: 0;
  width: 100%;
}

@media (min-width: 1201px) and (max-width: 1500px) {
  .logo .site-logo { width: clamp(235px, 19vw, 285px); }
  header.scrolled .logo .site-logo { width: 205px; }
  .nav-links { gap: clamp(18px, 1.7vw, 28px); }
  .nav-links a { font-size: 12px; }
  .nav-cta { gap: 12px; }
  .nav-cta .btn { padding-left: 18px; padding-right: 18px; }
}

/* Compact laptops use the touch-friendly menu before the desktop header
   becomes crowded. This also fixes the 1024px About-page overflow. */
@media (min-width: 901px) and (max-width: 1200px) {
  html { scroll-padding-top: 76px; }
  header { padding: 16px 0; }
  header.scrolled { padding: 11px 0; }
  .logo .site-logo { width: min(220px, 38vw); }
  .nav-inner { gap: 16px; }
  .nav-cta .btn { display: none; }
  .burger {
    display: block;
    width: 42px;
    height: 30px;
    flex: 0 0 42px;
  }
  .burger span:nth-child(1) { top: 3px; }
  .burger span:nth-child(2) { top: 14px; }
  .burger span:nth-child(3) { top: 25px; }
  .burger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .burger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

  .nav-links {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 14px;
    padding: 96px clamp(28px, 8vw, 80px) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(6, 20, 38, .98);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .45s var(--ease2), opacity .35s var(--ease), visibility .35s;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav-links > a,
  .nav-links > .nav-item-dropdown {
    width: 100%;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
  }
  .nav-links.open > a,
  .nav-links.open > .nav-item-dropdown {
    opacity: 1;
    transform: none;
  }
  .nav-links a,
  .dropdown-trigger {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--paper);
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 20px;
    font-weight: 700;
  }
  .nav-links a::after { display: none; }
  .nav-item-dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .dropdown-menu {
    position: static;
    width: 100%;
    min-width: 0;
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none !important;
    box-shadow: none;
  }
  .nav-item-dropdown.open .dropdown-menu { display: flex; }
  .dropdown-item { width: 100%; }

  /* The three-column materials comparison needs more width than a laptop
     provides; stack it before it can push the page to the right. */
  .hz-comparison {
    display: flex;
    flex-direction: column;
  }
  .hz-standard,
  .hz-alternative,
  .hz-billet-wrap { width: 100%; max-width: 100%; }
  .hz-billet-wrap { order: -1; }
  .hz-alternative { margin-top: 48px; }
}

@media (max-width: 900px) {
  .wrap,
  section:not(:has(.wrap)) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 600px) {
  .wrap,
  section:not(:has(.wrap)) {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 360px) {
  .wrap,
  section:not(:has(.wrap)) {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ================================================================
   RESPONSIVE CONTENT COLLISION FIXES
================================================================ */
.partner-cta {
  width: 100%;
  max-width: 100%;
  gap: 28px;
}
.partner-cta > div { min-width: 0; }
.partner-cta-btn { flex: 0 0 auto; }

/* The number and its description occupy separate columns. An older laptop
   rule placed both in column two, which caused the visible text collision. */
.hz-sus-stat-number {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
.hz-sus-stat-copy {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}
.hz-sus-stat {
  grid-template-columns: 48px auto minmax(0, 1fr);
  grid-template-rows: auto;
}

@media (max-width: 1350px) {
  .hz-sus-stat {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
  }
  .hz-sus-stat-number {
    grid-column: 1;
    grid-row: 1;
  }
  .hz-sus-stat-copy {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 1000px) {
  .hz-sustainability-stats {
    grid-template-columns: 1fr;
  }
  .hz-sus-stat:not(:last-child)::after {
    top: auto;
    right: 22px;
    bottom: 0;
    left: 22px;
    width: auto;
    height: 1px;
  }
}

@media (max-width: 650px) {
  /* Inline desktop declarations in the leadership and QA blocks need an
     explicit mobile override or they remain squeezed into two columns. */
  .leadership-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 30px !important;
    margin-bottom: 32px !important;
  }
  .leadership-grid h3 { font-size: 25px !important; }
  .leadership-grid p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    overflow-wrap: anywhere;
  }
  .apps-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .partner-cta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 24px !important;
  }
  .partner-cta-btn {
    width: 100%;
    max-width: 100%;
    min-height: 50px;
    margin-left: 0 !important;
    justify-content: center;
  }

  .hz-sustainability-stats {
    width: 100%;
    min-height: 0;
  }
  .hz-sus-stat {
    grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 16px;
    padding: 24px 18px;
  }
  .hz-sus-stat-icon { display: none; }
  .hz-sus-stat-number {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-size: clamp(46px, 15vw, 58px);
    line-height: .9;
  }
  .hz-sus-stat-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
  .hz-sus-stat-copy strong {
    margin-bottom: 5px;
    font-size: 10px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .hz-sus-stat-copy span {
    font-size: 14px;
    line-height: 1.45;
  }
  .hz-sus-stat-copy br { display: none; }
}

@media (max-width: 360px) {
  .partner-cta { padding: 20px !important; }
  .hz-sus-stat {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    padding: 22px 14px;
  }
  .hz-sus-stat-number { font-size: 44px; }
  .hz-sus-stat-copy span { font-size: 13px; }
}