/* ==========================================================================
   HDcMR — engineering gravity. Editorial asymmetry on light chapters,
   strict centred symmetry on the precision chapters.
   ========================================================================== */

/* --- HERO ----------------------------------------------------------------- */

.dhero__inner {
  padding-top: calc(var(--nav-h) + clamp(60px, 12vh, 150px));
  padding-bottom: clamp(56px, 8vw, 110px);
}
.dhero__headline { margin-top: clamp(24px, 3vw, 40px); max-width: min(13ch, 100%); }

.dhero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }



/* --- ENGINEERED TWICE ----------------------------------------------------- */

.twice__grid { row-gap: 40px; }
.twice__grid .index { margin-bottom: 8px; }
.twice__title { margin-bottom: clamp(40px, 5vw, 70px); }
.twice__body { row-gap: 34px; }


/* --- THE COMPRESSION — signature ------------------------------------------ */

.compress { padding-block: 0; }

.compress__pin {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.compress__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}



/* the slab the particles compact into */

.compress__type {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}
.compress__type .index { margin-bottom: 20px; }

.compress__line {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 108px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: none;
  opacity: 0;
}

.compress__cap { margin-top: clamp(26px, 3vw, 44px); }

@media (max-width: 860px) {
  .compress__pin { min-height: 78svh; }
}


/* --- THE NAME IS THE SPECIFICATION ---------------------------------------- */

.spec3__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.spec3__head .index { margin-bottom: 8px; }

.spec3__list { border-top: 1px solid var(--rule); }

.spec3__item {
  display: grid;
  grid-template-columns: minmax(120px, 2fr) minmax(0, 9fr);
  gap: clamp(20px, 4vw, 70px);
  align-items: start;
  padding-block: clamp(34px, 4.4vw, 66px);
  border-bottom: 1px solid var(--rule);
}

/* the letters of the name, set as the specification itself */
.spec3__letter {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 82px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
}

.spec3__text h3 { margin-bottom: 14px; font-size: clamp(20px, 1.7vw, 27px); }
.spec3__text p { font-size: var(--fs-small); }

.spec3__note {
  margin-top: clamp(40px, 5vw, 66px);
  max-width: min(66ch, 100%);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 400;
  font-size: 13px;
}

@media (max-width: 720px) {
  .spec3__item { grid-template-columns: 1fr; row-gap: 18px; }
}


/* --- TEN QUIET PROMISES --------------------------------------------------- */

.promises__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.promises__head .index { margin-bottom: 8px; }

.promises__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 7vw, 130px);
}
.promise { padding-block: clamp(24px, 2.8vw, 40px); border-top: 1px solid var(--rule); }
.promise h3 { margin: 12px 0 10px; font-size: clamp(18px, 1.5vw, 24px); }
.promise p { font-size: var(--fs-small); }

@media (max-width: 760px) { .promises__list { grid-template-columns: 1fr; } }


/* --- SURFACE COMPATIBILITY — the exploded layer --------------------------- */

.beneath__grid { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.beneath__grid .index { margin-bottom: 8px; }
.beneath__body { row-gap: 60px; align-items: center; }

.exploded {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 22px);
  padding-block: clamp(20px, 3vw, 44px);
}

.layer {
  position: relative;
  display: block;
  height: clamp(22px, 2.6vw, 40px);
  background: var(--plate);
  will-change: transform;
}
.layer--1 { height: clamp(52px, 6vw, 92px); background: #D6D2CC; }

.layer i {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--dim);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .layer i { left: auto; right: 8px; }
}


/* --- MANUFACTURING · SUSTAINABILITY --------------------------------------- */

.discipline__grid, .less__grid { row-gap: 40px; }
.discipline__grid .index, .less__grid .index { margin-bottom: 8px; }
.discipline__title, .less__title { margin-bottom: clamp(40px, 5vw, 70px); }
.discipline__body { max-width: min(62ch, 100%); }
.less__body { row-gap: 34px; }


/* --- APPLICATIONS --------------------------------------------------------- */

.work__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.work__head .index { margin-bottom: 8px; }
.work__intro { margin-top: 26px; }

.work__list {
  border-top: 1px solid var(--rule);
  columns: 2;
  column-gap: clamp(40px, 7vw, 120px);
}
.work__list li {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: clamp(16px, 1.8vw, 26px);
  border-bottom: 1px solid var(--rule);
}
.work__list span.dim { font-size: var(--fs-small); }

.work__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 22px);
  letter-spacing: -0.02em;
}

@media (max-width: 720px) { .work__list { columns: 1; } }


/* --- THE RATIONAL CASE ---------------------------------------------------- */

.dcase__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.dcase__head .index { margin-bottom: 8px; }

.dcase__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(30px, 4vw, 80px);
}
.dcase__row { padding-block: clamp(24px, 2.8vw, 40px); border-top: 1px solid var(--rule); }
.dcase__row h3 { margin-bottom: 12px; font-size: clamp(18px, 1.5vw, 24px); }
.dcase__row p { font-size: var(--fs-small); }

@media (max-width: 960px) { .dcase__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dcase__list { grid-template-columns: 1fr; } }


/* --- CLOSING -------------------------------------------------------------- */

.dclose__inner {
  padding-block: var(--sp-band);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.dclose__lines { max-width: min(20ch, 100%); }
.dclose__second { margin-top: clamp(26px, 3vw, 44px); color: var(--dim); }

/* the mark, letterspaced — the engineered product speaks sans */
.dclose__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 9vw, 150px);
  letter-spacing: 0.06em;
  line-height: 1;
  margin: clamp(56px, 8vw, 120px) 0 22px;
  max-width: none;
}

.dclose__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(40px, 5vw, 66px);
}


/* ==========================================================================
   PERSONALITY — STRENGTH AND PERFORMANCE
   Nothing is introduced sideways. The label sits above and the statement
   lands at full width and full weight, with the leading pulled tight.
   ========================================================================== */

[data-page="hdcmr"] .sec-head {
  display: block;
  margin-bottom: clamp(56px, 7vw, 110px);
}
[data-page="hdcmr"] .sec-head > .col-3,
[data-page="hdcmr"] .sec-head > .col-8 { grid-column: auto; }
[data-page="hdcmr"] .sec-head > .col-3 {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
[data-page="hdcmr"] .sec-head .index { margin-bottom: 0; }
[data-page="hdcmr"] .sec-head h2 {
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 0.94;
  letter-spacing: -0.038em;
  max-width: min(15ch, 100%);
}

/* strength and performance — density, seen in section */
[data-page="hdcmr"] .plate { background-image: url("../assets/fields/section.svg"); }
[data-page="hdcmr"] .layer { background-image: url("../assets/fields/strata.svg"); background-size: cover; }

/* objects on this page are made of its own material */
.object { --object-field: url("../assets/fields/section.svg"); }

/* the layer names are set outside the stack; reserve their gutter */
.exploded { padding-right: clamp(0px, 12vw, 150px); }
@media (max-width: 960px) { .exploded { padding-right: 0; } }

/* below the stacking breakpoint the stack is full width, so the names move
   inside it rather than hanging off the edge */
@media (max-width: 960px) {
  .layer i { left: auto; right: 10px; }
}


/* ==========================================================================
   THE BOARD ITSELF
   HDcMR had no photography until the client supplied a macro of the face.
   It runs full bleed behind the type: the page should show the material
   before it describes it.
   ========================================================================== */

.dhero { position: relative; overflow: hidden; }
.dhero__field { position: absolute; inset: 0; }
.dhero__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}
/* only enough wash to carry the type — the board keeps its own colour */
.dhero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(22,24,20,0.94) 0%, rgba(22,24,20,0.80) 34%,
    rgba(22,24,20,0.62) 58%, rgba(22,24,20,0.46) 100%);
}
.dhero__inner { position: relative; z-index: 2; }

/* the macro, where the page talks about density */
.dgrain { margin: clamp(48px, 6vw, 88px) 0 0; }
.dgrain img {
  display: block; width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.dgrain figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) { .dhero__face { transform: scale(1.02) !important; } }


/* --- the board at close range ---------------------------------------------
   A deliberate editorial pairing: the macro at full width, a short technical
   statement beside it, and a great deal of air. It sits on the light band so
   the green-grey of the material is read as its own colour, not through a wash.
   ========================================================================== */

.dmacro {
  margin: 0;
  padding: 0 var(--gutter) var(--sp-band);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 90px);
  align-items: end;
}
.dmacro img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.dmacro__note { padding-bottom: clamp(6px, 2vw, 28px); }
.dmacro__note .label { color: var(--label-ink); }
.dmacro__note p {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.9vw, 29px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 24ch;
}

@media (max-width: 860px) {
  .dmacro { grid-template-columns: 1fr; gap: 26px; }
  .dmacro img { aspect-ratio: 3 / 2; }
  .dmacro__note p { max-width: 100%; }
}


/* --- hero composition ------------------------------------------------------
   S-OSB puts its type bottom-left with a specification row along the foot.
   HDcMR must not repeat that. Here the type is centred and narrow, the board
   reads clear above and below it, and the density figure carries the page —
   density is what this product is, so it is set as the largest thing on screen.
   ========================================================================== */

.dhero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--nav-h) + clamp(70px, 15vh, 170px));
  padding-bottom: clamp(60px, 11vh, 130px);
}
.dhero__headline { max-width: min(13ch, 100%); margin-inline: auto; }
.dhero__ctas { justify-content: center; margin-top: clamp(26px, 3.4vw, 42px); }

/* the one figure this product is judged on, set as the largest thing here */
.dhero__density {
  margin-top: clamp(34px, 6vh, 74px);
  padding-top: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dhero__density b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.dhero__density span {
  margin-top: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-ink);
}


/* --- hero hierarchy --------------------------------------------------------
   The product name, one claim, and then the board. A paragraph of body copy
   over a detailed photograph asks the reader to do two things at once; the
   copy now lives on the light band below, where it can actually be read.
   ========================================================================== */

.dhero__headline {
  font-size: clamp(58px, 12vw, 190px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  max-width: 100%;
  margin-top: clamp(18px, 3vh, 40px);
}
.dhero__claim {
  margin: clamp(20px, 3vh, 40px) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 40px);
  letter-spacing: -0.026em;
  color: var(--ink);
}
.dhero__expand {
  margin: clamp(14px, 2vh, 22px) 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-ink);
}
.dhero__ctas { margin-top: clamp(30px, 5vh, 56px); }

/* the hero already carries the board; a grey placeholder plate under it was
   competing with the real material */
[data-page="hdcmr"] .dhero .plate { display: none; }


/* ==========================================================================
   DENSIFICATION
   Loose particles, oriented, formed into a mat and pressed into a board —
   real geometry in a real camera, so the reduction in thickness is visible on
   the top, the front edge and the side at once. A flat particle field cannot
   show density, because density is a thing that happens in three dimensions.
   ========================================================================== */

.compress__viewport { position: absolute; inset: 0; }
.compress__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.compress__static { display: none; }
.compress.is-static .compress__canvas { display: none; }
.compress.is-static .compress__static {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(80px, 16vh, 180px) var(--gutter);
}
.compress.is-static .compress__static img {
  width: min(460px, 76vw); height: auto; max-height: 40vh; object-fit: cover;
}
.compress.is-static .compress__static figcaption { margin-top: 22px; max-width: 46ch; text-align: center; }
.compress.is-static .gauge { display: none; }

/* the mat's thickness, marked but never numbered */
.gauge {
  position: absolute;
  left: 8%;
  top: 46%;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.gauge__rule {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 100%;
  background: rgba(244, 244, 243, 0.62);
}
.gauge__tick {
  position: absolute; left: -5px;
  width: 11px; height: 1px;
  background: rgba(244, 244, 243, 0.78);
}
.gauge__tick--top { top: 0; }
.gauge__tick--bot { bottom: 0; }
.gauge__label {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--label-ink); white-space: nowrap;
}

/* the stage index */
.densteps {
  list-style: none; margin: clamp(20px, 3vh, 34px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 2.2vw, 34px);
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 244, 243, 0.30);
}
.densteps li { transition: color 260ms var(--ease); }
.densteps li.is-on { color: var(--ink); }
.densteps b { margin-right: 8px; opacity: 0.6; }

.compress__type { position: relative; z-index: 3; }

@media (max-width: 760px) {
  .gauge { left: 5%; }
  .densteps { gap: 0 12px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .gauge { opacity: 1; }
  .densteps li { color: var(--ink); }
}


/* ==========================================================================
   THE PRESS, LIFTED
   The machine was near-black steel on a near-black ground and read as a
   silhouette. This adds a very soft studio falloff behind it — lighter at the
   centre, darker at the edges — so the platen, rams, guides and bed have
   something to be seen against. The page palette is unchanged: this is a
   lightening of the ground, not a new colour.
   ========================================================================== */

.compress { position: relative; }
.compress__viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(78% 62% at 52% 44%,
      rgba(148, 155, 143, 0.20) 0%,
      rgba(120, 128, 116, 0.10) 38%,
      rgba(0, 0, 0, 0) 72%);
}
.compress__canvas { z-index: 1; }

/* the gauge reads as a technical annotation, not a UI widget */
.gauge__rule { width: 1px; background: rgba(226, 232, 222, 0.46); }
.gauge__tick {
  left: -6px; width: 13px; height: 1px;
  background: rgba(226, 232, 222, 0.72);
}
.gauge__tick--top::after,
.gauge__tick--bot::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 1px;
  background: rgba(226, 232, 222, 0.9);
}
.gauge__label {
  left: 17px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(214, 221, 210, 0.82);
}


/* ==========================================================================
   THE PRESS ON A PHONE
   The canvas was the full height of the pin, so a wide flat machine sat in a
   tall frame with two thirds of it empty floor. The stage is now cut down to
   roughly the shape of its subject and the caption moves below it, so the
   press fills the frame it is given instead of floating in it.
   ========================================================================== */

@media (max-width: 900px) {
  .compress__pin {
    min-height: 100svh;
    align-items: flex-start;
    padding-top: 66svh;
  }
  .compress__viewport { inset: 7svh 0 auto 0; height: 56svh; }
}

@media (max-width: 560px) {
  .compress__pin { padding-top: 54svh; }
  .compress__viewport { inset: 8svh 0 auto 0; height: 42svh; }
}


/* ==========================================================================
   HDcMR HERO — the board, not a backdrop
   The hero put the wordmark over a dimmed field: the material was wallpaper
   and the type was the subject. For a board whose whole argument is density,
   that is backwards. The real face now holds the right of the frame at full
   strength, running off the edge so it reads as a surface rather than a
   picture, and the type sits to the left as an engineering annotation.
   ========================================================================== */

.dhero { position: relative; overflow: hidden; }

.dhero__field {
  position: absolute;
  inset: 0 0 0 auto;
  width: 56%;
  z-index: 0;
}
.dhero__face {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* the wash only softens the inner edge, so type never sits on busy grain */
.dhero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--bg) 0%, rgba(50,52,46,0.55) 14%, rgba(50,52,46,0) 46%);
}

.dhero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(30px, 6vh, 76px));
  padding-bottom: clamp(34px, 6vh, 84px);
  min-height: clamp(460px, 78svh, 760px);
}
.dhero__inner > * { grid-column: 1; max-width: min(34ch, 100%); }

.dhero__headline { margin-top: clamp(12px, 1.6vh, 22px); letter-spacing: -0.03em; }
.dhero__claim    { margin-top: clamp(8px, 1.2vh, 16px); }
.dhero__expand {
  margin-top: clamp(16px, 2.2vh, 28px);
  font-size: var(--fs-small);
  max-width: min(30ch, 100%);
}
.dhero__ctas { margin-top: clamp(22px, 3vh, 38px); }

/* the board names its own thickness range down the edge of the material */
.dhero__field::after {
  content: "HIGH DENSITY · MOISTURE RESISTANT";
  position: absolute;
  right: clamp(14px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-weight: 700; font-size: 10px; letter-spacing: 0.22em;
  color: rgba(244,244,243,0.5);
  pointer-events: none;
}

@media (max-width: 860px) {
  .dhero__field {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(200px, 34svh, 300px);
    order: -1;
  }
  .dhero__wash {
    background: linear-gradient(180deg, rgba(50,52,46,0) 55%, var(--bg) 100%);
  }
  .dhero__field::after { right: 10px; font-size: 9px; }
  .dhero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: clamp(18px, 3vh, 34px);
  }
  .dhero__inner > * { max-width: 100%; }
}

/* The wordmark carried a page-level override up to 190px — the poster
   typography the global scale was reduced to remove. It uses the locked
   display token now; at this size, against the board holding more than half
   the frame, the material leads and the name annotates it. */
.dhero__headline {
  font-size: var(--fs-display);
  line-height: 0.94;
  letter-spacing: -0.035em;
}

/* the hero column reads left, as an engineering annotation beside the board —
   the centred stack was the poster arrangement this pass exists to replace */
.dhero__inner,
.dhero__inner .label,
.dhero__headline,
.dhero__claim,
.dhero__expand { text-align: left; }
.dhero__headline { margin-inline: 0; }
.dhero__ctas { justify-content: flex-start; }


/* ==========================================================================
   HERO REFINEMENTS
   The composition (56% material, bled right, type left) is unchanged. These
   correct four measured faults in it.
   ========================================================================== */

/* 1. The face rests at a slight zoom and the scroll tween carries it to 1.14.
      The field never clipped it, so the image spilled ~33px past its own left
      edge and painted over the band OUTSIDE the wash — a bright vertical seam.
      The face is never below scale 1, so clipping can expose no bare edge. */
.dhero__field { overflow: hidden; }

/* 2. The eyebrow and the button pair were both held to the 34ch body measure,
      which broke "· Engineered Boards" onto its own line and split the two
      calls to action onto two rows. They are not body copy. */
.dhero__inner > .label,
.dhero__ctas { max-width: none; }

/* 3. The nav sits on the pale face: the wordmark measured 3.54:1 and the links
      3.89:1 against white, both under AA. The existing wash gains a short top
      pass so the nav strip clears it; the material below is untouched. */
.dhero__wash {
  background:
    linear-gradient(180deg, rgba(50, 52, 46, 0.46) 0, rgba(50, 52, 46, 0) 170px),
    linear-gradient(90deg,
      var(--bg) 0%, rgba(50, 52, 46, 0.55) 14%, rgba(50, 52, 46, 0) 46%);
}

@media (max-width: 860px) {
  .dhero__wash {
    background:
      linear-gradient(180deg, rgba(50, 52, 46, 0.50) 0, rgba(50, 52, 46, 0) 140px),
      linear-gradient(180deg, rgba(50, 52, 46, 0) 55%, var(--bg) 100%);
  }
}