@font-face {
  font-family: 'Montserrat';
  src: url('../webfonts/montserrat-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --accent: #9cd116;
  --ink:    #ffffff;

  /* Geometry measured from the source bitmap.
     1cqw = 12.75px at the 1275px reference width, so a measured pixel value p
     is written as (p / 12.75)cqw. The banner's aspect-ratio is locked, which
     keeps horizontal and vertical proportions locked together. */
  --pad-left:    18.0000cqw;   /* text column starts at x = 255px           */
  --eyebrow-top:  5.4147cqw;   /* line-box top; ink cap lands on y = 72px    */
  --title-top:    8.1045cqw;   /* ink cap lands on y = 110px                  */
  --sub-top:     15.6815cqw;   /* ink cap lands on y = 205px                  */
  --rule-top:    20.1569cqw;   /* bar top edge at y = 257px                   */

  /* sampled blue gradient: the photo covers everything past 54% */
  --bg-gradient: linear-gradient(90deg,
    #0c3670 0.0%,  #0c3773 3.76%, #0c3a76 7.53%, #0b3b79 11.29%,
    #0a3b7d 15.06%,#0a3c81 18.82%,#0c4081 22.59%,#0f4283 26.35%,
    #0d4286 30.12%,#0a4089 33.88%,#0b418a 37.65%,#0b418a 41.41%,
    #0a428c 45.18%,#0c448e 48.94%,#0d458f 52.71%,#0d458f 100%);
}

* { box-sizing: border-box; }


/* --------------------------------------------------------------------------
   Banner shell: fixed 1275/324 aspect ratio, background photo on the right
   blended over the sampled gradient.
   -------------------------------------------------------------------------- */
.news-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1275 / 324;
  overflow: hidden;
  container-type: inline-size;
  background-repeat: no-repeat, no-repeat;
  background-position:center;
  background-size: auto 100%, 100% 100%;
}
.news-hero18 { 
    background-image:
    url('../images/bg-photo.jpg'),
    var(--bg-gradient);
}
.news-hero19 { 
    background-image:
    url('../images/bg-photo1.jpg'),
    var(--bg-gradient);
    text-align: right;
}
.news-hero20 { 
    background-image:
    url('../images/bg-photo.jpg'),
    var(--bg-gradient);
}
.news-hero40 { 
    background-image:
    url('../images/bg-photo2.jpg'),
    var(--bg-gradient);
}
.news-hero__eyebrow,
.news-hero__title,
.news-hero__sub,
.news-hero__rule {
  position: absolute;
  left: var(--pad-left);
  margin: 0;
}
.news-hero19 .news-hero__eyebrow, .news-hero19 .news-hero__title, .news-hero19 .news-hero__sub, .news-hero19 .news-hero__rule{
  left: unset;
  right: var(--pad-left);
}
/* "Company News" — 25px / 700 at reference width, cap height 18px */
.news-hero__eyebrow {
  top: var(--eyebrow-top);
  color: var(--ink);
  font-size: 1.96078cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.news-hero__eyebrow .is-accent { color: var(--accent); }

/* "ZHONGXIN / HEAVY INDUSTRIAL" — 42px / 700, 44px leading */
.news-hero__title {
  top: var(--title-top);
  color: var(--ink);
  font-size: 3.29412cqw;
  font-weight: 700;
  line-height: 1.04762;      /* 44px baseline-to-baseline at 42px */
  letter-spacing: 0;
}

/* "Crushing Equipment Manufacturing, …" — Arial-class 15px / 400, 21px leading */
.news-hero__sub {
  top: var(--sub-top);
  color: var(--accent);
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.17647cqw;
  font-weight: 400;
  line-height: 1.4;          /* 21px baseline-to-baseline at 15px */
  letter-spacing: 0;
  width: 30%;
}

/* 66 x 3 accent bar under the copy */
.news-hero__rule {
  top: var(--rule-top);
  width: 5.17647cqw;          /* 66px */
  height: 0.23529cqw;         /* 3px  */
  background: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .news-hero__eyebrow,
  .news-hero__title,
  .news-hero__sub,
  .news-hero__rule { animation: rise .7s cubic-bezier(.22,.61,.36,1) both; }
  .news-hero__title  { animation-delay: .08s; }
  .news-hero__sub    { animation-delay: .16s; }
  .news-hero__rule   { animation-delay: .24s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(0.5cqw); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  /* Below this width the 3.29cqw headline wraps awkwardly; tighten the column
     and let the photo recede so the type stays legible. */
  :root { --pad-left: 8cqw; }
  .news-hero { aspect-ratio: 4 / 3; }
  .news-hero__title,
  .news-hero__sub { white-space: normal; }
  .news-hero__sub { line-height: 1.45; }
}