/* =========================================================
   PORTFOLIO V2
========================================================= */

#portfolio.portfolio-v2 {

  --portfolio-gold: #ebb020;
  --portfolio-card: #292a2e;
  --portfolio-card-soft: #25262a;
  --portfolio-dark: #1c1d20;

  --portfolio-border:
    rgba(255,255,255,.07);

  --portfolio-muted:
    #96979a;

}


/* =========================================================
   INTRO
========================================================= */

.portfolio-v2-intro {

  display: grid;

  grid-template-columns:
    1.1fr .9fr;

  gap: 45px;

  align-items: end;

  padding:
    20px 0
    38px;

}


.portfolio-v2-eyebrow {

  display: block;

  margin-bottom: 9px;

  color:
    var(--portfolio-gold);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.7px;

}


.portfolio-v2-intro h2 {

  margin: 0;

  color: #fff;

  font-size:
    clamp(33px,3.7vw,44px);

  font-weight: 600;

  line-height: 1.18;

  letter-spacing: -1px;

}


.portfolio-v2-intro h2 span {

  color:
    var(--portfolio-gold);

}


.portfolio-v2-intro > p {

  margin: 0;

  max-width: 520px;

  color:
    var(--portfolio-muted);

  font-size: 14px;

  line-height: 1.8;

}


/* =========================================================
   TOOLBAR
========================================================= */

.portfolio-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 22px;

  padding:
    12px;

  border:
    1px solid
    var(--portfolio-border);

  border-radius: 15px;

  background:
    var(--portfolio-card-soft);

}


/* MODE SWITCH */

.portfolio-mode-switch {

  display: flex;

  gap: 5px;

}


.portfolio-mode-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    8px 12px;

  border:
    1px solid
    transparent;

  border-radius: 20px;

  background:
    transparent;

  color:
    #86878a;

  font-size: 11px;

  transition:
    .25s ease;

}


.portfolio-mode-btn:hover,
.portfolio-mode-btn.active {

  border-color:
    rgba(235,176,32,.28);

  background:
    rgba(235,176,32,.055);

  color:
    var(--portfolio-gold);

}


/* FILTER */

.portfolio-v2-filter {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 5px;

  padding: 0;

  margin: 0;

  list-style: none;

}


.portfolio-v2-filter a {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    7px 10px;

  border:
    1px solid
    transparent;

  border-radius: 18px;

  color:
    #85868a;

  font-size: 11px;

  transition:
    .25s ease;

}


.portfolio-v2-filter small {

  opacity: .5;

  font-size: 9px;

}


.portfolio-v2-filter a:hover,
.portfolio-v2-filter a.active {

  border-color:
    rgba(235,176,32,.28);

  background:
    rgba(235,176,32,.045);

  color:
    var(--portfolio-gold);

}


/* =========================================================
   FEATURED
========================================================= */

.portfolio-featured {

  display: grid;

  grid-template-columns:
    1.28fr .72fr;

  gap: 35px;

  align-items: center;

  margin:
    20px 0
    65px;

  padding: 12px;

  border:
    1px solid
    rgba(235,176,32,.15);

  border-radius: 21px;

  background:
    linear-gradient(
      135deg,
      rgba(235,176,32,.035),
      rgba(255,255,255,.008)
    );

  transition:
    opacity .3s ease,
    transform .3s ease;

}


.portfolio-featured.is-filtered-out {

  display: none;

}


/* Browser */

.portfolio-featured-visual {

  position: relative;

  perspective: 900px;

}


.portfolio-browser-shell {

  overflow: hidden;

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

  border-radius: 15px;

  background: #18191c;

  box-shadow:
    0 25px 55px
    rgba(0,0,0,.27);

  transition:
    transform .2s ease-out;

}


.portfolio-browser-top {

  min-height: 34px;

  display: flex;

  align-items: center;

  padding:
    7px 10px;

  border-bottom:
    1px solid
    var(--portfolio-border);

  background:
    #303135;

}


.portfolio-browser-dots {

  display: flex;

  gap: 4px;

}


.portfolio-browser-dots span {

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #626367;

}


.portfolio-browser-url {

  flex: 1;

  max-width: 230px;

  margin: auto;

  padding:
    4px 10px;

  border-radius: 5px;

  background:
    #222327;

  color:
    #6e6f72;

  font-size: 9px;

  text-align: center;

}


.portfolio-browser-live {

  color:
    var(--portfolio-gold);

  font-size: 14px;

}


.portfolio-featured-image {

  position: relative;

  overflow: hidden;

  min-height: 370px;

}


.portfolio-featured-image img {

  width: 100%;

  min-height: 370px;

  object-fit: cover;

  transition:
    transform .6s ease;

}


.portfolio-featured:hover
.portfolio-featured-image img {

  transform:
    scale(1.025);

}


.portfolio-media-shade {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(15,16,18,.25),
      transparent 45%
    );

}


/* Featured copy */

.portfolio-featured-copy {

  padding:
    20px
    20px
    20px
    0;

}


.portfolio-project-index {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 10px;

}


.portfolio-project-index > span {

  color:
    var(--portfolio-gold);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.3px;

}


.portfolio-project-index small {

  color:
    #737478;

  font-size: 10px;

  letter-spacing: .7px;

}


.portfolio-featured-copy h3 {

  margin:
    0 0
    14px;

  color: #fff;

  font-size:
    clamp(31px,3.5vw,41px);

  font-weight: 600;

  line-height: 1.12;

}


.portfolio-featured-copy h3 span {

  display: block;

  color:
    var(--portfolio-gold);

}


.portfolio-project-lead {

  color:
    var(--portfolio-muted);

  font-size: 14px;

  line-height: 1.8;

}


.portfolio-featured-details {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 18px;

  margin:
    25px 0;

  padding:
    17px 0;

  border-top:
    1px solid
    var(--portfolio-border);

  border-bottom:
    1px solid
    var(--portfolio-border);

}


.portfolio-featured-details > div {

  display: flex;

  flex-direction: column;

  gap: 4px;

}


.portfolio-featured-details span {

  margin-bottom: 4px;

  color:
    var(--portfolio-gold);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1px;

}


.portfolio-featured-details strong {

  color:
    #b9babc;

  font-size: 12px;

  font-weight: 400;

}


/* =========================================================
   TAGS + BUTTONS
========================================================= */

.portfolio-project-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

}


.portfolio-project-tags span {

  padding:
    5px 8px;

  border:
    1px solid
    rgba(235,176,32,.13);

  border-radius: 16px;

  color:
    #9d9ea1;

  font-size: 10px;

}


.portfolio-featured-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 22px;

}


.portfolio-quick-view-btn,
.portfolio-live-btn,
.portfolio-start-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  border-radius: 22px;

  font-size: 12px;

  font-weight: 600;

}


.portfolio-quick-view-btn {

  padding:
    9px 15px;

  border:
    1px solid
    var(--portfolio-gold);

  background:
    transparent;

  color:
    var(--portfolio-gold);

}


.portfolio-live-btn,
.portfolio-start-btn {

  padding:
    9px 15px;

  border:
    1px solid
    var(--portfolio-gold);

  background:
    var(--portfolio-gold);

  color:
    #222 !important;

}


/* =========================================================
   GRID HEADING
========================================================= */

.portfolio-grid-heading {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;

}


.portfolio-grid-heading h3 {

  margin: 0;

  color: #fff;

  font-size: 27px;

}


.portfolio-grid-heading > p {

  margin: 0;

  color:
    #77787b;

  font-size: 11px;

}


/* =========================================================
   PROJECT CARDS
========================================================= */

.portfolio-v2
.portfolio-item {

  margin-bottom: 22px;

}


.portfolio-v2-card {

  height: 100%;

  overflow: hidden;

  border:
    1px solid
    var(--portfolio-border);

  border-radius: 16px;

  background:
    var(--portfolio-card);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}


.portfolio-v2-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(235,176,32,.23);

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.16);

}


.portfolio-v2-media {

  position: relative;

  overflow: hidden;

  cursor: pointer;

  outline: none;

}


/* Keyboard / accessibility focus */

.portfolio-v2-media:focus-visible {

  box-shadow:
    inset 0 0 0 2px
    var(--portfolio-gold);

}


.portfolio-v2-media img,
.portfolio-v2-media video {

  width: 100%;

  display: block;

  transition:
    transform .55s ease;

}


.portfolio-v2-card:hover
.portfolio-v2-media > img {

  transform:
    scale(1.035);

}


.portfolio-v2-card-content {

  padding: 20px;

}


.portfolio-v2-card-content h3 {

  margin:
    0 0
    8px;

  color: #fff;

  font-size: 20px;

  line-height: 1.35;

}


.portfolio-v2-card-content > p {

  min-height: 52px;

  margin-bottom: 15px;

  color:
    var(--portfolio-muted);

  font-size: 12px;

  line-height: 1.7;

}


/* WEB MINI BROWSER */

.project-browser-mini {

  overflow: hidden;

  background: #191a1d;

}


.project-browser-header {

  display: flex;

  align-items: center;

  gap: 4px;

  min-height: 28px;

  padding:
    6px 9px;

  background:
    #303135;

}


.project-browser-header > span {

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    #67686b;

}


.project-browser-header small {

  margin-left: auto;

  color:
    #77787a;

  font-size: 9px;

}


.project-browser-mini img {

  aspect-ratio:
    16 / 9;

  object-fit: cover;

}


/* =========================================================
   CARD ACTIONS
========================================================= */

.portfolio-card-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-top: 19px;

  padding-top: 14px;

  border-top:
    1px solid
    var(--portfolio-border);

}


.portfolio-text-action {

  padding: 0;

  border: 0;

  background: none;

  color:
    var(--portfolio-gold);

  font-size: 11px;

}


.portfolio-card-icon-link {

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(235,176,32,.22);

  border-radius: 50%;

  color:
    var(--portfolio-gold) !important;

  transition:
    .25s ease;

}


.portfolio-card-icon-link:hover {

  background:
    var(--portfolio-gold);

  color:
    #222 !important;

}


/* =========================================================
   HOVER FOLLOW LABEL
========================================================= */

.portfolio-hover-label {

  position: absolute;

  left: 0;
  top: 0;

  z-index: 7;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(235,176,32,.35);

  border-radius: 16px;

  background:
    rgba(31,32,35,.94);

  color:
    var(--portfolio-gold);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: .7px;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%,-50%)
    scale(.8);

  transition:
    opacity .15s ease,
    transform .15s ease;

  white-space: nowrap;

}


.portfolio-v2-media:hover
.portfolio-hover-label {

  opacity: 1;

  transform:
    translate(-50%,-50%)
    scale(1);

}


/* =========================================================
   DATA CARD
========================================================= */

.portfolio-data-media {

  min-height: 260px;

  background:
    #191a1d;

}


.portfolio-data-media > img {

  width: 100%;

  min-height: 260px;

  object-fit: cover;

  opacity: .72;

}


.portfolio-data-overlay {

  position: absolute;

  inset: auto 0 0 0;

  padding:
    45px
    18px
    16px;

  background:
    linear-gradient(
      to top,
      rgba(20,21,24,.96),
      transparent
    );

}


.portfolio-data-overlay small {

  display: block;

  margin-top: 8px;

  color:
    var(--portfolio-gold);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1px;

}


/* Chart */

.portfolio-mini-chart {

  height: 65px;

  display: flex;

  align-items: flex-end;

  gap: 5px;

}


.portfolio-mini-chart span {

  flex: 1;

  height:
    var(--data-height);

  border-radius:
    3px 3px 0 0;

  background:
    linear-gradient(
      to top,
      rgba(235,176,32,.28),
      var(--portfolio-gold)
    );

  transform-origin:
    bottom;

  transition:
    transform .55s ease;

}


.portfolio-data-card:hover
.portfolio-mini-chart span {

  animation:
    portfolioBarRise
    .6s ease both;

}


@keyframes portfolioBarRise {

  from {

    transform:
      scaleY(.2);

  }

  to {

    transform:
      scaleY(1);

  }

}


/* Data points */

.portfolio-data-points {

  position: relative;

  height: 55px;

  border-bottom:
    1px solid
    rgba(235,176,32,.18);

}


.portfolio-data-points::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 50%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(235,176,32,.1),
      var(--portfolio-gold),
      rgba(235,176,32,.1)
    );

  transform:
    rotate(-6deg);

}


.portfolio-data-points span {

  position: absolute;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--portfolio-gold);

  box-shadow:
    0 0 9px
    rgba(235,176,32,.55);

}


.portfolio-data-points span:nth-child(1) {
  left: 5%;
  bottom: 8%;
}

.portfolio-data-points span:nth-child(2) {
  left: 25%;
  bottom: 22%;
}

.portfolio-data-points span:nth-child(3) {
  left: 47%;
  bottom: 34%;
}

.portfolio-data-points span:nth-child(4) {
  left: 70%;
  bottom: 44%;
}

.portfolio-data-points span:nth-child(5) {
  left: 92%;
  bottom: 61%;
}


/* =========================================================
   CONTENT CARDS
========================================================= */

.portfolio-content-media {

  min-height: 260px;

}


.portfolio-content-media img {

  min-height: 260px;

  object-fit: cover;

}


.portfolio-content-overlay {

  position: absolute;

  left: 14px;
  bottom: 14px;

  display: flex;

  flex-direction: column;

  padding:
    9px 11px;

  border:
    1px solid
    rgba(235,176,32,.18);

  border-radius: 9px;

  background:
    rgba(30,31,34,.9);

  backdrop-filter:
    blur(8px);

}


.portfolio-content-overlay span {

  color:
    var(--portfolio-gold);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1px;

}


.portfolio-content-overlay strong {

  margin-top: 2px;

  color:
    #ddd;

  font-size: 11px;

  font-weight: 500;

}


/* =========================================================
   CREATIVE COLLECTION
========================================================= */

.portfolio-creative-collection {

  display: grid;

  grid-template-columns:
    .65fr 1.35fr;

  gap: 25px;

  padding: 25px;

  border:
    1px solid
    rgba(235,176,32,.14);

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(235,176,32,.035),
      rgba(255,255,255,.008)
    );

}


.portfolio-creative-copy {

  display: flex;

  flex-direction: column;

  justify-content: center;

}


.portfolio-creative-copy h3 {

  margin:
    0 0
    10px;

  color: #fff;

  font-size: 31px;

}


.portfolio-creative-copy h3 span {

  color:
    var(--portfolio-gold);

}


.portfolio-creative-copy > p {

  color:
    var(--portfolio-muted);

  font-size: 13px;

  line-height: 1.75;

}


.portfolio-creative-open {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  align-self: flex-start;

  margin-top: 20px;

  padding:
    9px 14px;

  border:
    1px solid
    var(--portfolio-gold);

  border-radius: 20px;

  background: transparent;

  color:
    var(--portfolio-gold) !important;

  font-size: 11px;

  cursor: pointer;

}


.portfolio-hidden-gallery {

  display: none;

}


/* Mosaic */

.portfolio-creative-mosaic {

  display: grid;

  grid-template-columns:
    1.35fr .65fr .65fr;

  grid-template-rows:
    150px 150px;

  gap: 7px;

  min-width: 0;

}

.creative-mosaic-item {

  position: relative;

  overflow: hidden;

  border-radius: 10px;

  background:
    #1d1e21;

}


/* Large featured creative */

.creative-mosaic-item.creative-large {

  grid-column:
    1;

  grid-row:
    1 / 3;

}


/* Motion */

.portfolio-creative-mosaic
.creative-mosaic-item:nth-child(2) {

  grid-column:
    2;

  grid-row:
    1;

}


/* Work 03 */

.portfolio-creative-mosaic
.creative-mosaic-item:nth-child(3) {

  grid-column:
    3;

  grid-row:
    1;

}


/* Work 04 */

.portfolio-creative-mosaic
.creative-mosaic-item:nth-child(4) {

  grid-column:
    2;

  grid-row:
    2;

}


/* Work 05 */

.portfolio-creative-mosaic
.creative-mosaic-item:nth-child(5) {

  grid-column:
    3;

  grid-row:
    2;

}


.creative-mosaic-item img,
.creative-mosaic-item video {

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .4s ease;

}


.creative-mosaic-item:hover img,
.creative-mosaic-item:hover video {

  transform:
    scale(1.05);

}


.creative-mosaic-item > span {

  position: absolute;

  left: 8px;
  bottom: 8px;

  padding:
    4px 7px;

  border-radius: 10px;

  background:
    rgba(25,26,29,.88);

  color:
    var(--portfolio-gold);

  font-size: 8px;

  font-weight: 700;

  opacity: 0;

  transform:
    translateY(4px);

  transition:
    .25s ease;

}


.creative-mosaic-item:hover > span {

  opacity: 1;

  transform:
    translateY(0);

}


/* =========================================================
   FINAL CTA
========================================================= */

.portfolio-final-cta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  margin:
    60px 0
    30px;

  padding: 28px;

  border:
    1px solid
    rgba(235,176,32,.18);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at right,
      rgba(235,176,32,.07),
      transparent 42%
    ),
    var(--portfolio-card);

}


.portfolio-final-cta > div {

  max-width: 650px;

}


.portfolio-final-cta h3 {

  margin:
    0 0
    8px;

  color: #fff;

  font-size: 28px;

}


.portfolio-final-cta h3 span {

  color:
    var(--portfolio-gold);

}


.portfolio-final-cta p {

  margin: 0;

  color:
    var(--portfolio-muted);

  font-size: 12px;

  line-height: 1.7;

}


.portfolio-start-btn {

  flex:
    0 0 auto;

}


/* =========================================================
   PROJECT DETAILS DRAWER
========================================================= */

/* Variables are repeated here because the drawer
   is moved outside #portfolio and directly into <body>. */

.portfolio-project-drawer,
.portfolio-drawer-backdrop {

  --portfolio-gold: #ebb020;

  --portfolio-border:
    rgba(255, 255, 255, .07);

  --portfolio-muted:
    #96979a;

}


/* -----------------------------------------
   FULL-PAGE BACKDROP
----------------------------------------- */

.portfolio-drawer-backdrop {

  position: fixed;

  inset: 0;

  z-index: 30000;

  background:
    rgba(8, 9, 10, .82);

  backdrop-filter:
    blur(7px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .3s ease,
    visibility .3s ease;

}


/* -----------------------------------------
   DETAILS PANEL
----------------------------------------- */

.portfolio-project-drawer {

  position: fixed;

  top: 0;
  right: 0;

  z-index: 30001;

  width:
    min(520px, 100vw);

  height:
    100dvh;

  padding:
    24px 32px
    45px;

  border-left:
    1px solid
    rgba(235, 176, 32, .22);

  background:
    #202125;

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

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  transform:
    translateX(105%);

  transition:
    transform .4s
    cubic-bezier(.2, .8, .2, 1);

}


/* -----------------------------------------
   OPEN STATE
----------------------------------------- */

body.portfolio-details-open
.portfolio-project-drawer {

  transform:
    translateX(0);

}


body.portfolio-details-open
.portfolio-drawer-backdrop {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}


/* Prevent background page interaction */

body.portfolio-details-open {

  overflow: hidden;

}
.portfolio-drawer-close {

  position: sticky;

  top: 0;

  z-index: 5;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-left: auto;

  border:
    1px solid
    rgba(235, 176, 32, .25);

  border-radius: 50%;

  background:
    #292a2e;

  color:
    #bbb;

  font-size: 19px;

  cursor: pointer;

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

}


.portfolio-drawer-close:hover {

  border-color:
    var(--portfolio-gold);

  background:
    var(--portfolio-gold);

  color:
    #222;

}


.portfolio-drawer-inner {

  padding:
    35px 5px;

}


.portfolio-drawer-category {

  display: block;

  color:
    var(--portfolio-gold);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.4px;

}


.portfolio-drawer-inner h2 {

  margin:
    8px 0
    14px;

  color: #fff;

  font-size: 33px;

  line-height: 1.2;

}


.portfolio-drawer-summary {

  color:
    var(--portfolio-muted);

  font-size: 13px;

  line-height: 1.8;

}


.portfolio-drawer-section {

  margin-top: 28px;

  padding-top: 20px;

  border-top:
    1px solid
    var(--portfolio-border);

}


.portfolio-drawer-section > span {

  display: block;

  margin-bottom: 12px;

  color:
    var(--portfolio-gold);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.2px;

}


.portfolio-drawer-list {

  display: grid;

  gap: 7px;

}


.portfolio-drawer-list div {

  position: relative;

  padding-left: 15px;

  color:
    #a5a6a9;

  font-size: 12px;

}


.portfolio-drawer-list div::before {

  content: "";

  position: absolute;

  left: 0;
  top: 7px;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    var(--portfolio-gold);

}


.portfolio-drawer-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}


.portfolio-drawer-tags span {

  padding:
    5px 8px;

  border:
    1px solid
    rgba(235,176,32,.16);

  border-radius: 15px;

  color:
    #aaa;

  font-size: 10px;

}


.portfolio-drawer-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 30px;

}


.portfolio-drawer-actions a {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    9px 14px;

  border:
    1px solid
    var(--portfolio-gold);

  border-radius: 20px;

  color:
    var(--portfolio-gold) !important;

  font-size: 11px;

}


.portfolio-drawer-actions a:first-child {

  background:
    var(--portfolio-gold);

  color:
    #222 !important;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

  .portfolio-v2-intro {

    grid-template-columns:
      1fr;

    gap: 15px;

  }


  .portfolio-toolbar {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .portfolio-v2-filter {

    justify-content:
      flex-start;

  }


  .portfolio-featured {

    grid-template-columns:
      1fr;

  }


  .portfolio-featured-copy {

    padding:
      20px;

  }


  .portfolio-creative-collection {

    grid-template-columns:
      1fr;

  }


  .portfolio-final-cta {

    flex-direction:
      column;

    align-items:
      flex-start;

  }

}


@media (max-width: 767px) {

  .portfolio-mode-switch {

    width: 100%;

  }


  .portfolio-mode-btn {

    flex: 1;

  }


  .portfolio-v2-filter {

    width: 100%;

  }


  .portfolio-featured-image,
  .portfolio-featured-image img {

    min-height:
      230px;

  }


  .portfolio-featured-details {

    grid-template-columns:
      1fr;

  }


  .portfolio-creative-mosaic {

    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      180px 120px 120px;

  }


  .creative-mosaic-item.creative-large {

    grid-column:
      1 / 3;

    grid-row:
      auto;

  }


  .portfolio-grid-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .portfolio-final-cta {

    padding:
      22px 18px;

  }


  .portfolio-start-btn {

    width: 100%;

  }

}


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

  #portfolio * {

    animation:
      none !important;

    transition-duration:
      .01ms !important;

  }

}


/* =========================================================
   CREATIVE FULL GALLERY
========================================================= */


/* Keep Magnific above the whole portfolio UI */

.mfp-bg {

  z-index:
    31000 !important;

}


.mfp-wrap {

  z-index:
    31001 !important;

}


/* -----------------------------------------
   Mosaic buttons reset
----------------------------------------- */
button.creative-mosaic-item {

  display: block;

  width: 100%;

  height: 100%;

  min-width: 0;

  padding: 0;

  border: 0;

  border-radius: 10px;

  background: #1d1e21;

  appearance: none;

  -webkit-appearance: none;

  overflow: hidden;

  cursor: pointer;

  font-family: inherit;

}


/* -----------------------------------------
   Main gallery button
----------------------------------------- */

.portfolio-creative-open {

  appearance:
    none;

  -webkit-appearance:
    none;

}


/* -----------------------------------------
   Motion popup
----------------------------------------- */

.creative-video-popup {

  position:
    relative;

  width:
    min(900px, 92vw);

  margin:
    40px auto;

  padding:
    24px;

  border:
    1px solid
    rgba(235, 176, 32, .22);

  border-radius:
    17px;

  background:
    #202125;

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

}


.creative-video-popup-inner > span {

  display:
    block;

  margin-bottom:
    6px;

  color:
    #ebb020;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    1.3px;

}


.creative-video-popup-inner h3 {

  margin:
    0 0
    18px;

  color:
    #fff;

  font-size:
    26px;

}


.creative-video-popup video {

  display:
    block;

  width:
    100%;

  max-height:
    72vh;

  border-radius:
    11px;

  background:
    #111;

}


/* -----------------------------------------
   Gallery counter
----------------------------------------- */

.creative-gallery-popup
.mfp-counter {

  color:
    #ebb020;

}

/* =========================================================
   CREATIVE GALLERY NAVIGATION ARROWS
========================================================= */


/* Main arrow button */

.creative-gallery-popup
.mfp-arrow {

  position: absolute !important;

  top: 50% !important;

  width: 54px !important;

  height: 54px !important;

  margin-top: -27px !important;

  padding: 0 !important;

  border:
    1px solid
    rgba(235, 176, 32, .55) !important;

  border-radius:
    50% !important;

  background:
    rgba(31, 32, 35, .88) !important;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  opacity:
    1 !important;

  box-shadow:
    0 8px 25px
    rgba(0, 0, 0, .35),

    inset 0 0 0 1px
    rgba(255, 255, 255, .02);

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;

}


/* Position */

.creative-gallery-popup
.mfp-arrow-left {

  left:
    28px !important;

}


.creative-gallery-popup
.mfp-arrow-right {

  right:
    28px !important;

}


/* Remove Magnific Popup's default arrow triangles */

.creative-gallery-popup
.mfp-arrow::before {

  display:
    none !important;

}


.creative-gallery-popup
.mfp-arrow::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 11px;

  height: 11px;

  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  border-right:
    2px solid
    #ebb020 !important;

  border-bottom:
    2px solid
    #ebb020 !important;

  transition:
    border-color .25s ease;

}


/* Left chevron */

.creative-gallery-popup
.mfp-arrow-left::after {

  transform:
    translate(-35%, -50%)
    rotate(135deg);

}


/* Right chevron */

.creative-gallery-popup
.mfp-arrow-right::after {

  transform:
    translate(-65%, -50%)
    rotate(-45deg);

}


/* Hover */

.creative-gallery-popup
.mfp-arrow:hover {

  border-color:
    #ebb020 !important;

  background:
    #ebb020 !important;

  box-shadow:
    0 0 0 5px
    rgba(235, 176, 32, .08),

    0 10px 28px
    rgba(0, 0, 0, .4),

    0 0 22px
    rgba(235, 176, 32, .18);

}


/* Arrow becomes dark when button turns gold */

.creative-gallery-popup
.mfp-arrow:hover::after {

  border-color:
    #202125 !important;

}

/* Small directional movement */

.creative-gallery-popup
.mfp-arrow-left:hover::after {

  transform:
    translate(-50%, -50%)
    rotate(135deg);

}


.creative-gallery-popup
.mfp-arrow-right:hover::after {

  transform:
    translate(-50%, -50%)
    rotate(-45deg);

}

/* =========================================================
   GALLERY ARROW LABELS
========================================================= */

.creative-gallery-popup
.mfp-arrow {

  overflow:
    visible !important;

}


/* Label */

.creative-gallery-popup
.mfp-arrow-left {

  --gallery-nav-label:
    "PREV";

}


.creative-gallery-popup
.mfp-arrow-right {

  --gallery-nav-label:
    "NEXT";

}


.creative-gallery-popup
.mfp-arrow span {

  display:
    none;

}

@media (max-width: 767px) {

  .creative-gallery-popup
  .mfp-arrow {

    width:
      44px !important;

    height:
      44px !important;

    margin-top:
      -22px !important;

  }


  .creative-gallery-popup
  .mfp-arrow-left {

    left:
      8px !important;

  }


  .creative-gallery-popup
  .mfp-arrow-right {

    right:
      8px !important;

  }


  .creative-gallery-popup
  .mfp-arrow::after {

    width:
      9px;

    height:
      9px;

  }

}

/* =========================================================
   READABILITY PASS — PORTFOLIO
========================================================= */


/* Main intro */

#portfolio .portfolio-v2-intro > p,
#portfolio .portfolio-project-lead {

  font-size: 16px;

  line-height: 1.8;

}


/* Eyebrows */

#portfolio .portfolio-v2-eyebrow {

  font-size: 12px;

}


/* Toolbar controls */

#portfolio .portfolio-mode-btn,
#portfolio .portfolio-v2-filter a {

  font-size: 13px;

}


#portfolio .portfolio-v2-filter small {

  font-size: 11px;

}


/* Project metadata */

#portfolio .portfolio-project-index > span {

  font-size: 12px;

}


#portfolio .portfolio-project-index small {

  font-size: 11px;

}


/* Featured project details */

#portfolio .portfolio-featured-details span {

  font-size: 12px;

}


#portfolio .portfolio-featured-details strong {

  font-size: 11px;

}


/* Project tags */

#portfolio .portfolio-project-tags span {

  font-size: 12px;

  padding:
    5px 9px;

}


/* Buttons */

#portfolio .portfolio-quick-view-btn,
#portfolio .portfolio-live-btn,
#portfolio .portfolio-start-btn,
#portfolio .portfolio-text-action,
#portfolio .portfolio-creative-open {

  font-size: 10px;

}


/* Project cards */

#portfolio .portfolio-v2-card-content > p,
#portfolio .portfolio-creative-copy > p,
#portfolio .portfolio-final-cta p {

  font-size: 15px;

  line-height: 1.75;

}


/* Project explorer status */

#portfolio .portfolio-grid-heading > p {

  font-size: 12px;

}


/* Cursor hover label */

#portfolio .portfolio-hover-label {

  font-size: 11px;

}


/* Content overlay */

#portfolio .portfolio-content-overlay span {

  font-size: 11px;

}


#portfolio .portfolio-content-overlay strong {

  font-size: 13px;

}


/* Creative tile hover text */

#portfolio .creative-mosaic-item > span {

  font-size: 11px;

}


/* Project details drawer */

.portfolio-drawer-category {

  font-size: 12px;

}


.portfolio-drawer-summary {

  font-size: 13px;

  line-height: 1.8;

}


.portfolio-drawer-section > span {

  font-size: 12px;

}


.portfolio-drawer-list div {

  font-size: 11px;

}


.portfolio-drawer-tags span {

  font-size: 12px;

}


.portfolio-drawer-actions a {

  font-size: 13px;

}

/* =========================================================
   TALL DESKTOP READABILITY
========================================================= */

@media
(min-width: 992px)
and
(min-height: 760px) {


  #resume
  .resume-v2-intro > p,

  #resume
  .resume-section-heading > p {

    font-size:
      17px;

  }


  #resume
  .resume-service-copy > p {

    font-size:
      16px;

  }


  #resume
  .resume-v2-eyebrow,

  #resume
  .resume-service-number {

    font-size:
      13px;

  }


  #resume
  .resume-capability-tab span,

  #resume
  .resume-service-checks span {

    font-size:
      14px;

  }


  #resume
  .resume-service-tech span {

    font-size:
      13px;

  }

}