/* Shared portfolio showcase: exact owner for index + design page. */

#portfolio .portfolio-showcase{
  width:100%;
  max-width:min(1460px, calc(100vw - 96px));
  margin:16px auto 0;
  position:relative;
  background:transparent;
}

#portfolio .portfolio-showcase__viewport{
  position:relative;
  overflow:visible;
  width:100%;
  height:min(75vh, 810px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:72px;
  box-sizing:border-box;
  background:transparent;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  -ms-touch-action:pan-y;
}

#portfolio .portfolio-showcase__track{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  transform:translate3d(0,0,0);
  transition:none;
  will-change:transform;
}

#portfolio .portfolio-showcase__image--prev,
#portfolio .portfolio-showcase__image--next{
  display:none;
}

#portfolio .portfolio-showcase__cta-wrap{
  display:flex;
  justify-content:center;
  margin-top:18px;
}

#portfolio .portfolio-showcase__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:248px;
  min-height:52px;
  padding:14px 28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,.94);
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  text-decoration:none;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.12);
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease;
}

#portfolio .portfolio-showcase__cta:hover,
#portfolio .portfolio-showcase__cta:focus-visible{
  background:#2e2e2e;
  border-color:rgba(191,169,122,.34);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.07), 0 0 18px rgba(191,169,122,.10);
  transform:translateY(-1px);
  outline:none;
}

#portfolio .portfolio-showcase__cta.is-disabled{
  opacity:.52;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
}

#portfolio .portfolio-showcase__backdrop,
#portfolio .portfolio-showcase__viewport::after{
  display:none;
}

#portfolio .portfolio-showcase__image{
  position:relative;
  z-index:1;
  display:block;
  cursor:inherit;
  -webkit-user-drag:none;
  width:auto;
  height:auto;
  max-width:calc(100% - 144px);
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transition:opacity .32s ease;
  background:transparent;
}

#portfolio .portfolio-showcase.is-switching .portfolio-showcase__image{
  opacity:.35;
}

#portfolio .portfolio-showcase__image--preview{
  display:none;
}

#portfolio .portfolio-showcase.is-swipe-locked .portfolio-showcase__viewport{
  cursor:grabbing;
  touch-action:pan-y;
  -ms-touch-action:pan-y;
  overscroll-behavior-y:auto;
}

#portfolio .portfolio-showcase__nav{
  position:absolute;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(3,3,3,.66);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, opacity .25s ease;
}

#portfolio .portfolio-showcase__nav span{
  display:block;
  font-size:34px;
  line-height:1;
  transform:translateY(-1px);
}

#portfolio .portfolio-showcase__nav:hover,
#portfolio .portfolio-showcase__nav:focus-visible,
#portfolio .portfolio-showcase__nav.is-key-active{
  background:rgba(191,169,122,.92);
  border-color:rgba(191,169,122,.96);
  color:#080808;
  box-shadow:0 0 18px rgba(191,169,122,.34);
  outline:none;
}

#portfolio .portfolio-showcase__nav--prev{ left:0; }

#portfolio .portfolio-showcase__nav--next{ right:0; }

#portfolio .portfolio-showcase__meta{
  position:absolute;
  right:0;
  bottom:18px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(3,3,3,.66);
  border:1px solid rgba(255,255,255,.12);
}

#portfolio .portfolio-showcase__counter{
  color:#fff;
  font-size:14px;
  line-height:1;
  letter-spacing:.03em;
}

@media (max-width: 900px){
#portfolio .portfolio-showcase{
    width:100vw;
    max-width:none;
    margin:22px calc(50% - 50vw) 0;
  }
#portfolio .portfolio-showcase__viewport{
    display:grid;
    grid-template-columns:12px 46px 8px 46px minmax(2px,1fr) minmax(160px,184px) minmax(2px,1fr) auto 12px;
    grid-template-areas:
      "image image image image image image image image image"
      ". prev . next . cta . meta .";
    row-gap:14px;
    align-items:center;
    height:auto;
    aspect-ratio:auto;
    padding-inline:0;
    border-radius:0;
    box-sizing:border-box;
    overflow:hidden;
    touch-action:auto;
    -ms-touch-action:auto;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
  }
#portfolio .portfolio-showcase__track{
    grid-area:image;
    position:relative;
    z-index:1;
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
    width:100%;
    height:auto;
    min-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overflow-anchor:none;
    scroll-snap-type:x mandatory;
    scroll-behavior:auto;
    scroll-padding-inline:0;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    -ms-touch-action:pan-y;
    scrollbar-width:none;
    transform:none;
    transition:none;
    will-change:auto;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
#portfolio .portfolio-showcase__track::-webkit-scrollbar{
    display:none;
  }
#portfolio .portfolio-showcase__image--prev,
#portfolio .portfolio-showcase__image--current,
#portfolio .portfolio-showcase__image--next{
    display:block;
  }
#portfolio .portfolio-showcase__image{
    grid-area:auto;
    flex:0 0 100%;
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    transform:translate3d(0,0,0);
    will-change:auto;
    backface-visibility:hidden;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
#portfolio .portfolio-showcase__image--preview{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    opacity:1;
    pointer-events:none;
    transform:translate3d(100%,0,0);
  }
#portfolio .portfolio-showcase:not(.is-swipe-dragging):not(.is-swipe-animating) .portfolio-showcase__image--preview:not(.is-active){
    display:none;
  }
#portfolio .portfolio-showcase.is-swipe-dragging .portfolio-showcase__track,
#portfolio .portfolio-showcase.is-swipe-animating .portfolio-showcase__track{
    transition:none !important;
  }
#portfolio .portfolio-showcase.is-swipe-dragging .portfolio-showcase__track,
#portfolio .portfolio-showcase.is-swipe-animating .portfolio-showcase__track,
#portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__track{
    scroll-snap-type:none;
    scroll-behavior:auto !important;
    -webkit-overflow-scrolling:auto;
  }
#portfolio .portfolio-showcase__nav{
    position:static;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    transform:none;
    width:46px;
    height:46px;
  }
#portfolio .portfolio-showcase__nav--prev{ grid-area:prev; }
#portfolio .portfolio-showcase__nav--next{ grid-area:next; }
#portfolio .portfolio-showcase__nav span{
    font-size:30px;
  }
#portfolio .portfolio-showcase__meta{
    position:static;
    grid-area:meta;
    justify-self:end;
    right:auto;
    bottom:auto;
    padding:10px 12px;
  }
#portfolio .portfolio-showcase__cta-wrap{
    grid-area:cta;
    justify-self:center;
    align-self:center;
    width:auto;
    max-width:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
#portfolio .portfolio-showcase__cta{
    display:inline-flex;
    width:100%;
    max-width:184px;
    min-width:160px;
    min-height:46px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(3,3,3,.34);
    color:#fff;
    font-size:13px;
    font-weight:600;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    box-sizing:border-box;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
  }
#portfolio .portfolio-showcase__cta:hover,
#portfolio .portfolio-showcase__cta:focus{
    background:rgba(3,3,3,.66);
    border-color:rgba(255,255,255,.14);
    color:#fff;
    box-shadow:none;
    transform:none;
    outline:none;
  }
#portfolio .portfolio-showcase__cta:active,
#portfolio .portfolio-showcase__cta:focus-visible{
    background:rgba(191,169,122,.92);
    border-color:rgba(191,169,122,.96);
    color:#080808;
    box-shadow:0 0 18px rgba(191,169,122,.34);
    transform:none;
    outline:none;
  }
}

@media (max-width: 560px){
#portfolio .portfolio-showcase__counter{
    font-size:14px;
  }
}

@media (max-width:900px){
#portfolio .portfolio-showcase__viewport{
    grid-template-columns:12px 46px 8px 46px 8px minmax(150px,172px) minmax(2px,1fr) auto 12px !important;
    grid-template-areas:
      "image image image image image image image image image"
      ". prev . next . cta . meta ." !important;
  }
#portfolio .portfolio-showcase__cta{
    width:100% !important;
    max-width:172px !important;
    min-width:150px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

@media (max-width:380px){
#portfolio .portfolio-showcase__viewport{
    grid-template-columns:10px 44px 6px 44px 6px minmax(142px,148px) minmax(2px,1fr) auto 10px !important;
  }
#portfolio .portfolio-showcase__nav{
    width:44px !important;
    height:44px !important;
  }
#portfolio .portfolio-showcase__cta{
    max-width:148px !important;
    min-width:142px !important;
    font-size:12px !important;
  }
#portfolio .portfolio-showcase__meta{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

#portfolio .portfolio-showcase__scrubber{
  display:none;
}

@media (max-width:900px){
#portfolio .portfolio-showcase__scrubber{
    --hi-portfolio-progress:0;
    --hi-scrubber-control-width:min(80vw,350px);
    grid-area:image;
    position:relative;
    z-index:6;
    align-self:end;
    justify-self:center;
    display:block;
    width:calc(100vw - 12px);
    max-width:none;
    height:46px;
    margin:0 0 8px;
    border:0;
    background:transparent;
    box-shadow:none;
    box-sizing:border-box;
    pointer-events:auto;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    cursor:ew-resize;
    -webkit-tap-highlight-color:transparent;
  }
#portfolio .portfolio-showcase__scrubber[hidden]{
    display:none !important;
  }
#portfolio .portfolio-showcase__scrubber-rail{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--hi-scrubber-control-width);
    height:2px;
    border-radius:999px;
    background:rgba(255,255,255,.28);
    box-shadow:0 1px 5px rgba(0,0,0,.28);
    transform:translate(-50%,-50%);
    transform-origin:center;
    transition:width .20s cubic-bezier(.22,.72,.25,1), height .18s ease, background-color .18s ease, box-shadow .18s ease;
    pointer-events:none;
  }
#portfolio .portfolio-showcase__scrubber-fill{
    position:absolute;
    inset:0 auto 0 0;
    width:calc(var(--hi-portfolio-progress) * 100%);
    border-radius:inherit;
    background:linear-gradient(90deg,rgba(191,169,122,.62),rgba(214,190,145,1));
    box-shadow:0 0 7px rgba(191,169,122,.28);
  }
#portfolio .portfolio-showcase__scrubber-thumb{
    position:absolute;
    left:calc(var(--hi-portfolio-progress) * 100%);
    top:50%;
    width:10px;
    height:10px;
    border:2px solid rgba(12,12,12,.80);
    border-radius:50%;
    background:#d2bb8e;
    box-shadow:0 0 0 2px rgba(191,169,122,.16),0 2px 8px rgba(0,0,0,.32);
    transform:translate(-50%,-50%);
    box-sizing:border-box;
    transition:width .18s ease,height .18s ease,box-shadow .18s ease,transform .18s ease;
  }
#portfolio .portfolio-showcase__scrubber-value{
    position:absolute;
    left:clamp(18px,calc(var(--hi-portfolio-progress) * 100%),calc(100% - 18px));
    bottom:10px;
    min-width:28px;
    height:22px;
    padding:0 6px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(12,12,12,.54);
    box-shadow:0 5px 14px rgba(0,0,0,.20);
    color:rgba(255,255,255,.94);
    font:500 11px/20px Arial,sans-serif;
    text-align:center;
    white-space:nowrap;
    opacity:0;
    transform:translate(-50%,5px) scale(.94);
    transition:opacity .15s ease,transform .18s ease;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
#portfolio .portfolio-showcase__scrubber-input{
    position:absolute;
    z-index:2;
    left:0;
    top:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    opacity:0;
    cursor:ew-resize;
    pointer-events:none;
    touch-action:none;
    transform:none;
    transition:none;
    -webkit-appearance:none;
    appearance:none;
  }
#portfolio .portfolio-showcase__scrubber-input::-webkit-slider-runnable-track{
    width:100%;
    height:100%;
    background:transparent;
    border:0;
  }
#portfolio .portfolio-showcase__scrubber-input::-webkit-slider-thumb{
    width:34px;
    height:44px;
    margin:0;
    border:0;
    background:transparent;
    -webkit-appearance:none;
    appearance:none;
  }
#portfolio .portfolio-showcase__scrubber-input::-moz-range-track{
    width:100%;
    height:100%;
    background:transparent;
    border:0;
  }
#portfolio .portfolio-showcase__scrubber-input::-moz-range-thumb{
    width:34px;
    height:44px;
    border:0;
    background:transparent;
  }
#portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber-rail{
    height:2px;
    background:rgba(255,255,255,.34);
    box-shadow:0 2px 9px rgba(0,0,0,.30),0 0 13px rgba(191,169,122,.10);
  }
#portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber-thumb{
    width:10px;
    height:10px;
    box-shadow:0 0 0 3px rgba(191,169,122,.18),0 0 13px rgba(191,169,122,.30),0 3px 9px rgba(0,0,0,.34);
  }
#portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber-value{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
#portfolio .portfolio-showcase__scrubber:focus-within .portfolio-showcase__scrubber-rail{
    background:rgba(255,255,255,.34);
  }
}

@media (max-width:380px){
#portfolio .portfolio-showcase__scrubber{
    --hi-scrubber-control-width:min(82vw,318px);
    width:calc(100vw - 10px);
    margin-bottom:7px;
  }
}

@media (max-width:900px){
#portfolio .portfolio-showcase__scrubber{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(5px);
    transition:opacity .22s ease, visibility 0s linear .22s, transform .22s ease;
  }
#portfolio .portfolio-showcase.is-scrubber-visible .portfolio-showcase__scrubber,
#portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .22s ease, visibility 0s linear 0s, transform .22s ease;
  }
#portfolio .portfolio-showcase__counter{
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
}

@media (max-width:900px){
#portfolio .portfolio-showcase__meta{
    min-height:46px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box !important;
  }
}

#portfolio .portfolio-showcase__cta{
  background:#262626 !important;
  color:rgba(255,255,255,0.94) !important;
  border-color:rgba(255,255,255,0.16) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(255,255,255,0.06) !important;
}

#portfolio .portfolio-showcase__cta{
  transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .35s ease, transform .25s ease !important;
}

#portfolio .portfolio-showcase__cta:hover,
#portfolio .portfolio-showcase__cta:focus-visible{
  background:#BFA97A !important;
  color:#111 !important;
  border-color:#BFA97A !important;
  background-image:none !important;
  box-shadow:0 0 18px rgba(191,169,122,0.70), 0 0 36px rgba(191,169,122,0.45) !important;
  transform:translateY(-1px) !important;
  opacity:1 !important;
}

#portfolio .portfolio-showcase__cta{
  background:#262626 !important;
  color:rgba(255,255,255,.94) !important;
  border-color:rgba(255,255,255,.16) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,255,255,.06) !important;
}

#portfolio .portfolio-showcase__cta:hover,
#portfolio .portfolio-showcase__cta:focus-visible{
  background:#2e2e2e !important;
  color:#fff !important;
  border-color:rgba(191,169,122,.34) !important;
  background-image:none !important;
  box-shadow:0 12px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.07), 0 0 18px rgba(191,169,122,.10) !important;
  transform:translateY(-1px) !important;
  opacity:1 !important;
}

#portfolio .portfolio-showcase__cta{
  background:#202020 !important;
  color:rgba(255,255,255,.94) !important;
  border-color:rgba(255,255,255,.14) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.025), inset 0 -1px 0 rgba(255,255,255,.04) !important;
  opacity:1 !important;
}

#portfolio .portfolio-showcase__cta:hover,
#portfolio .portfolio-showcase__cta:focus-visible{
  background:#262626 !important;
  color:#fff !important;
  border-color:rgba(191,169,122,.30) !important;
  background-image:none !important;
  box-shadow:0 12px 28px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.035), inset 0 -1px 0 rgba(255,255,255,.05), 0 0 16px rgba(191,169,122,.08) !important;
  transform:translateY(-1px) !important;
  opacity:1 !important;
}

#portfolio .portfolio-showcase__cta{
  background:#202020 !important;
  color:rgba(255,255,255,.94) !important;
  border-color:rgba(255,255,255,.14) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.025), inset 0 -1px 0 rgba(255,255,255,.04) !important;
}

@media (max-width: 900px){
#portfolio .portfolio-showcase__cta{
    background:rgba(3,3,3,.34) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.16) !important;
    background-image:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    opacity:1 !important;
    transform:none !important;
  }
#portfolio .portfolio-showcase__cta:hover,
#portfolio .portfolio-showcase__cta:focus{
    background:rgba(3,3,3,.34) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.16) !important;
    box-shadow:none !important;
    transform:none !important;
    outline:none !important;
  }
#portfolio .portfolio-showcase__cta:active,
#portfolio .portfolio-showcase__cta:focus-visible{
    background:rgba(191,169,122,.92) !important;
    color:#080808 !important;
    border-color:rgba(191,169,122,.96) !important;
    box-shadow:0 0 18px rgba(191,169,122,.34) !important;
    transform:none !important;
    outline:none !important;
  }
}

@media (hover:none) and (pointer:coarse) and (max-width:900px){
#portfolio .portfolio-showcase__nav:active,
#portfolio .portfolio-showcase__cta:active{
    background:#BFA97A !important;
    color:#111 !important;
    border-color:#BFA97A !important;
    background-image:none !important;
    box-shadow:0 0 18px rgba(191,169,122,.70), 0 0 36px rgba(191,169,122,.45) !important;
    transform:none !important;
    opacity:1 !important;
  }
#portfolio .portfolio-showcase__nav:active span{
    color:#111 !important;
  }
}

@media (hover:none) and (pointer:coarse) and (max-width:900px){
body #portfolio .portfolio-showcase__cta:active{
    background:#BFA97A !important;
    background-image:none !important;
    color:#111 !important;
    border-color:#BFA97A !important;
    box-shadow:0 0 18px rgba(191,169,122,.72), 0 0 38px rgba(191,169,122,.48) !important;
    filter:saturate(1.04) brightness(1.03) !important;
    transform:none !important;
    opacity:1 !important;
    -webkit-tap-highlight-color:rgba(191,169,122,.24) !important;
  }
}

body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta{
  background:#202020 !important;
  color:rgba(255,255,255,.94) !important;
  border-color:rgba(255,255,255,.14) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.025), inset 0 -1px 0 rgba(255,255,255,.04) !important;
  opacity:1 !important;
}

body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:hover,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:focus-visible{
  background:#262626 !important;
  color:#fff !important;
  border-color:rgba(191,169,122,.30) !important;
  background-image:none !important;
  box-shadow:0 12px 28px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.035), inset 0 -1px 0 rgba(255,255,255,.05), 0 0 16px rgba(191,169,122,.08) !important;
  transform:translateY(-1px) !important;
  opacity:1 !important;
}

body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta{
  background:rgba(28,28,30,.86) !important;
  background-image:none !important;
  color:rgba(255,255,255,.94) !important;
  border-color:rgba(255,255,255,.09) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.26) !important;
  backdrop-filter:blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(130%) !important;
  opacity:1 !important;
}

body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:hover,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:focus-visible{
  background:rgba(34,34,36,.90) !important;
  background-image:none !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.26) !important;
  transform:none !important;
  opacity:1 !important;
  outline:none !important;
}

@media (max-width:900px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase{
    margin-top:0 !important;
  }
}

@media (max-width:900px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase{
    --hi-index-portfolio-control-bg:rgba(28,28,30,.86);
    --hi-index-portfolio-control-bg-hover:rgba(34,34,36,.90);
    --hi-index-portfolio-control-border:rgba(255,255,255,.09);
    --hi-index-portfolio-control-border-hover:rgba(255,255,255,.12);
    --hi-index-portfolio-control-text:rgba(255,255,255,.94);
    --hi-index-portfolio-control-shadow:0 8px 18px rgba(0,0,0,.26);
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta-wrap{
    grid-area:auto !important;
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    justify-self:center !important;
    align-self:center !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:3 !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__meta,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta{
    background:var(--hi-index-portfolio-control-bg) !important;
    background-image:none !important;
    border-color:var(--hi-index-portfolio-control-border) !important;
    color:var(--hi-index-portfolio-control-text) !important;
    box-shadow:var(--hi-index-portfolio-control-shadow) !important;
    backdrop-filter:blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(130%) !important;
    transform:none !important;
    opacity:1 !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav:hover,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav:focus-visible,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:hover,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:focus-visible{
    background:var(--hi-index-portfolio-control-bg-hover) !important;
    border-color:var(--hi-index-portfolio-control-border-hover) !important;
    color:#fff !important;
    box-shadow:var(--hi-index-portfolio-control-shadow) !important;
    transform:none !important;
    outline:none !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__counter{
    color:var(--hi-index-portfolio-control-text) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav span{
    font-size:38px !important;
    line-height:1 !important;
    transform:translateY(-1px) !important;
  }
}

@media (max-width:900px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav:active,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav.is-key-active,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:active,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:focus-visible{
    background:var(--hi-index-mobile-cta-gold-v21) !important;
    background-image:none !important;
    color:#000 !important;
    border-color:var(--hi-index-mobile-cta-gold-v21) !important;
    box-shadow:var(--hi-index-mobile-cta-gold-shadow-v21) !important;
    filter:none !important;
    transform:translateY(-1px) !important;
    outline:none !important;
    opacity:1 !important;
    -webkit-tap-highlight-color:rgba(191,169,122,.24) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav:active span,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav.is-key-active span{
    color:#000 !important;
  }
}

@media (min-width:901px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav span{
    font-size:42px !important;
    line-height:1 !important;
    transform:translateY(-1px) !important;
  }
}

@media (min-width:901px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase{
    width:100% !important;
    max-width:min(1460px, calc(100vw - 96px)) !important;
    margin:34px auto 0 !important;
    position:relative !important;
    background:transparent !important;
    --hi-showcase-control-outset:clamp(30px, 3.2vw, 72px) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__viewport{
    position:relative !important;
    overflow:visible !important;
    width:100% !important;
    height:min(70vh, 760px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding-inline:72px !important;
    box-sizing:border-box !important;
    background:transparent !important;
    cursor:pointer !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    touch-action:pan-y !important;
    -ms-touch-action:pan-y !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__backdrop,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__viewport::after{
    display:none !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__track{
    position:relative !important;
    z-index:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    transform:translate3d(0,0,0) !important;
    transition:none !important;
    will-change:transform !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__track .portfolio-showcase__image,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__track .portfolio-showcase__image--native{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    cursor:inherit !important;
    -webkit-user-drag:none !important;
    width:auto !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    background:transparent !important;
    transition:opacity .32s ease !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase.is-switching .portfolio-showcase__image{
    opacity:.35 !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav{
    position:absolute !important;
    top:50% !important;
    z-index:2 !important;
    transform:translateY(-50%) !important;
    width:52px !important;
    height:52px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:999px !important;
    background:rgba(3,3,3,.66) !important;
    color:#fff !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    cursor:pointer !important;
    transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, opacity .25s ease !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav span{
    display:block !important;
    font-size:42px !important;
    line-height:1 !important;
    transform:translateY(-1px) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav:hover,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav:focus-visible,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav.is-key-active{
    background:rgba(191,169,122,.92) !important;
    border-color:rgba(191,169,122,.96) !important;
    color:#080808 !important;
    box-shadow:0 0 18px rgba(191,169,122,.34) !important;
    outline:none !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav--prev{
    left:calc(-1 * var(--hi-showcase-control-outset)) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav--next{
    right:calc(-1 * var(--hi-showcase-control-outset)) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__meta{
    position:absolute !important;
    right:calc(-1 * var(--hi-showcase-control-outset)) !important;
    bottom:18px !important;
    z-index:2 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 14px !important;
    border-radius:999px !important;
    background:rgba(3,3,3,.66) !important;
    border:1px solid rgba(255,255,255,.12) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__counter{
    color:#fff !important;
    font-size:14px !important;
    line-height:1 !important;
    letter-spacing:.03em !important;
  }
}

@media (min-width:901px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__track .portfolio-showcase__image--prev,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__track .portfolio-showcase__image--next{
    display:none !important;
    width:0 !important;
    height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    flex:0 0 0 !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__track .portfolio-showcase__image--current,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__track .portfolio-showcase__image--native:not(.portfolio-showcase__image--prev):not(.portfolio-showcase__image--next){
    display:block !important;
    width:auto !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    flex:0 0 auto !important;
    object-fit:contain !important;
    object-position:center !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__viewport,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__track{
    overflow:visible !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }
}

body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:hover,
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta:focus-visible{
  background:#bfa97a !important;
  background-image:none !important;
  color:#000 !important;
  border-color:#bfa97a !important;
  box-shadow:0 0 18px rgba(191,169,122,.70), 0 0 36px rgba(191,169,122,.45) !important;
  transform:translateY(-1px) !important;
  opacity:1 !important;
  filter:none !important;
  outline:none !important;
}

@media (max-width:414px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__nav span{
    font-size:31px !important;
    line-height:1 !important;
    transform:translateY(-1px) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta-wrap{
    max-width:calc(100vw - 104px) !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta{
    max-width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    height:40px !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
    font-size:15px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
}

@media (max-width:414px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__viewport{
    grid-template-columns:10px 38px 6px 38px 8px minmax(126px,136px) minmax(2px,1fr) auto 10px !important;
    grid-template-areas:
      "image image image image image image image image image"
      ". prev . next . cta . meta ." !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta-wrap{
    width:100% !important;
    max-width:136px !important;
    justify-self:center !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta{
    width:100% !important;
    max-width:136px !important;
    min-width:126px !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 8px !important;
    font-size:12.2px !important;
    line-height:1 !important;
    letter-spacing:-.025em !important;
    white-space:nowrap !important;
  }
}

@media (max-width:380px){
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__viewport{
    grid-template-columns:8px 38px 5px 38px 6px minmax(118px,126px) minmax(2px,1fr) auto 8px !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta-wrap{
    max-width:126px !important;
  }
body.project-hero-fullscreen-page#top #portfolio .portfolio-showcase__cta{
    max-width:126px !important;
    min-width:118px !important;
    padding:0 7px !important;
    font-size:11.6px !important;
  }
}


/* Shared section rhythm and mobile title treatment. */
#portfolio > .wrap > .section-title{margin-bottom:16px;}
@media (max-width:900px){
  #portfolio > .wrap > .section-title{margin-bottom:16px !important;}
  #portfolio > .wrap > .section-title::after{display:none !important;content:none !important;}
}


/* Design interior page: only the legacy mobile slider engine is neutralized here.
   Section rhythm and anchor position are owned by the page itself. */
@media (max-width:900px){
  body.project-hero-fullscreen-page.hi-design-interior-page#top #portfolio.design-portfolio-service .portfolio-showcase__track{
    grid-area:image !important;
    position:relative !important;
    z-index:1 !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:100% !important;
    height:auto !important;
    min-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overflow-anchor:none !important;
    gap:0 !important;
    padding:0 !important;
    border:0 !important;
    scroll-snap-type:x mandatory !important;
    scroll-behavior:auto !important;
    scroll-padding-inline:0 !important;
    overscroll-behavior-x:contain !important;
    overscroll-behavior-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    -ms-touch-action:pan-y !important;
    scrollbar-width:none !important;
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  body.project-hero-fullscreen-page.hi-design-interior-page#top #portfolio.design-portfolio-service .portfolio-showcase__track::-webkit-scrollbar{
    display:none !important;
  }

  body.project-hero-fullscreen-page.hi-design-interior-page#top #portfolio.design-portfolio-service .portfolio-showcase__track .portfolio-showcase__image,
  body.project-hero-fullscreen-page.hi-design-interior-page#top #portfolio.design-portfolio-service .portfolio-showcase__track .portfolio-showcase__image--native{
    position:relative !important;
    flex:0 0 100% !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    object-fit:contain !important;
    object-position:center !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    transform:none !important;
    opacity:1 !important;
    user-select:none !important;
    -webkit-user-select:none !important;
    -webkit-user-drag:none !important;
  }
}

/* === design-mobile-portfolio-title-and-card-arrow-v13 ===
   Owner: design-interiera-samara.html.
   1) Hide only the underline below H2 "Портфолио работ" on mobile.
   2) Keep the project-card arrow centered inside its circle in both idle and active states,
      matching the approved mobile behaviour on the main page. */
@media (max-width:900px){
  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service > .wrap > h2.section-title::after{
    content:none !important;
    display:none !important;
    width:0 !important;
    height:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service .project-cta-circle{
    --cta-arrow-shift:0px !important;
    --cta-arrow-nudge-x:0px !important;
    --cta-arrow-center-y:0px !important;
    --cta-arrow-active-y:0px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service .project-cta-circle.cta-in-caption.cta-abs,
  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle.cta-in-caption.cta-abs{
    transform:translateY(0) !important;
    transform-origin:50% 50% !important;
  }

  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service .project-cta-circle > span{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    transform-origin:50% 50% !important;
    transition:transform .56s cubic-bezier(.22,.61,.36,1) !important;
    transform:rotate(180deg) !important;
  }

  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service .gallery-item:hover .project-cta-circle > span,
  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service .project-caption-link:hover .project-cta-circle > span,
  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service .gallery-item-inner.is-touching .project-cta-circle > span,
  body.project-hero-fullscreen-page.hi-design-interior-page#top
  #portfolio.design-portfolio-service .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle > span{
    transform:rotate(270deg) !important;
  }
}