.home-reference { background: #f7f7f5; }

.hr-home {
  --hr-navy: #041a35;
  --hr-deep: #03172e;
  --hr-red: #dd2028;
  --hr-ink: #07162e;
  --hr-copy: #4e5c6e;
  --hr-line: #cfd4d9;
  overflow: clip;
  color: var(--hr-ink);
  background: #f7f7f5;
  font-family: 'Inter', Arial, sans-serif;
}
.hr-home *, .hr-home *::before, .hr-home *::after { box-sizing: border-box; }
.hr-home img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-shell { width: min(92%, 1540px); margin-inline: auto; }

.hr-hero { position: relative; height: clamp(590px, calc(100svh - 76px), 800px); min-height: 590px; display: flex; align-items: center; isolation: isolate; overflow: hidden; color: #fff; background: var(--hr-deep); }
.hr-hero > img, .hr-hero-shade { position: absolute; inset: 0; }
.hr-hero > img { z-index: -2; object-position: center 55%; }
.hr-hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(2,20,39,.94) 0%, rgba(3,23,46,.8) 35%, rgba(3,23,46,.25) 62%, rgba(3,23,46,.08) 100%); }
.hr-hero-content { position: relative; z-index: 1; }
.hr-hero h1 { max-width: 760px; margin: 0 0 24px; color: #fff; font-size: clamp(50px, 5.1vw, 84px); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.hr-hero p { margin-bottom: 34px; color: rgba(255,255,255,.86); font-size: clamp(15px, 1.15vw, 19px); line-height: 1.55; }
.hr-red-button { min-width: 230px; min-height: 56px; display: inline-flex; align-items: center; justify-content: space-between; gap: 26px; padding: 0 22px; color: #fff; background: var(--hr-red); font-size: 14px; transition: .25s ease; }
.hr-red-button span { font-size: 24px; font-weight: 300; transition: transform .25s ease; }
.hr-red-button:hover { color: #fff; background: #ba121a; }
.hr-red-button:hover span { transform: translateX(5px); }

.hr-intro { padding: 0 0 30px; background: #f7f7f5; }
.hr-stats { min-height: 165px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-bottom: 1px solid var(--hr-line); }
.hr-stats article { min-height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid var(--hr-line); }
.hr-stats article:last-child { border-right: 0; }
.hr-stats strong { color: var(--hr-ink); font-size: clamp(32px, 3vw, 50px); font-weight: 400; letter-spacing: .03em; }
.hr-stats strong small { font-size: .62em; font-weight: 400; }
.hr-stats span { margin-top: 7px; color: var(--hr-ink); font-size: clamp(10px, .65vw, 11px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

.hr-overview { overflow: hidden; background: #fff; border-right: 1px solid var(--hr-line); border-bottom: 1px solid var(--hr-line); border-left: 1px solid var(--hr-line); }
.hr-overview-top { min-height: clamp(290px, 26vw, 400px); height: auto; display: grid; grid-template-columns: 39% 61%; border-bottom: 1px solid var(--hr-line); }
.hr-overview-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 4.7vw, 74px); }
.hr-overview-copy h2 { margin: 0; color: var(--hr-ink); font-size: clamp(42px, 3.5vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.hr-overview-rule { width: 32px; height: 2px; display: block; margin: 25px 0 22px; background: var(--hr-red); }
.hr-overview-copy p { max-width: 430px; margin: 0; color: #263345; font-size: clamp(13px, 1vw, 16px); line-height: 1.65; }
.hr-overview-image { min-height: 0; overflow: hidden; }
.hr-overview-image img { object-position: center; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.hr-overview:hover .hr-overview-image img { transform: scale(1.018); }

.hr-overview-cards { min-height: clamp(190px, 15.5vw, 238px); display: grid; grid-template-columns: repeat(3, 1fr); }
.hr-overview-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(26px, 3vw, 46px) clamp(34px, 4.3vw, 68px); color: var(--hr-ink); border-right: 1px solid var(--hr-line); transition: background-color .25s ease; }
.hr-overview-card:last-child { border-right: 0; }
.hr-overview-card:hover { color: var(--hr-ink); background: #fafaf8; }
.hr-overview-card-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; color: var(--hr-ink); transition: color .25s ease, transform .25s ease; }
.hr-overview-card-icon svg { width: 50px; height: 50px; }
.hr-overview-card:hover .hr-overview-card-icon { color: var(--hr-red); transform: translateY(-2px); }
.hr-overview-card-rule { width: 28px; height: 2px; display: block; margin: 14px 0 13px; background: var(--hr-red); }
.hr-overview-card h3 { margin: 0 0 8px; color: var(--hr-ink); font-size: clamp(17px, 1.35vw, 21px); font-weight: 800; line-height: 1.2; }
.hr-overview-card p { max-width: 340px; margin: 0; color: var(--hr-copy); font-size: clamp(12px, .82vw, 13px); line-height: 1.55; }

.hr-process { color: #fff; background: radial-gradient(circle at 72% 40%, #0b3157 0, var(--hr-deep) 45%, #021327 100%); }
.hr-process-grid { min-height: 205px; display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(30px, 4vw, 70px); align-items: center; }
.hr-process h2 { color: #fff; font-size: clamp(26px, 2.5vw, 38px); font-weight: 700; line-height: 1.25; }
.hr-process-steps { display: grid; grid-template-columns: 1fr minmax(20px, 90px) 1fr minmax(20px, 90px) 1fr minmax(20px, 90px) 1fr; align-items: center; }
.hr-process-steps article { display: flex; flex-direction: column; align-items: center; }
.hr-process-steps svg { width: 54px; height: 54px; margin-bottom: 11px; fill: none; stroke: #fff; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.hr-process-steps b { margin-bottom: 4px; font-size: 12px; font-weight: 500; }
.hr-process-steps span { font-size: 13px; }
.hr-process-steps > i { width: 100%; height: 1px; background: rgba(255,255,255,.55); }

.hr-machine { min-height: 520px; display: grid; grid-template-columns: 1.05fr .95fr; background: #f7f7f5; }
.hr-machine-image { min-height: 520px; overflow: hidden; }
.hr-machine-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(35px, 4vw, 55px) clamp(35px, 6vw, 120px); }
.hr-red-rule { width: 38px; height: 3px; margin-bottom: 13px; background: var(--hr-red); }
.hr-machine h2 { margin: 0 0 12px; color: var(--hr-ink); font-size: clamp(38px, 4vw, 64px); font-weight: 800; letter-spacing: -.04em; }
.hr-machine-copy > p { max-width: 560px; margin-bottom: 28px; color: var(--hr-copy); font-size: 13.5px; line-height: 1.65; }
.hr-machine-specs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 26px; border-top: 1px solid #aeb7c1; border-left: 1px solid #d3d7dc; }
.hr-machine-specs article { min-height: 85px; display: flex; flex-direction: column; justify-content: center; padding: 14px; border-right: 1px solid #d3d7dc; border-bottom: 1px solid #aeb7c1; }
.hr-machine-specs strong { margin-bottom: 6px; color: var(--hr-ink); font-size: 17px; }
.hr-machine-specs span { color: var(--hr-copy); font-size: clamp(9px, .55vw, 10px); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hr-machine-copy > a { align-self: flex-start; color: var(--hr-ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hr-machine-copy > a span { margin-left: 12px; color: var(--hr-red); font-size: 18px; }

.hr-mosaic { padding: 16px 0 35px; background: #f7f7f5; }
.hr-mosaic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hr-mosaic article > div { height: 250px; margin-bottom: 12px; overflow: hidden; }
.hr-mosaic article img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.hr-mosaic article:hover img { transform: scale(1.035); }
.hr-mosaic h3 { margin: 0 0 5px; color: var(--hr-ink); font-size: 14px; font-weight: 800; }
.hr-mosaic p { max-width: 390px; color: var(--hr-copy); font-size: clamp(11px, .7vw, 12px); line-height: 1.45; }

.hr-cta { color: #fff; background: var(--hr-deep); border-bottom: 1px solid rgba(255,255,255,.2); }
.hr-cta .hr-shell { min-height: 142px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-inline: 40px; }
.hr-cta h2 { color: #fff; font-size: clamp(24px, 2.4vw, 38px); font-weight: 700; line-height: 1.25; }
.hr-cta .hr-red-button { min-width: 310px; }

/* Smooth Slow Scroll Reveal System for Home */
.vln-scroll-target,
.hr-hero-content,
.hr-stats article,
.hr-overview,
.hr-overview-card,
.hr-process,
.hr-machine,
.hr-mosaic article,
.hr-cta,
[data-reveal] {
  opacity: 0;
  transform: translateY(45px) scale(0.98);
  filter: blur(3px);
  transition: opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.30s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.vln-scroll-target.is-visible,
.vln-scroll-target.is-revealed,
.hr-hero-content.is-revealed,
.hr-stats article.is-revealed,
.hr-overview.is-revealed,
.hr-overview-card.is-revealed,
.hr-process.is-revealed,
.hr-machine.is-revealed,
.hr-mosaic article.is-revealed,
.hr-cta.is-revealed,
[data-reveal].is-visible,
[data-reveal].is-revealed {
  opacity: 1 !important;
  transform: none !important;
  filter: blur(0) !important;
}

@media (max-width: 1100px) {
  .hr-overview-copy { padding-inline: 42px; }
  .hr-overview-card { padding-inline: 34px; }
  .hr-process-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 38px; }
}

@media (max-width: 992px) {
  .hr-hero { height: 720px; padding-top: 70px; }
  .hr-hero h1 { font-size: clamp(48px, 8vw, 72px); }
  .hr-overview-top { height: auto; grid-template-columns: 1fr; }
  .hr-overview-copy { min-height: 300px; }
  .hr-overview-image { height: 430px; }
  .hr-overview-cards { grid-template-columns: 1fr 1fr; }
  .hr-overview-card { min-height: 215px; }
  .hr-overview-card:nth-child(2) { border-right: 0; }
  .hr-overview-card:last-child { grid-column: 1 / -1; border-top: 1px solid var(--hr-line); }
  .hr-machine { grid-template-columns: 1fr; }
  .hr-machine-image { min-height: 500px; }
  .hr-process-steps { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .hr-process-steps > i { display: none; }
  .hr-machine-copy { padding: 60px 5vw; }
  .hr-mosaic-grid { grid-template-columns: 1fr; gap: 32px; }
  .hr-mosaic article > div { height: 430px; }
}

@media (max-width: 640px) {
  .hr-shell { width: calc(100% - 32px); }
  .hr-hero { min-height: 680px; }
  .hr-hero > img { object-position: 63% center; }
  .hr-hero-shade { background: linear-gradient(90deg, rgba(2,20,39,.93), rgba(3,23,46,.45)); }
  .hr-hero h1 { font-size: clamp(42px, 13vw, 62px); }
  .hr-red-button { width: 100%; min-width: 0; }
  .hr-stats { grid-template-columns: 1fr; padding-block: 18px; }
  .hr-stats article { min-height: 90px; border-right: 0; border-bottom: 1px solid var(--hr-line); }
  .hr-stats article:last-child { border-bottom: 0; }
  .hr-overview { margin-inline: -1px; }
  .hr-overview-copy { min-height: 270px; padding: 38px 30px; }
  .hr-overview-copy h2 { font-size: 42px; }
  .hr-overview-rule { margin-block: 19px 17px; }
  .hr-overview-image { height: 300px; }
  .hr-overview-cards { grid-template-columns: 1fr; }
  .hr-overview-card { min-height: 205px; padding: 32px 30px; border-right: 0; border-bottom: 1px solid var(--hr-line); }
  .hr-overview-card:nth-child(2) { border-right: 0; }
  .hr-overview-card:last-child { grid-column: auto; border-top: 0; border-bottom: 0; }
  .hr-machine-image { min-height: 360px; }
  .hr-process-grid { padding-block: 42px; }
  .hr-process-steps { grid-template-columns: 1fr 1fr; gap: 35px 18px; }
  .hr-machine-specs { grid-template-columns: 1fr; }
  .hr-mosaic article > div { height: 300px; }
  .hr-cta .hr-shell { min-height: 230px; flex-direction: column; align-items: stretch; justify-content: center; padding-inline: 0; }
  .hr-cta .hr-red-button { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hr-home img, .hr-home a, .hr-home span { transition: none !important; }
}
