/* =============================================================================
   GROUNDED. Styles.
   -----------------------------------------------------------------------------
   Colour, type and spacing all come from the named values in :root below.
   Change one there and it flows through the whole page.

   After that, the file runs in the same order as the page:
     1. Page basics
     2. Part one, the opening
     3. Part two, the Grounded in sequence
     4. Audience blocks
     5. Who we are
     6. Sign up
   ========================================================================== */

/* Layout: one sticky full-screen cross-section of ground. Scroll drives seeds to roots to plants and heat to cooling.
   Copy sits along the bottom over the soil. Single committed look: soil dark, sky is the colour that changes. */
:root {
  --soil-0: #120d09;
  --soil-1: #2a1c12;
  --bone: #f4eddf;
  --root: #e0eec4;
  --leaf: #7aa85a;
  --ink: #2a1c12;
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --gutter: max(16px, 5vw);
  color-scheme: dark;
}
html { background: #091417; }
body {
  margin: 0;
  background: #091417;
  color: var(--bone);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.45;
}
/* The opening carries the Earth sequence now, so it needs more scroll than it
   did when it was a single photograph fading out. */
#track { position: relative; height: 460vh; }
#stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--soil-0);
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#shadeT { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(18,13,9,0.28) 0%, rgba(18,13,9,0) 42%); }
#shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(18,13,9,0.95) 0%, rgba(18,13,9,0.78) 24%, rgba(18,13,9,0) 56%);
}
.wordmark {
  position: absolute; top: 20px; left: var(--gutter); margin: 0; z-index: 2;
  font-size: 19px; font-weight: 800; letter-spacing: 0.02em; color: var(--bone);
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.foot-mark { position: static; font-size: 18px; opacity: 0.9; text-shadow: none; }
.wordmark .logo { display: block; height: 30px; width: auto; filter: drop-shadow(0 1px 8px rgba(0,0,0,0.45)); }
.foot-mark .logo { height: 28px; filter: none; }
@media (max-width: 699px) { .wordmark .logo { height: 24px; } }

#stage .cap {
  /* The words sit low, where the footage is darkest and the type holds its
     contrast. Lifted about 5% of the screen height off the floor so they are
     not sitting right on the edge. */
  position: absolute; left: 0; right: 0; bottom: 0;
  box-sizing: border-box;
  padding: 0 var(--gutter) clamp(68px, 12vh, 134px);
  opacity: 0;
  pointer-events: none;
}
/* The type always wins. The caption had no stacking order of its own while
   the root carries z-index 2, so on a phone, where the big word reaches
   across most of the width, strands were drawn straight over the letters. */
#stage .cap { z-index: 3; }
.cap.on { opacity: 1; }
.cap { text-shadow: 0 1px 22px rgba(18,13,9,0.35); }
.cap.low { top: auto; bottom: 0; padding-bottom: clamp(68px, 12vh, 134px); }
.cap h1, .cap h2 {
  margin: 0 0 14px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 14ch;
}
.cap h1 { font-size: clamp(60px, 12.5vw, 188px); max-width: 9ch; }
.cap h2 { font-size: clamp(44px, 8.2vw, 124px); }
.cap h2.wide { max-width: 16ch; }
.cap p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(18px, 1.7vw, 24px);
  color: var(--bone);
  opacity: 0.97;
  text-shadow: 0 1px 14px rgba(18,13,9,0.45);
  text-wrap: pretty;
}
.cue {
  position: absolute; right: var(--gutter); bottom: clamp(28px, 7vh, 72px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--bone); opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.4s;
}
#prog { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--root); transform-origin: left; transform: scaleX(0); opacity: 0.85; z-index: 3; }
.cue i {
  display: block; width: 1px; height: 52px; background: var(--root);
  transform-origin: top; animation: drop 2.4s ease-in-out infinite;
}
@keyframes drop { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cue i { animation: none; } }
@media (max-width: 700px) {
  .cap h1 { max-width: 8ch; }
  .cue { top: 74px; bottom: auto; right: var(--gutter); flex-direction: row; gap: 8px; }
  .cue i { height: 1px; width: 22px; transform-origin: left; }
}

/* Part two: pinned photographic sequence. Words change as you scroll, plates crossfade behind them. */
#seqTrack { position: relative; height: 420vh; }
#seqStage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--soil-0);
}
.plate {
  position: absolute; inset: 0; opacity: 0;
  filter: saturate(0.68) contrast(1.08) brightness(0.86);
  background-size: cover; background-position: center;
  will-change: opacity, transform;
}
.plate::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--tint, transparent); mix-blend-mode: soft-light; opacity: 0.65;
}
.plate::after {
  content: ''; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}
#seqShade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(18,13,9,0.88) 0%, rgba(18,13,9,0.5) 30%, rgba(18,13,9,0.12) 60%, rgba(18,13,9,0.28) 100%);
}
#seqHint {
  position: absolute; left: var(--gutter); top: 66px; margin: 0;
  max-width: 32ch; text-align: left; font-size: 14px; line-height: 1.35; color: var(--bone); opacity: 0.85;
}
.seqtext {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  padding: 0 var(--gutter) clamp(28px, 7vh, 72px);
}
.seqtext .lead {
  margin: 0 0 2px;
  font-size: clamp(26px, 4.4vw, 58px); font-weight: 500;
  line-height: 1.05; letter-spacing: -0.025em; opacity: 0.92;
}
.words { display: grid; }
.words .w {
  grid-area: 1 / 1; align-self: end; margin: 0; opacity: 0;
  font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance;
  font-size: clamp(52px, 12vw, 176px); max-width: 12ch;
}
.words .w.long { font-size: clamp(40px, 8.6vw, 130px); max-width: 11ch; }
.words .w.big { font-size: clamp(60px, 12.5vw, 188px); max-width: 9ch; }
.sub { margin: 14px 0 0; font-size: clamp(18px, 1.7vw, 24px); opacity: 0; }

/* Soil measurement diagram, drawn over any plate that asks for one in content.js.
   Deliberately plain: depth marks in centimetres and contour lines, no values.
   It shows where a reading is taken, it never states a result. */
#probes { position: absolute; inset: 0; pointer-events: none; }
.probe {
  position: absolute; right: var(--gutter); top: clamp(76px, 11vh, 132px);
  width: clamp(190px, 24vw, 320px); opacity: 0; color: var(--bone);
}
.probe svg { width: 100%; height: auto; display: block; }
.probe text {
  stroke: none; fill: currentColor;
  font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
}
.probe .pu { font-size: 9px; opacity: 0.72; }
@media (max-width: 760px) { .probe { display: none; } }

.ticks {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 30px;
  transition: gap 0.8s ease;
}
.tg { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: gap 0.8s ease; }
.tk { height: 2px; width: 14px; background: rgba(244,237,223,0.4); transition: width 0.3s, background 0.3s; }
.tk.on { width: 38px; background: var(--bone); }
/* at the end the three groups draw together into one */
.ticks.joined { gap: 10px; }
.ticks.joined .tg { gap: 10px; }
.ticks.joined .tk { width: 38px; background: var(--bone); }
.pillar {
  margin: 20px 0 0;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(19px, 2vw, 26px); letter-spacing: 0.005em;
  opacity: 0.78; min-height: 1.3em;
}
#seqSub {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight: 400;
}
#seqStage .wordmark { display: none; }  /* the name appears once at the top, not again here */
.sub { max-width: 40ch; }
.subs { display: grid; margin-top: 14px; }
.subs .s { grid-area: 1 / 1; margin: 0; opacity: 0; font-size: clamp(18px, 1.9vw, 26px); max-width: 34ch; text-wrap: pretty; }

/* Call to action */
#cta {
  position: relative; background: linear-gradient(to bottom, #0f2127 0%, #091417 100%);
  padding: clamp(72px, 14vh, 160px) var(--gutter) clamp(40px, 8vh, 80px);
  display: flex; flex-direction: column; gap: clamp(48px, 10vh, 120px);
}
#cta h2 { margin: 0 0 16px; font-weight: 800; font-size: clamp(44px, 8vw, 120px); line-height: 0.94; letter-spacing: -0.035em; max-width: 12ch; text-wrap: balance; }
#cta p.lede { margin: 0 0 32px; max-width: 36ch; font-size: clamp(18px, 1.7vw, 24px); opacity: 0.9; }
#cta form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 560px; }
#cta label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#cta input[type=email] {
  flex: 1 1 260px; min-width: 0; font: inherit; font-size: 18px; color: var(--bone);
  background: rgba(244,237,223,0.08); border: 1px solid rgba(244,237,223,0.35); border-radius: 2px; padding: 16px 18px;
}
#cta input[type=email]::placeholder { color: rgba(244,237,223,0.55); }
#cta button {
  font: inherit; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; cursor: pointer;
  background: var(--bone); color: var(--ink); border: 0; border-radius: 2px; padding: 16px 28px;
}
#cta button:hover { background: #fff; }
#cta input:focus-visible, #cta button:focus-visible { outline: 3px solid var(--root); outline-offset: 3px; }
#ctaNote { margin: 14px 0 0; font-size: 14px; opacity: 0.7; min-height: 1.4em; max-width: 56ch; }
#cta .foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; opacity: 0.7; }
#cta .foot img { height: 28px; width: auto; display: block; }
#cta .foot .by { display: flex; align-items: center; gap: 12px; }
#cta .foot .by img { height: 34px; opacity: 0.9; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) {
  .words .w, .words .w.big { max-width: 9ch; }
  .words .w.long { max-width: 8ch; }
  #seqHint { top: 62px; max-width: 26ch; }
    #stage }

/* Audience section: the plain-language counterpart to the sequence */
#aud {
  position: relative; background: linear-gradient(to bottom, #152524 0%, #11201f 100%);
  padding: clamp(80px, 15vh, 170px) var(--gutter) clamp(60px, 10vh, 120px);
  border-top: 0;
}
/* The divider used to be a hard rule straight across, which cut the page in
   two. It now fades out towards the right, where the root grows over it. */
#aud::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right,
    rgba(244,237,223,0.13) 0%,
    rgba(244,237,223,0.10) 52%,
    rgba(244,237,223,0) 88%);
}
#aud .hd { margin: 0 0 clamp(40px, 7vh, 76px); }
#aud h2 {
  margin: 0 0 14px; font-weight: 800; font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1.04; letter-spacing: -0.032em; max-width: 18ch; text-wrap: balance;
}
/* The line that says what Grounded does. Larger and brighter than body text
   so it reads as the section's statement, not small print. */
#aud .hd p { margin: 18px 0 0; max-width: 34ch; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.32; opacity: 0.94; text-wrap: pretty; }
.aud-grid { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aud { padding: clamp(28px, 4vh, 44px) 0; border-top: 1px solid rgba(244,237,223,0.14); }
.aud:nth-child(odd) { padding-right: clamp(24px, 5vw, 80px); }
.aud:nth-child(even) { padding-left: clamp(24px, 5vw, 80px); border-left: 1px solid rgba(244,237,223,0.14); }
.aud h3 {
  margin: 0 0 12px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
  font-size: clamp(28px, 3.6vw, 52px);
}
.aud .line { margin: 0; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; opacity: 0.86; max-width: 30ch; text-wrap: pretty; }
.aud .act {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: clamp(17px, 1.7vw, 22px); color: var(--root);
  text-decoration: none; border-bottom: 1px solid rgba(224,238,196,0.38); padding-bottom: 4px;
}
.aud .act span { font-family: var(--font); font-style: normal; transition: transform 0.25s; }
.aud .act:hover span { transform: translateX(5px); }
.aud .line.ph { font-style: italic; opacity: 0.6; }
#aud .note { margin: clamp(36px, 6vh, 64px) 0 0; font-size: 13px; opacity: 0.5; max-width: 54ch; }
@media (max-width: 760px) {
  .aud-grid { grid-template-columns: 1fr; }
  .aud:nth-child(odd), .aud:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
  /* One column on phones: keep the desktop pairs together, so the order
     reads funders and investors, policymakers, business, implementers. */
  .aud:nth-child(2) { order: 3; }
  .aud:nth-child(3) { order: 2; }
  .aud:nth-child(4) { order: 4; }
}

/* Provenance and outbound hand-off: quiet band between the audience blocks and the sign-up */
#prov {
  background: linear-gradient(to bottom, #11201f 0%, #0f2127 100%);
  padding: clamp(40px, 7vh, 72px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px);
  border-top: 1px solid rgba(244,237,223,0.12);
}
#prov p { margin: 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; opacity: 0.74; max-width: 42ch; }
#prov a {
  color: var(--root); text-decoration: none;
  border-bottom: 1px solid rgba(224,238,196,0.4); padding-bottom: 2px;
}
#prov a:hover { border-bottom-color: var(--root); }
@media (max-width: 760px) { #prov { grid-template-columns: 1fr; gap: 18px; } }

/* =============================================================================
   TRIALS. Both are off unless switched on in the address bar.
     ?labels=on   the solution name and fact under each beat
     ?root=on     a root growing down the right instead of plain ticks
   If one of these stays, fold it into the sections above and delete this block.
   ========================================================================== */

/* The solution label, in the slot the pillar labels used to occupy. */
.subs .solab {
  grid-area: 1 / 1; margin: 0; opacity: 0;
  align-self: end; max-width: 34ch;
  padding-top: clamp(96px, 11vh, 150px);
  display: flex; flex-direction: column; gap: 4px;
  will-change: opacity, transform;
}
.solab .solname {
  font-size: 12px; font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; opacity: 0.72;
}
.solab .solfact {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.35; opacity: 0.82; text-wrap: pretty;
}
@media (max-width: 700px) {
  .subs .solab { padding-top: 78px; }
  .solab .solfact { font-size: 15px; }
}

/* The root. Thin, low contrast, suggested rather than drawn. */
/* A little wider than it was. At 165px the strands piled against the walls
   within a few hundred pixels and the ones that reached the bottom all left
   from the same two or three places, so the section below had almost nothing
   distinct to carry on from. */
.rootline {
  position: absolute; top: 0; right: 0; height: 100%;
  width: clamp(140px, 14vw, 240px);
  pointer-events: none; z-index: 2;
  overflow: visible;
}
/* Branches are stroked, not filled. Round caps and joins give the soft ends
   in the reference photographs, and a stroke can be grown from its tip. */
.rootline path {
  fill: none;
  stroke: var(--bone);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Each generation sits back a little further, the way finer roots catch less
   light than the ones they came off. */
.rootline .rb.g0 { opacity: 0.62; }
.rootline .rb.g1 { opacity: 0.52; }
.rootline .rb.g2 { opacity: 0.42; }
.rootline .rb.g3 { opacity: 0.34; }
.rootline .rb.g4 { opacity: 0.28; }
/* A tight dark edge plus a soft one. The soft shadow alone was not enough
   to keep the pale strands visible over the bright grass photograph. */
.rootline .rgrow { filter: drop-shadow(0 0 1px rgba(0,0,0,0.75)) drop-shadow(0 0 4px rgba(0,0,0,0.45)); }

/* Desktop only. See ROOT_MIN_W in scene.js, which stops it being generated
   at all below the same width. */
@media (max-width: 699px) { .rootline { display: none; } }

/* The continuation below part two. It sits in normal page flow rather than in
   the pinned stage, which is why it is a separate strand. */
.roottail {
  position: absolute; right: 0; left: 0;
  width: auto;
  pointer-events: none; z-index: 5;
}
.roottail .rootline { height: 100%; }
/* Hyphae: far finer than the root above, and many more of them. The width
   ratio between the two is what makes the change of scale read. */
.roottail .mb { stroke: var(--bone); }
.roottail .mb.g0 { opacity: 0.60; }
.roottail .mb.g1 { opacity: 0.52; }
.roottail .mb.g2 { opacity: 0.45; }
.roottail .mb.g3 { opacity: 0.38; }
.roottail .mb.g4 { opacity: 0.32; }
.roottail .mgrow { filter: drop-shadow(0 0 3px rgba(0,0,0,0.45)); }
@media (max-width: 700px) { .roottail { display: none; } }




/* The mycelium across the audience blocks. Fine, near uniform strands, sitting
   behind the words rather than over them. */
.myc {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  /* Clipped to its own section. It was spilling over the image above. */
  overflow: hidden;
  /* The far ends dissolve instead of stopping. Strands that reached the left
     of the page ended in short cut-off pieces. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
          mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
#aud .hd, #aud .aud-grid, #aud .note { position: relative; z-index: 1; }
.myc path {
  fill: none; stroke: var(--bone);
  stroke-linecap: round; stroke-linejoin: round;
}
/* Solid tints rather than transparency. Each strand is a chain of short
   segments with round caps, and with transparency every overlap where two
   caps meet painted twice, so the strands read as beaded or dotted. These
   are the same tones, mixed against the section's background. */
.myc .mb.g0 { stroke: #9ea097; }
.myc .mb.g1 { stroke: #848880; }
.myc .mb.g2 { stroke: #6b716b; }
.myc .mb.g3 { stroke: #545d58; }
.myc .mb.g4 { stroke: #404b47; }
@media (max-width: 699px) { .myc { display: none; } }

/* Sign-up shortcut, top right, stays put as you scroll. Hidden once the
   sign-up section itself is on screen, so there are never two buttons. */
.topcta {
  position: fixed; top: 18px; right: var(--gutter); z-index: 20;
  font-family: var(--font); font-weight: 800; font-size: 14px; letter-spacing: -0.01em;
  background: var(--bone); color: var(--ink); text-decoration: none;
  border-radius: 2px; padding: 10px 16px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.25);
  transition: opacity 0.3s, background 0.2s;
}
.topcta:hover { background: #fff; }
.topcta:focus-visible { outline: 3px solid var(--root); outline-offset: 3px; }
.topcta.off { opacity: 0; pointer-events: none; }
@media (max-width: 699px) { .topcta { top: 16px; font-size: 13px; padding: 8px 13px; } }

/* Roots from the marsh (trial, ?myc=on). Sits behind the audience text. */
.marsh-roots {
  position: absolute; left: 0; top: 0; width: 100%;
  pointer-events: none; z-index: 0;
  /* Dissolves at the bottom instead of stopping at a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
/* With the roots in, the grid lines go: the roots carry the structure, and a
   short root-coloured mark above each heading keeps the rhythm. */
#aud.has-roots .aud { border-top-color: transparent; }
#aud.has-roots .aud:nth-child(even) { border-left-color: transparent; }
#aud.has-roots .aud h3::before {
  content: ''; display: block; width: 36px; height: 2px; margin-bottom: 18px;
  background: var(--root); opacity: 0.55;
}
/* With the roots behind it, the audience text gets a soft halo in the
   section's own colour so the words stay clear of the lines. */
#aud.has-roots h2, #aud.has-roots h3, #aud.has-roots p {
  text-shadow: 0 0 4px #13221f, 0 0 10px #13221f, 0 0 18px #13221f, 0 0 30px rgba(19,34,31,0.9);
}
/* No divider line where the photo meets this section: the roots run
   straight across that edge, and the line read as a seam. */
#aud.has-roots::before { display: none; }
/* A clean edge where the salt marsh meets this section, so the creeks run
   straight into the roots. The section sits 2px up over the photo to cover
   a hairline some phones draw at the bottom of the pinned photo. */
#aud { margin-top: -2px; }
/* The bottom wash on the last photo: full strength behind the words on the
   left, much lighter on the right where the creeks reach the edge. */
.seqshade-end {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(18,13,9,0.88) 0%, rgba(18,13,9,0.5) 30%, rgba(18,13,9,0.12) 60%, rgba(18,13,9,0.28) 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 38%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.28) 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 38%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.28) 100%);
}
@media (max-width: 699px) {
  /* Phones: the words fill the width, so keep more of the wash. */
  .seqshade-end {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 45%, rgba(0,0,0,0.5) 70%);
            mask-image: linear-gradient(to right, #000 0%, #000 45%, rgba(0,0,0,0.5) 70%);
  }
}