:root{
  --black:#080909;
  --black-soft:#0e0f0f;
  --graphite:#2e2e2e;
  --silver:#8e8e8e;
  --stone:#d9d2c9;
  --ivory:#f6f5f3;
  --warm:#c8b69e;
  --line:rgba(246,245,243,.13);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
}

::selection{
  background:var(--stone);
  color:#111;
}


/* HEADER */

.site-header{
  position:absolute;
  z-index:100;
  top:0;
  left:0;
  width:100%;
  height:92px;

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;

  padding:0 clamp(28px,4.3vw,76px);

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

.brand{
  justify-self:start;
}

.brand-logo{
  display:block;
  width:164px;
  height:auto;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
}

.main-nav a{
  position:relative;
  font-size:11px;
  color:rgba(255,255,255,.54);
  transition:color .25s ease;
}

.main-nav a:hover,
.main-nav a.active{
  color:#fff;
}

.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:1px;
  background:var(--stone);
}

.rooted-entry{
  justify-self:end;

  padding:12px 17px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;

  font-size:10px;
  letter-spacing:.02em;

  color:rgba(255,255,255,.78);

  transition:
    border-color .25s ease,
    background .25s ease;
}

.rooted-entry:hover{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.04);
}


/* GLOBAL */

section{
  position:relative;
  overflow:hidden;
}

.section-index{
  margin:0 0 32px;

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

  letter-spacing:.34em;
  text-transform:uppercase;

  color:rgba(217,210,201,.52);
}

h1,h2,h3,p{
  margin-top:0;
}

h1,h2,h3{
  font-weight:400;
  letter-spacing:-.055em;
}

h2 span,
h1 span{
  color:var(--stone);
}

.text-link,
.product-link,
.closing-link{
  display:inline-flex;
  align-items:center;
  gap:16px;

  margin-top:30px;

  padding-bottom:8px;

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

  font-size:11px;
  letter-spacing:.03em;
}


/* 01 HERO */

.products-hero{
  min-height:100vh;

  display:flex;
  align-items:center;

  padding:
    150px
    clamp(28px,7vw,130px)
    90px;

  background:
    radial-gradient(circle at 78% 44%,rgba(183,163,136,.09),transparent 24%),
    radial-gradient(circle at 74% 50%,rgba(255,255,255,.035),transparent 36%),
    #080909;
}

.hero-atmosphere{
  position:absolute;
  inset:0;

  background:
    linear-gradient(90deg,rgba(8,9,9,1) 0%,rgba(8,9,9,.9) 43%,rgba(8,9,9,.2) 100%);
  pointer-events:none;
}

.hero-copy{
  position:relative;
  z-index:4;
  width:min(720px,55vw);
}

.products-hero h1{
  margin:0;

  font-size:clamp(68px,7vw,116px);
  line-height:.88;

  letter-spacing:-.067em;
}

.hero-lead{
  margin:42px 0 0;

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

  color:rgba(255,255,255,.84);
}

.hero-description{
  max-width:590px;

  margin:22px 0 0;

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

  color:rgba(255,255,255,.5);
}

.hero-system{
  position:absolute;

  width:min(43vw,680px);
  aspect-ratio:1;

  right:3vw;
  top:52%;

  transform:translateY(-50%);

  display:grid;
  place-items:center;
}

.hero-system img{
  position:relative;
  z-index:3;

  width:44%;

  opacity:.78;

  filter:
    saturate(.65)
    brightness(.88)
    drop-shadow(0 0 45px rgba(208,187,158,.12));
}

.system-ring{
  position:absolute;

  border:1px solid rgba(217,210,201,.12);
  border-radius:50%;
}

.ring-a{
  width:50%;
  height:50%;
}

.ring-b{
  width:72%;
  height:72%;
}

.ring-c{
  width:94%;
  height:94%;
}

.section-number{
  position:absolute;
  right:4vw;
  bottom:36px;

  font-size:9px;
  letter-spacing:.25em;

  color:rgba(255,255,255,.25);
}


/* 02 FRAGMENTATION */

.fragmentation{
  min-height:100vh;

  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8vw;

  align-items:center;

  padding:130px clamp(28px,7vw,130px);

  background:var(--ivory);
  color:#151515;
}

.fragmentation .section-index{
  color:#77716a;
}

.fragmentation h2{
  margin:0;

  font-size:clamp(56px,5.4vw,90px);
  line-height:.93;
}

.fragmentation h2 span{
  color:#77716a;
}

.life-relations{
  border-top:1px solid rgba(0,0,0,.15);
}

.life-relations div{
  display:grid;
  grid-template-columns:150px 1fr;
  align-items:center;

  padding:19px 0;

  border-bottom:1px solid rgba(0,0,0,.12);
}

.life-relations span{
  font-size:9px;
  font-weight:600;
  letter-spacing:.25em;
}

.life-relations p{
  margin:0;
  font-size:21px;
  letter-spacing:-.03em;
  color:#69645e;
}

.life-relations .relation-emphasis p{
  color:#111;
}

.fragmentation-statement{
  grid-column:2;

  max-width:650px;

  margin:0;

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

  color:#77716a;
}

.fragmentation-statement strong{
  display:block;

  margin-top:18px;

  font-size:18px;
  line-height:1.55;

  font-weight:400;
  color:#191919;
}


/* 03 WHAT WE BUILD */

.what-we-build{
  min-height:92vh;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9vw;

  align-items:center;

  padding:130px clamp(28px,7vw,130px);

  background:#0d0e0e;
}

.build-copy{
  max-width:680px;
}

.build-copy h2{
  margin:0 0 40px;

  font-size:clamp(54px,5.1vw,84px);
  line-height:.94;
}

.build-copy p:not(.section-index){
  max-width:580px;

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

  color:rgba(255,255,255,.52);
}

.intelligence-sequence{
  display:flex;
  flex-direction:column;
}

.intelligence-sequence div{
  display:flex;
  align-items:center;
  gap:26px;

  min-height:70px;

  border-bottom:1px solid var(--line);
}

.intelligence-sequence span{
  width:34px;

  font-size:9px;
  color:rgba(255,255,255,.3);
}

.intelligence-sequence strong{
  font-size:13px;
  font-weight:500;
  letter-spacing:.2em;
}

.intelligence-sequence i{
  display:none;
}


/* 04 ROOTED LIFE */

.rooted-product{
  min-height:100vh;

  display:grid;
  grid-template-columns:1fr .8fr;
  gap:8vw;

  align-items:center;

  padding:130px clamp(28px,7vw,130px);

  background:
    radial-gradient(circle at 78% 50%,rgba(89,111,83,.14),transparent 30%),
    #101210;
}

.rooted-copy{
  max-width:700px;
}

.rooted-copy h2{
  margin:0;

  font-size:clamp(72px,7.4vw,122px);
  line-height:.9;

  color:#f3f0e9;
}

.product-category{
  margin:18px 0 48px;

  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;

  color:#9ca894;
}

.rooted-copy h3{
  margin:0 0 30px;

  font-size:clamp(40px,4vw,64px);
  line-height:.98;
}

.rooted-copy > p:not(.section-index):not(.product-category){
  max-width:580px;

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

  color:rgba(255,255,255,.5);
}

.rooted-copy .rooted-dimensions{
  margin:26px 0 !important;

  color:#d8d4ca !important;

  font-size:16px !important;
  letter-spacing:.02em;
}

.rooted-mark{
  position:relative;

  min-height:480px;

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

  border:1px solid rgba(174,191,164,.16);
  border-radius:50%;

  text-align:center;
}

.rooted-mark::before,
.rooted-mark::after{
  content:"";

  position:absolute;
  border-radius:50%;
  border:1px solid rgba(174,191,164,.08);
}

.rooted-mark::before{
  inset:9%;
}

.rooted-mark::after{
  inset:19%;
}

.rooted-mark span,
.rooted-mark strong,
.rooted-mark small{
  position:relative;
  z-index:2;
}

.rooted-mark span{
  margin-bottom:25px;

  font-size:9px;
  letter-spacing:.3em;

  color:#82917b;
}

.rooted-mark strong{
  font-size:50px;
  line-height:.82;

  font-weight:400;
  letter-spacing:-.06em;
}

.rooted-mark small{
  margin-top:27px;

  font-size:8px;
  letter-spacing:.18em;

  color:rgba(255,255,255,.36);
}


/* 05 LIFE SYSTEM */

.life-system{
  min-height:110vh;

  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:5vw;

  align-items:center;

  padding:130px clamp(28px,7vw,130px);

  background:#e8e3db;
  color:#151515;
}

.life-system .section-index{
  color:#77716a;
}

.system-heading h2{
  margin:0;

  font-size:clamp(54px,5.2vw,86px);
  line-height:.91;
}

.system-heading h2 span{
  color:#80786f;
}

.context-map{
  position:relative;

  min-height:660px;

  display:grid;
  place-items:center;
}

.context-center{
  position:relative;
  z-index:5;

  width:180px;
  height:180px;

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

  border-radius:50%;

  background:#151716;
  color:#f3f0e9;

  box-shadow:0 30px 80px rgba(0,0,0,.16);
}

.context-center span{
  font-size:9px;
  letter-spacing:.2em;
}

.context-center strong{
  font-size:38px;
  font-weight:400;
  letter-spacing:-.05em;
}

.context-center small{
  margin-top:7px;

  font-size:7px;
  letter-spacing:.2em;

  color:rgba(255,255,255,.45);
}

.context-map .orbit{
  position:absolute;

  border:1px solid rgba(0,0,0,.12);
  border-radius:50%;
}

.orbit-one{
  width:300px;
  height:300px;
}

.orbit-two{
  width:470px;
  height:470px;
}

.orbit-three{
  width:630px;
  height:630px;
}

.context-node{
  position:absolute;
  z-index:6;

  padding:9px 13px;

  background:#e8e3db;

  font-size:8px;
  font-weight:600;
  letter-spacing:.16em;

  white-space:nowrap;
}

.n1{top:12%;left:45%}
.n2{top:25%;right:5%}
.n3{top:48%;right:0}
.n4{bottom:17%;right:12%}
.n5{bottom:4%;left:39%}
.n6{bottom:20%;left:4%}
.n7{top:45%;left:0}
.n8{top:20%;left:15%}

.context-statement{
  grid-column:2;

  max-width:590px;

  margin:0 auto;

  text-align:center;

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

  color:#6d675f;
}


/* 06 ROOTY */

.rooty-layer{
  min-height:95vh;

  display:grid;
  grid-template-columns:1fr .75fr;
  gap:10vw;

  align-items:center;

  padding:130px clamp(28px,7vw,130px);

  background:#0b0c0c;
}

.rooty-copy h2{
  margin:0 0 38px;

  font-size:clamp(54px,5.2vw,86px);
  line-height:.92;
}

.rooty-copy p:not(.section-index){
  max-width:580px;

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

  color:rgba(255,255,255,.5);
}

.rooty-process{
  display:flex;
  flex-direction:column;
  align-items:center;

  padding:55px 30px;

  border:1px solid rgba(255,255,255,.1);
}

.rooty-process span,
.rooty-process strong{
  font-size:10px;
  letter-spacing:.22em;
}

.rooty-process strong{
  color:var(--stone);
}

.rooty-process i{
  margin:18px 0;

  font-style:normal;
  color:rgba(255,255,255,.25);
}


/* 07 HUMAN + INTELLIGENCE */

.human-intelligence{
  min-height:100vh;

  padding:130px clamp(28px,7vw,130px);

  background:#151515;
}

.hi-heading{
  max-width:760px;
}

.hi-heading h2{
  margin:0 0 30px;

  font-size:clamp(58px,5.7vw,94px);
  line-height:.92;
}

.hi-heading > p:not(.section-index){
  max-width:550px;

  color:rgba(255,255,255,.5);

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

.hi-equation{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:30px;

  align-items:center;

  margin-top:90px;
}

.hi-equation > div{
  min-height:250px;

  padding:30px;

  border-top:1px solid rgba(255,255,255,.18);
}

.hi-equation small{
  font-size:8px;
  letter-spacing:.25em;
  color:rgba(255,255,255,.38);
}

.hi-equation strong{
  display:block;

  margin-top:50px;

  font-size:34px;
  line-height:1.05;

  font-weight:400;
  letter-spacing:-.04em;
}

.hi-equation > b{
  font-size:22px;
  font-weight:300;
  color:rgba(255,255,255,.3);
}

.hi-equation .decision-result{
  border-color:rgba(217,210,201,.55);
}

.hi-equation .decision-result strong{
  color:var(--stone);
}

.hi-statement{
  max-width:760px;

  margin:60px 0 0 auto;

  font-size:16px;
  line-height:1.7;

  color:rgba(255,255,255,.5);
}


/* 08 TRUST */

.trust{
  min-height:90vh;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10vw;

  align-items:center;

  padding:130px clamp(28px,7vw,130px);

  background:#efebe5;
  color:#151515;
}

.trust .section-index{
  color:#77716a;
}

.trust-copy h2{
  margin:0 0 38px;

  font-size:clamp(52px,5vw,82px);
  line-height:.94;
}

.trust-copy h2 span{
  color:#766f67;
}

.trust-copy p:not(.section-index){
  max-width:560px;

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

  color:#746e67;
}

.trust-principles{
  border-top:1px solid rgba(0,0,0,.15);
}

.trust-principles span{
  display:block;

  padding:23px 0;

  border-bottom:1px solid rgba(0,0,0,.12);

  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
}


/* 09 BEYOND */

.beyond{
  min-height:95vh;

  display:grid;
  grid-template-columns:1fr .9fr;
  gap:9vw;

  align-items:center;

  padding:130px clamp(28px,7vw,130px);

  background:#0d0e0e;
}

.beyond-copy h2{
  margin:0 0 35px;

  font-size:clamp(56px,5.4vw,88px);
  line-height:.93;
}

.beyond-copy p:not(.section-index){
  max-width:580px;

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

  color:rgba(255,255,255,.5);
}

.product-roadmap{
  border-top:1px solid rgba(255,255,255,.15);
}

.product-roadmap article{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:5px 20px;

  padding:27px 0;

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

.product-roadmap article > span{
  grid-row:1 / 3;

  font-size:9px;
  color:rgba(255,255,255,.28);
}

.product-roadmap strong{
  font-size:15px;
  font-weight:500;
  letter-spacing:.12em;
}

.product-roadmap small{
  font-size:10px;
  color:rgba(255,255,255,.35);
}

.product-roadmap .current strong{
  color:var(--stone);
}


/* 10 CLOSING */

.products-closing{
  min-height:100vh;

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

  padding:120px 30px;

  text-align:center;

  background:
    radial-gradient(circle at 50% 50%,rgba(201,183,157,.07),transparent 30%),
    #080909;
}

.products-closing img{
  width:68px;

  margin-bottom:55px;

  opacity:.62;
}

.products-closing > p{
  margin:0 0 25px;

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

  color:rgba(255,255,255,.48);
}

.products-closing h2{
  margin:0;

  font-size:clamp(58px,6.4vw,104px);
  line-height:.91;
}

.products-closing > small{
  position:absolute;
  bottom:40px;

  font-size:8px;
  letter-spacing:.25em;

  color:rgba(255,255,255,.28);
}


/* FOOTER */

footer{
  min-height:185px;

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

  align-items:center;

  padding:38px clamp(28px,4.3vw,76px) 24px;

  background:#e8e3db;
  color:#151515;
}

.footer-brand{
  position:relative;

  width:190px;
  height:58px;
}

.footer-brand img{
  display:block;

  width:170px;
  height:auto;

  filter:
    grayscale(1)
    brightness(.16)
    contrast(1.35);

  opacity:.96;
}

.footer-brand small{
  position:absolute;

  left:42px;
  top:38px;

  white-space:nowrap;

  font-size:9px;
  color:rgba(30,30,30,.48);
}

footer nav{
  display:flex;
  gap:28px;

  justify-self:center;
}

footer nav a{
  font-size:10px;
  color:#66615b;
}

footer > p{
  justify-self:end;

  margin:0;

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

  color:#514d48;
}

footer .copyright{
  grid-column:1 / -1;

  justify-self:center;

  font-size:8px;
  color:#8b857e;
}


/* REVEAL */

.reveal{
  opacity:0;
  transform:translateY(24px);

  transition:
    opacity .85s cubic-bezier(.22,.61,.36,1),
    transform .85s cubic-bezier(.22,.61,.36,1);
}

.reveal.visible{
  opacity:1;
  transform:none;
}


/* RESPONSIVE */

@media(max-width:1000px){

  .site-header{
    grid-template-columns:1fr auto;
  }

  .main-nav{
    display:none;
  }

  .products-hero{
    min-height:900px;
  }

  .hero-copy{
    width:70vw;
  }

  .hero-system{
    width:50vw;
    right:-10vw;
    opacity:.55;
  }

  .fragmentation,
  .what-we-build,
  .rooted-product,
  .life-system,
  .rooty-layer,
  .trust,
  .beyond{
    grid-template-columns:1fr;
  }

  .fragmentation-statement,
  .context-statement{
    grid-column:auto;
  }

  .context-map{
    min-height:650px;
  }

}


@media(max-width:700px){

  .site-header{
    height:78px;
    padding:0 20px;
  }

  .brand-logo{
    width:140px;
  }

  .rooted-entry{
    padding:10px 12px;
    font-size:9px;
  }

  .products-hero,
  .fragmentation,
  .what-we-build,
  .rooted-product,
  .life-system,
  .rooty-layer,
  .human-intelligence,
  .trust,
  .beyond{
    padding-left:22px;
    padding-right:22px;
  }

  .products-hero{
    min-height:820px;
    align-items:flex-start;
    padding-top:150px;
  }

  .hero-copy{
    width:100%;
  }

  .products-hero h1{
    font-size:clamp(55px,16vw,78px);
  }

  .hero-system{
    width:85vw;
    right:-34vw;
    top:69%;
  }

  .fragmentation{
    gap:70px;
  }

  .fragmentation h2,
  .build-copy h2,
  .system-heading h2,
  .rooty-copy h2,
  .hi-heading h2,
  .trust-copy h2,
  .beyond-copy h2{
    font-size:clamp(46px,13vw,64px);
  }

  .life-relations div{
    grid-template-columns:110px 1fr;
  }

  .life-relations p{
    font-size:18px;
  }

  .rooted-copy h2{
    font-size:clamp(70px,19vw,96px);
  }

  .rooted-mark{
    min-height:330px;
  }

  .context-map{
    min-height:440px;
    transform:scale(.82);
  }

  .orbit-one{
    width:220px;
    height:220px;
  }

  .orbit-two{
    width:330px;
    height:330px;
  }

  .orbit-three{
    width:430px;
    height:430px;
  }

  .hi-equation{
    grid-template-columns:1fr;
    margin-top:60px;
  }

  .hi-equation > b{
    text-align:center;
  }

  .hi-equation > div{
    min-height:190px;
  }

  footer{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:30px;

    padding:45px 22px 25px;
  }

  footer nav{
    flex-wrap:wrap;
    justify-self:auto;
    gap:18px 25px;
  }

  footer > p{
    justify-self:auto;
  }

  footer .copyright{
    align-self:center;
  }

}


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

  html{
    scroll-behavior:auto;
  }

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

}


/* ==========================================================
   PRODUCTS — HERO 01 / OFFICIAL VISUAL
   ========================================================== */

.products-hero{
  isolation:isolate;
}

.products-hero .hero-atmosphere{
  z-index:2;
  background:
    linear-gradient(
      90deg,
      #080909 0%,
      rgba(8,9,9,.99) 24%,
      rgba(8,9,9,.91) 43%,
      rgba(8,9,9,.46) 57%,
      rgba(8,9,9,.05) 76%,
      transparent 100%
    );
}

.products-hero .hero-copy{
  z-index:5;
}

.products-hero .hero-visual{
  position:absolute;
  z-index:1;

  inset:0 0 0 auto;

  width:100%;
  height:100%;

  overflow:hidden;
  pointer-events:none;
}

.products-hero .hero-visual::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      #080909 0%,
      rgba(8,9,9,.92) 22%,
      rgba(8,9,9,.48) 42%,
      rgba(8,9,9,.05) 64%,
      transparent 82%
    );
}

.products-hero .hero-visual img{
  position:absolute;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center center;

  opacity:.96;

  filter:
    contrast(1.03)
    saturate(.92);
}

.products-hero .section-number{
  z-index:6;
}


/* Disable old provisional artwork */

.products-hero .hero-system{
  display:none !important;
}


/* Tablet */

@media(max-width:1000px){

  .products-hero .hero-visual img{
    object-position:60% center;
  }

  .products-hero .hero-visual::after{
    background:
      linear-gradient(
        90deg,
        #080909 0%,
        rgba(8,9,9,.94) 30%,
        rgba(8,9,9,.46) 58%,
        rgba(8,9,9,.12) 100%
      );
  }

}


/* Mobile */

@media(max-width:700px){

  .products-hero .hero-visual{
    opacity:.64;
  }

  .products-hero .hero-visual img{
    object-position:67% center;
  }

  .products-hero .hero-visual::after{
    background:
      linear-gradient(
        180deg,
        #080909 0%,
        rgba(8,9,9,.90) 30%,
        rgba(8,9,9,.50) 58%,
        #080909 100%
      );
  }

}


/* ==========================================================
   PRODUCTS HERO — FINAL IMAGE BLEND
   ========================================================== */

.products-hero .hero-visual{
  inset:0 !important;
  width:100% !important;
  height:100% !important;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.10) 28%,
      rgba(0,0,0,.72) 45%,
      #000 57%,
      #000 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.10) 28%,
      rgba(0,0,0,.72) 45%,
      #000 57%,
      #000 100%
    );
}

.products-hero .hero-visual img{
  width:100% !important;
  height:100% !important;

  object-fit:cover !important;
  object-position:center center !important;
}

.products-hero .hero-visual::after{
  background:
    linear-gradient(
      90deg,
      #080909 0%,
      rgba(8,9,9,.98) 25%,
      rgba(8,9,9,.80) 39%,
      rgba(8,9,9,.30) 53%,
      transparent 68%
    ) !important;
}


/* Mobile keeps a conventional fade */

@media(max-width:700px){

  .products-hero .hero-visual{
    -webkit-mask-image:none;
    mask-image:none;
  }

}