.refs-page{
  --refs-blue-rgb:var(--brand-rgb);
  --refs-indigo-rgb:var(--brand-indigo-rgb);
  --refs-green-rgb:var(--brand-green-rgb);
  --refs-ink:rgb(16,19,27);
  --refs-panel:rgba(255,255,255,.035);
  --refs-panel-strong:rgba(255,255,255,.055);
  --refs-line:rgba(255,255,255,.095);
  --refs-case-rgb:var(--refs-blue-rgb);
  isolation:isolate;
}

.refs-page h1,
.refs-page h2,
.refs-page h3,
.refs-page h4{
  margin-top:0;
}

.refs-page section{
  position:relative;
}

.refs-page section > .container{
  position:relative;
  z-index:1;
}

.refs-hero{
  padding-top:var(--page-breadcrumb-top-space);
  overflow:hidden;
}

.refs-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:100%;
  min-height:620px;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 14%, rgba(var(--refs-blue-rgb), .075), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(var(--refs-green-rgb), .045), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 72%);
  opacity:.95;
}

.refs-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.11), rgba(255,255,255,0));
}

.refs-hero__grid{
  --split-cols:minmax(0, 1.02fr) minmax(22rem, .98fr);
  --split-align-desktop:center;
}

.refs-hero__copy{
  max-width:48rem;
}

.refs-hero__title{
  max-width:min(100%, 18.8ch);
  margin-bottom:.98rem;
  font-size:var(--page-h1-size);
}

.refs-hero__title.ui-line-accent,
.refs-cta__copy .ui-line-accent,
.refs-section-head .ui-line-accent--center{
  --line-width:min(15rem, 64%);
  --line-gap:.66rem;
  --line-height:4px;
  --line-bg:linear-gradient(90deg, rgba(var(--refs-blue-rgb), .78), rgba(var(--refs-green-rgb), .54));
  --line-shadow:none;
}

.refs-hero__lead{
  max-width:42rem;
}

.refs-hero__points{
  display:flex;
  flex-wrap:wrap;
  gap:.58rem;
  margin-top:1rem;
}

.refs-hero__points span{
  display:inline-flex;
  align-items:center;
  min-height:2.2rem;
  padding:.42rem .72rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  color:rgba(248,251,255,.82);
  font-size:.82rem;
  font-weight:760;
  line-height:1.15;
}

.refs-hero__actions{
  margin-top:1.18rem;
}

.refs-hero__preview{
  position:relative;
  --panel-border:rgba(255,255,255,.105);
  --panel-bg:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(16,19,27,.76));
  --panel-shadow:0 28px 70px rgba(0,0,0,.24);
  padding:clamp(.95rem, 1.6vw, 1.15rem);
  overflow:hidden;
}

.refs-hero__preview::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, rgba(var(--refs-blue-rgb), .78), rgba(var(--refs-indigo-rgb), .58), rgba(var(--refs-green-rgb), .28), transparent 82%);
  pointer-events:none;
}

.refs-preview-window{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  overflow:hidden;
  box-shadow:0 22px 52px rgba(0,0,0,.23);
}

.refs-preview-window__bar{
  display:flex;
  align-items:center;
  gap:.42rem;
  min-height:2.55rem;
  padding:0 .92rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}

.refs-preview-window__bar span{
  width:.62rem;
  height:.62rem;
  border-radius:999px;
  background:rgba(248,251,255,.32);
}

.refs-preview-window__bar span:nth-child(1){
  background:rgba(225,98,86,.92);
}

.refs-preview-window__bar span:nth-child(2){
  background:rgba(246,158,38,.92);
}

.refs-preview-window__bar span:nth-child(3){
  background:rgba(var(--refs-green-rgb), .92);
}

.refs-preview-window__screen{
  min-height:23rem;
  padding:clamp(1.2rem, 2.4vw, 1.7rem);
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--refs-blue-rgb), .08), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.refs-preview-window__eyebrow{
  display:inline-flex;
  margin-bottom:.72rem;
  padding:.38rem .62rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:rgba(248,251,255,.72);
  font-size:.72rem;
  font-weight:820;
  text-transform:uppercase;
  letter-spacing:.045em;
}

.refs-preview-window__screen strong{
  display:block;
  max-width:18ch;
  color:#fff;
  font-size:clamp(1.5rem, 2.2vw, 2.1rem);
  line-height:1.02;
  letter-spacing:-.025em;
}

.refs-preview-window__screen p{
  max-width:25rem;
  margin-top:.74rem;
  color:rgba(248,251,255,.76);
  font-size:.98rem;
  line-height:1.58;
}

.refs-preview-window__rows{
  display:grid;
  gap:.62rem;
  margin-top:1.35rem;
}

.refs-preview-window__rows span{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-height:3.4rem;
  padding:.72rem .86rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  color:rgba(248,251,255,.8);
  font-size:.8rem;
  font-weight:700;
  line-height:1.2;
}

.refs-preview-window__rows span:nth-child(2){
  width:86%;
}

.refs-preview-window__rows span:nth-child(3){
  width:72%;
}

.refs-preview-window__rows span strong{
  display:inline-flex;
  max-width:none;
  color:rgba(248,251,255,.96);
  font-size:.96rem;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}

.refs-preview-window__rows span:nth-child(1) strong{
  color:rgba(var(--refs-blue-rgb), .96);
}

.refs-preview-window__rows span:nth-child(2) strong{
  color:rgba(201,210,255,.98);
}

.refs-preview-window__rows span:nth-child(3) strong{
  color:rgba(var(--refs-green-rgb), .94);
}

.refs-project{
  scroll-margin-top:5.25rem;
}

.refs-section-head{
  max-width:74rem;
}

.refs-section-head h2{
  max-width:28ch;
}

.refs-section-head--center{
  margin-inline:auto;
  text-align:center;
  --eyebrow-margin-inline:auto;
}

.refs-section-head--center h2{
  margin-inline:auto;
}

.refs-projects{
  display:grid;
  gap:clamp(1rem, 2.6vw, 1.6rem);
  margin-top:clamp(1.3rem, 2.8vw, 2rem);
}

.refs-project{
  --case-rgb:var(--refs-case-rgb);
  position:relative;
  display:grid;
  gap:clamp(1rem, 2.7vw, 2rem);
  align-items:center;
  padding:clamp(1rem, 2.5vw, 1.55rem);
  border-radius:30px;
  border:1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(circle at var(--case-glow-x, 0%) 12%, rgba(var(--case-rgb), .075), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.036), rgba(255,255,255,.014));
  box-shadow:0 24px 64px rgba(0,0,0,.18);
  overflow:hidden;
}

.refs-project::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 32%);
  opacity:.62;
}

.refs-project--blue{
  --case-rgb:var(--refs-blue-rgb);
}

.refs-project--green{
  --case-rgb:var(--refs-green-rgb);
}

.refs-project--indigo{
  --case-rgb:var(--refs-indigo-rgb);
}

.refs-project--reverse{
  --case-glow-x:100%;
}

.refs-project__visual,
.refs-project__content{
  position:relative;
  z-index:1;
  min-width:0;
}

.refs-project__visual{
  display:grid;
  gap:.86rem;
}

.refs-desktop{
  position:relative;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.032));
  padding:.62rem;
  box-shadow:
    0 26px 58px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform:perspective(1200px) rotateX(.5deg) rotateY(-1.2deg);
  transition:transform var(--transition-slow), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.refs-project--reverse .refs-desktop{
  transform:perspective(1200px) rotateX(.5deg) rotateY(1.2deg);
}

.refs-project:hover .refs-desktop{
  transform:perspective(1200px) rotateX(0) rotateY(0) translateY(-3px);
  border-color:rgba(var(--case-rgb), .22);
  box-shadow:
    0 30px 72px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.refs-desktop__bar{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:.72rem;
  min-height:2.35rem;
  padding:0 .42rem .58rem;
}

.refs-desktop__dots{
  display:flex;
  gap:.34rem;
}

.refs-desktop__dots span{
  width:.56rem;
  height:.56rem;
  border-radius:999px;
  background:rgba(248,251,255,.28);
}

.refs-desktop__url{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:.42rem .68rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(16,19,27,.42);
  color:rgba(248,251,255,.58);
  font-size:.76rem;
  font-weight:720;
  line-height:1;
}

.refs-desktop__screen{
  position:relative;
  height:clamp(26rem, 42vw, 36rem);
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.095);
  background:rgba(0,0,0,.18);
  isolation:isolate;
}

.refs-desktop__screen picture{
  display:block;
  min-height:100%;
}

.refs-desktop__image{
  display:block;
  width:100%;
  height:auto;
  min-height:100%;
  object-fit:cover;
  object-position:top center;
  transform:translate3d(0, 0, 0);
  transition:transform var(--refs-scroll-duration, 8s) cubic-bezier(.2, .74, .2, 1), filter var(--transition-slow);
  will-change:transform;
}

.refs-desktop:hover .refs-desktop__screen.has-scroll .refs-desktop__image,
.refs-desktop__screen.has-scroll:hover .refs-desktop__image{
  transform:translate3d(0, var(--refs-scroll-y, 0), 0);
  filter:saturate(1.04) contrast(1.02);
}

.refs-desktop__scroll-cue{
  position:absolute;
  right:.78rem;
  bottom:.78rem;
  z-index:2;
  display:grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(16,19,27,.68);
  color:rgba(248,251,255,.92);
  box-shadow:0 14px 28px rgba(0,0,0,.24);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(.24rem);
  transition:opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  pointer-events:none;
}

.refs-desktop__scroll-cue svg{
  width:1.12rem;
  height:1.12rem;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.refs-desktop__screen.has-scroll .refs-desktop__scroll-cue{
  opacity:.96;
  transform:translateY(0);
}

.refs-desktop:hover .refs-desktop__scroll-cue{
  background:rgba(var(--case-rgb), .72);
}

.refs-project__stamp{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:.68rem;
  max-width:min(100%, 26rem);
  padding:.72rem .86rem;
  border-radius:18px;
  border:1px solid rgba(var(--case-rgb), .18);
  background:rgba(16,19,27,.58);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(0,0,0,.20);
}

.refs-project--reverse .refs-project__stamp{
  justify-self:end;
}

.refs-project__stamp strong{
  flex:0 0 auto;
  color:rgba(var(--case-rgb), .96);
  font-size:clamp(1rem, .76vw + .86rem, 1.22rem);
  line-height:1;
  letter-spacing:-.02em;
}

.refs-project__stamp span{
  color:rgba(248,251,255,.78);
  font-size:.83rem;
  font-weight:700;
  line-height:1.28;
}

.refs-project__content{
  display:grid;
  gap:.92rem;
}

.refs-project__topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}

.refs-project__badge,
.refs-project__type{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  border-radius:999px;
  font-weight:830;
  line-height:1.12;
}

.refs-project__badge{
  min-height:2.1rem;
  padding:.4rem .72rem;
  border:1px solid rgba(var(--case-rgb), .22);
  background:rgba(var(--case-rgb), .075);
  color:rgba(248,251,255,.90);
  font-size:.76rem;
}

.refs-project__location{
  color:rgba(248,251,255,.58);
  font-size:.82rem;
  font-weight:720;
  text-align:right;
}

.refs-project__intro{
  display:grid;
  gap:.46rem;
}

.refs-project__type{
  color:rgba(var(--case-rgb), .96);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.045em;
}

.refs-project__intro h3{
  margin:0;
  color:#fff;
  font-size:clamp(1.48rem, 2vw, 2.18rem);
  line-height:1.02;
  letter-spacing:-.026em;
}

.refs-project__intro p{
  margin:0;
  color:rgba(248,251,255,.82);
  font-size:clamp(.98rem, .62vw + .86rem, 1.08rem);
  line-height:1.58;
}

.refs-project__metrics{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.58rem;
}

.refs-project__metric{
  min-height:4.85rem;
  padding:.78rem .78rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}

.refs-project__metric strong,
.refs-project__metric span{
  display:block;
}

.refs-project__metric strong{
  color:rgba(var(--case-rgb), .96);
  font-size:clamp(.98rem, .55vw + .86rem, 1.2rem);
  line-height:1.05;
  letter-spacing:-.014em;
}

.refs-project__metric span{
  margin-top:.3rem;
  color:rgba(248,251,255,.64);
  font-size:.76rem;
  line-height:1.32;
}

.refs-project__story{
  display:grid;
  gap:.7rem;
}

.refs-project__block{
  display:grid;
  gap:.44rem;
  padding:.84rem .9rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.022);
}

.refs-project__block--result{
  border-color:rgba(var(--refs-green-rgb), .13);
  background:rgba(var(--refs-green-rgb), .035);
}

.refs-project__block span{
  color:rgba(248,251,255,.58);
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.045em;
}

.refs-project__block p,
.refs-project__block li{
  color:rgba(248,251,255,.80);
  font-size:.94rem;
  line-height:1.48;
}

.refs-project__block p{
  margin:0;
}

.refs-project__block ul{
  display:grid;
  gap:.38rem;
  margin:0;
  padding:0;
  list-style:none;
}

.refs-project__block li{
  position:relative;
  padding-left:1rem;
}

.refs-project__block li::before{
  content:"";
  position:absolute;
  left:0;
  top:.56em;
  width:.38rem;
  height:.38rem;
  border-radius:999px;
  background:rgba(var(--case-rgb), .86);
  box-shadow:0 0 0 4px rgba(var(--case-rgb), .10);
}

.refs-project__block--result li::before{
  background:rgba(var(--refs-green-rgb), .92);
  box-shadow:0 0 0 4px rgba(var(--refs-green-rgb), .10);
}

.refs-project__usps{
  display:flex;
  flex-wrap:wrap;
  gap:.48rem;
}

.refs-project__usps span{
  display:inline-flex;
  align-items:center;
  min-height:2.05rem;
  padding:.36rem .66rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  color:rgba(248,251,255,.76);
  font-size:.76rem;
  font-weight:770;
  line-height:1.15;
}

.refs-project__footer{
  display:flex;
  flex-wrap:wrap;
  gap:.58rem;
  align-items:center;
}

.refs-project__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.8rem;
  padding:.54rem .94rem;
  border-radius:999px;
  font-size:.84rem;
  font-weight:820;
  line-height:1.15;
  text-decoration:none;
  transition:transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.refs-project__link--site{
  border:1px solid rgba(var(--case-rgb), .22);
  background:rgba(var(--case-rgb), .10);
  color:rgba(248,251,255,.94);
}

.refs-project__link--site::after{
  content:"↗";
  margin-left:.42rem;
  font-size:.78em;
  opacity:.74;
}

.refs-project__link--case{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(248,251,255,.84);
}

.refs-project__link:hover,
.refs-project__link:focus-visible{
  color:#fff;
  transform:translateY(-1px);
  border-color:rgba(var(--case-rgb), .34);
  background:rgba(var(--case-rgb), .16);
  box-shadow:0 14px 28px rgba(0,0,0,.14);
  outline:none;
}

.refs-cta__shell{
  --panel-border:rgba(255,255,255,.105);
  --panel-bg:
    radial-gradient(circle at 10% 10%, rgba(var(--refs-blue-rgb), .08), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(13,18,29,.82));
  --panel-shadow:0 28px 70px rgba(0,0,0,.24);
  display:grid;
  gap:1rem;
  padding:clamp(1.18rem, 2.2vw, 1.6rem);
}

.refs-cta__copy{
  max-width:42rem;
}

.refs-cta__actions{
  margin-top:1.08rem;
}

.refs-cta__stack{
  display:grid;
  gap:.68rem;
}

.refs-cta__stack span{
  display:flex;
  align-items:center;
  min-height:3.2rem;
  padding:.76rem .9rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.028);
  color:rgba(248,251,255,.82);
  font-weight:780;
  line-height:1.22;
}

@media (min-width:760px){
  .refs-cta__shell{
    grid-template-columns:minmax(0, 1.06fr) minmax(18rem, .94fr);
    align-items:center;
  }
}

@media (min-width:980px){
  .refs-project{
    grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
  }

  .refs-project--reverse{
    grid-template-columns:minmax(0, .98fr) minmax(0, 1.02fr);
  }

  .refs-project--reverse .refs-project__visual{
    order:2;
  }

  .refs-project--reverse .refs-project__content{
    order:1;
  }
}

@media (max-width:979px){
  .refs-project__stamp,
  .refs-project--reverse .refs-project__stamp{
    justify-self:start;
  }
}

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

  .refs-project__topline{
    align-items:flex-start;
    flex-direction:column;
  }

  .refs-project__location{
    text-align:left;
  }

  .refs-project__metrics{
    grid-template-columns:1fr;
  }

  .refs-desktop__screen{
    height:auto;
    aspect-ratio:4 / 5;
  }

  .refs-desktop__screen picture,
  .refs-desktop__image{
    width:100%;
    height:100%;
  }

  .refs-desktop__image{
    object-fit:cover;
    transform:none !important;
  }

  .refs-desktop__scroll-cue{
    display:none;
  }

  .refs-project__footer{
    align-items:stretch;
  }

  .refs-project__link{
    width:100%;
  }
}

@media (max-width:520px){
  .refs-project,
  .refs-hero__preview,
  .refs-cta__shell{
    border-radius:24px;
  }

  .refs-desktop{
    border-radius:22px;
    padding:.48rem;
  }

  .refs-desktop__screen{
    border-radius:16px;
  }

  .refs-desktop__bar{
    min-height:2.15rem;
  }

  .refs-desktop__url{
    font-size:.7rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .refs-desktop__image{
    transition:none;
    transform:none !important;
  }
}