@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');


/* =====================================================
   RESET
===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #0b0c10;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

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

img {
  display: block;
  width: 100%;
}

button {
  font: inherit;
}

section {
  scroll-margin-top: 2rem;
}

/* =====================================================
   VARIABLES
===================================================== */

:root {
  --black: #0b0c10;
  --black-soft: #11131a;
  --panel: #151720;

  --white: #ffffff;
  --text: #d3d5dc;
  --muted: #8b8f9a;

  --blue: #627cf1;
  --purple: #8d80c7;
  --orange: #d59a67;

  --gradient:
    linear-gradient(
      105deg,
      #5f79ef 0%,
      #8d82c8 50%,
      #d79b68 100%
    );

  --heading-font: 'Barlow Condensed', sans-serif;
  --body-font: 'Inter', sans-serif;
}


/* =====================================================
   HEADER
===================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  z-index: 1000;

  background: rgba(11, 12, 16, 0.72);

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

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

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.site-header.scrolled {
  background: rgba(11, 12, 16, 0.96);

  border-color: rgba(255, 255, 255, 0.1);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.2);
}

.site-header::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background: var(--gradient);
}


/* =====================================================
   NAV
===================================================== */

.nav-container {
  width: min(1180px, calc(100% - 48px));
  height: 78px;

  margin: 0 auto;

  display: flex;
  align-items: center;

  gap: 36px;
}


/* LOGO */

.site-logo {
  display: flex;
  align-items: baseline;

  gap: 5px;

  font-family: var(--heading-font);
  text-transform: uppercase;
  line-height: 1;
}

.logo-main {
  font-size: 2rem;
  font-weight: 700;

  letter-spacing: 0.5px;
}

.logo-accent {
  font-size: 1.55rem;
  font-weight: 500;

  background: var(--gradient);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


/* DESKTOP NAV */

.desktop-nav {
  margin-left: auto;

  display: flex;
  align-items: center;

  gap: 30px;
}

.desktop-nav a {
  position: relative;

  color: rgba(255, 255, 255, 0.68);

  font-size: 0.8rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 1px;

  transition: color 0.2s ease;
}

.desktop-nav a:hover {
  color: #ffffff;
}

.desktop-nav a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -9px;

  width: 100%;
  height: 2px;

  background: var(--gradient);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.2s ease;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}


/* NAV CTA */

.nav-cta {
  padding: 11px 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;

  background: rgba(255, 255, 255, 0.04);

  color: #ffffff;

  font-size: 0.78rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.8px;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.nav-cta:hover {
  background: rgba(255, 255, 255, 0.09);

  border-color: rgba(255, 255, 255, 0.4);

  transform: translateY(-1px);
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.menu-toggle {
  width: 42px;
  height: 42px;

  margin-left: auto;

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

  gap: 6px;

  border: 0;

  background: transparent;

  cursor: pointer;
}

.menu-toggle span {
  width: 25px;
  height: 2px;

  background: #ffffff;

  transition:
    transform 0.2s ease,
    opacity 0.18s ease;
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* =====================================================
   MOBILE NAV
===================================================== */

.mobile-nav {
  position: absolute;
  top: 78px;
  left: 0;

  width: 100%;

  display: flex;
  flex-direction: column;

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transform: translateY(-8px);

  background: rgba(11, 12, 16, 0.98);

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

  transition:
    max-height 0.22s ease,
    opacity 0.18s ease,
    transform 0.22s ease;
}

.mobile-nav.active {
  max-height: 520px;

  opacity: 1;

  transform: translateY(0);
}

.mobile-nav a {
  width: calc(100% - 40px);

  margin: 0 auto;
  padding: 16px 0;

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

  color: rgba(255, 255, 255, 0.84);

  font-size: 0.88rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 1px;
}

.mobile-nav-cta {
  margin-top: 12px !important;
  margin-bottom: 20px !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  text-align: center;
}


/* =====================================================
   HERO
===================================================== */

.hero {
  position: relative;

  min-height:
    min(
      860px,
      calc(100vh - 60px)
    );

  padding:
    110px 0
    85px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 70% 22%,
      rgba(95, 121, 239, 0.11),
      transparent 31%
    ),
    radial-gradient(
      circle at 95% 76%,
      rgba(215, 155, 104, 0.07),
      transparent 29%
    ),
    #0b0c10;

  color: #ffffff;
}


/* =====================================================
   BACKGROUND GRID
===================================================== */

.hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 48px 48px;

  pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.hero-container {
  position: relative;

  z-index: 2;

  width:
    min(
      1380px,
      calc(100% - 64px)
    );

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(470px, 0.88fr)
    minmax(620px, 1.12fr);

  align-items: center;

  gap:
    clamp(
      55px,
      4.5vw,
      82px
    );
}


/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content {
  position: relative;

  z-index: 3;

  max-width: 610px;
}


/* =====================================================
   EYEBROW
===================================================== */

.hero-eyebrow {
  margin-bottom: 19px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size: 0.7rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1.75px;
}


/* =====================================================
   TITLE
===================================================== */

.hero-title {
  max-width: 640px;

  font-family: var(--heading-font);

  font-size:
    clamp(
      4.4rem,
      5vw,
      6rem
    );

  font-weight: 600;

  line-height: 0.89;

  letter-spacing: -1px;

  text-transform: uppercase;
}


.hero-title span {
  display: block;

  margin-top: 8px;

  background: var(--gradient);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


/* =====================================================
   DESCRIPTION
===================================================== */

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

  margin-top: 25px;

  color:
    rgba(255, 255, 255, 0.64);

  font-size: 0.94rem;
  line-height: 1.7;
}


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

.hero-actions {
  margin-top: 28px;

  display: flex;
  align-items: center;

  gap: 11px;
}


.hero .btn {
  min-height: 48px;

  padding:
    0 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 4px;

  font-size: 0.69rem;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: 0.8px;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.hero .btn-primary {
  border: 1px solid transparent;

  background: var(--gradient);

  color: #0d0e12;
}


.hero .btn-primary:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 9px 22px
    rgba(98, 124, 241, 0.16);
}


.hero .btn-secondary {
  border:
    1px solid
    rgba(255, 255, 255, 0.21);

  background: transparent;

  color: #ffffff;
}


.hero .btn-secondary:hover {
  background:
    rgba(255, 255, 255, 0.055);

  border-color:
    rgba(255, 255, 255, 0.35);

  transform:
    translateY(-2px);
}


/* =====================================================
   NOTE
===================================================== */

.hero-note {
  margin-top: 31px;

  display: flex;
  align-items: flex-start;

  gap: 13px;
}


.hero-note-line {
  width: 34px;
  height: 1px;

  flex: 0 0 34px;

  margin-top: 8px;

  background: var(--gradient);
}


.hero-note p {
  max-width: 400px;

  color:
    rgba(255, 255, 255, 0.4);

  font-size: 0.7rem;
  line-height: 1.6;
}


/* =====================================================
   HERO VISUAL
===================================================== */

.hero-visual {
  position: relative;

  width: 100%;

  min-width: 0;
}


/* =====================================================
   COLOR ACCENT BEHIND PHOTO
===================================================== */

.hero-visual-accent {
  position: absolute;

  top: -22px;
  right: -24px;

  width: 72%;
  height: 86%;

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(95, 121, 239, 0.52),
      rgba(141, 130, 200, 0.4),
      rgba(215, 155, 104, 0.5)
    );

  opacity: 0.58;
}


/* =====================================================
   PHOTO
===================================================== */

.hero-photo-wrap {
  position: relative;

  z-index: 2;

  width: 100%;

  aspect-ratio: 1.36 / 1;

  overflow: hidden;

  border-radius: 10px;

  background: #151720;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  box-shadow:
    0 24px 55px
    rgba(0, 0, 0, 0.3);

  transform-style: preserve-3d;

  transition:
    transform 0.2s ease-out;
}


.hero-photo {
  display: block;

  width: 100%;
  height: 100%;

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

  filter:
    brightness(0.97)
    contrast(1.02)
    saturate(1.03);
}


/* =====================================================
   PHOTO LABEL
===================================================== */

.hero-photo-label {
  position: absolute;

  left: 18px;
  bottom: 18px;

  padding:
    10px 13px;

  display: flex;
  flex-direction: column;

  gap: 2px;

  background:
    rgba(9, 10, 14, 0.82);

  border:
    1px solid
    rgba(255, 255, 255, 0.1);

  border-radius: 4px;
}


.hero-photo-label span {
  color:
    rgba(255, 255, 255, 0.47);

  font-size: 0.57rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 1.2px;
}


.hero-photo-label strong {
  color: #ffffff;

  font-family: var(--heading-font);

  font-size: 1.15rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.4px;
}


/* =====================================================
   HERO BOTTOM
===================================================== */

.hero-bottom {
  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 25px;

  display: flex;
  align-items: center;

  gap: 14px;

  color:
    rgba(255, 255, 255, 0.28);

  font-size: 0.57rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1.25px;

  transform:
    translateX(-50%);
}


.hero-bottom-line {
  width: 42px;
  height: 1px;

  background:
    rgba(255, 255, 255, 0.14);
}


/* =====================================================
   REVEAL STATES
===================================================== */

.hero .reveal-item,
.hero [data-reveal] {
  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity 0.6s ease,
    transform 0.6s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.hero .reveal-item.is-visible,
.hero [data-reveal].is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =====================================================
   HERO BOTTOM REVEAL FIX
===================================================== */

.hero-bottom.reveal-item,
.hero-bottom[data-reveal] {
  opacity: 0;

  transform:
    translateX(-50%)
    translateY(20px);
}


.hero-bottom.reveal-item.is-visible,
.hero-bottom[data-reveal].is-visible {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1550px) {

  .hero {
    min-height: 860px;
  }


  .hero-container {
    width:
      min(
        1440px,
        calc(100% - 90px)
      );

    grid-template-columns:
      minmax(500px, 0.86fr)
      minmax(680px, 1.14fr);

    gap: 90px;
  }


  .hero-content {
    max-width: 630px;
  }


  .hero-title {
    max-width: 660px;

    font-size: 6rem;
  }


  .hero-photo-wrap {
    aspect-ratio: 1.38 / 1;
  }

}


/* =====================================================
   SMALL DESKTOP
===================================================== */

@media (max-width: 1200px) {

  .hero {
    min-height: 720px;

    padding:
      110px 0
      80px;
  }


  .hero-container {
    width:
      calc(100% - 48px);

    grid-template-columns:
      minmax(380px, 0.9fr)
      minmax(480px, 1.1fr);

    gap: 45px;
  }


  .hero-title {
    font-size:
      clamp(
        3.8rem,
        5.7vw,
        5.2rem
      );
  }


  .hero-description {
    font-size: 0.9rem;
  }


  .hero-photo-wrap {
    aspect-ratio: 1.34 / 1;
  }


  .hero-visual-accent {
    top: -18px;
    right: -18px;
  }

}


/* =====================================================
   TABLET
===================================================== */
@media (max-width: 950px) {

  .hero {
    min-height: auto;

    padding:
      115px 0
      95px;
  }


  .hero-container {
    width:
      calc(100% - 40px);

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 48px;
  }


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

  .hero-content {
    width: 100%;

    max-width: 620px;

    margin: 0 auto;
  }


  .hero-title {
    max-width: 600px;

    font-size:
      clamp(
        3.6rem,
        8vw,
        4.8rem
      );

    line-height: 0.9;
  }


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

    margin-top: 22px;

    font-size: 0.88rem;
  }


  .hero-actions {
    margin-top: 24px;
  }


  .hero .btn {
    min-height: 46px;

    padding:
      0 20px;

    font-size: 0.66rem;
  }


  .hero-note {
    margin-top: 28px;
  }


  .hero-note p {
    max-width: 430px;

    font-size: 0.67rem;
  }


  /* =====================================================
     PHOTO BELOW CONTENT
  ====================================================== */

  .hero-visual {
    width: 100%;

    max-width: 720px;

    margin: 0 auto;
  }


  .hero-photo-wrap {
    width: 100%;

    aspect-ratio: 16 / 10;

    border-radius: 9px;
  }


  .hero-visual-accent {
    top: -16px;
    right: -14px;

    width: 72%;
    height: 87%;
  }


  .hero-photo-label {
    left: 15px;
    bottom: 15px;
  }


  /* =====================================================
     BOTTOM DETAIL
  ====================================================== */

  .hero-bottom {
    bottom: 24px;
  }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .hero {
    min-height: auto;

    padding:
      110px 0
      84px;

    display: block;
  }


  .hero-container {
    width:
      calc(100% - 32px);

    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 42px;
  }


  .hero-content {
    max-width: 100%;
  }


  .hero-eyebrow {
    margin-bottom: 15px;

    font-size: 0.6rem;

    letter-spacing: 1.4px;
  }


  .hero-title {
    max-width: 580px;

    font-size:
      clamp(
        3.15rem,
        14vw,
        4.5rem
      );

    line-height: 0.9;
  }


  .hero-title span {
    margin-top: 6px;
  }


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

    margin-top: 20px;

    font-size: 0.85rem;
  }


  .hero-actions {
    margin-top: 23px;
  }


  .hero-note {
    margin-top: 26px;
  }


  /* VISUAL */

  .hero-visual {
    width: 100%;
  }


  .hero-visual-accent {
    top: -13px;
    right: -9px;

    width: 73%;
    height: 85%;
  }


  .hero-photo-wrap {
    aspect-ratio: 4 / 3;

    border-radius: 8px;
  }


  .hero-photo-label {
    left: 13px;
    bottom: 13px;

    padding:
      9px 11px;
  }


  .hero-photo-label strong {
    font-size: 1.04rem;
  }


  .hero-bottom {
    bottom: 22px;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

  .hero {
    padding:
      102px 0
      80px;
  }


  .hero-title {
    font-size:
      clamp(
        3rem,
        15vw,
        4rem
      );
  }


  .hero-actions {
    width: 100%;

    flex-direction: column;

    align-items: stretch;
  }


  .hero .btn {
    width: 100%;
  }


  .hero-note p {
    font-size: 0.65rem;
  }


  .hero-visual-accent {
    top: -10px;
    right: -7px;
  }


  .hero-photo-label {
    left: 11px;
    bottom: 11px;

    padding:
      8px 10px;
  }


  .hero-photo-label span {
    font-size: 0.52rem;
  }


  .hero-photo-label strong {
    font-size: 0.96rem;
  }


  .hero-bottom {
    width: 100%;

    justify-content: center;

    gap: 9px;

    font-size: 0.51rem;
  }


  .hero-bottom-line {
    width: 24px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

  .hero .reveal-item,
  .hero [data-reveal] {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .hero-bottom.reveal-item,
  .hero-bottom[data-reveal] {
    transform:
      translateX(-50%);
  }


  .hero-photo-wrap,
  .hero .btn {
    transition: none;
  }

}


/* =====================================================
   VINYL WRAPS SECTION
===================================================== */

.wraps-section {
  position: relative;

  padding: 110px 0 105px;

  overflow: hidden;

  background: #f2f2f0;

  color: #111218;
}


/* BACKGROUND DETAIL */

.wraps-section::before {
  content: "";

  position: absolute;

  top: -250px;
  right: -220px;

  width: 560px;
  height: 560px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(98, 124, 241, 0.12),
      transparent 67%
    );

  pointer-events: none;
}

.wraps-section::after {
  content: "";

  position: absolute;

  left: -250px;
  bottom: -350px;

  width: 620px;
  height: 620px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(213, 154, 103, 0.1),
      transparent 68%
    );

  pointer-events: none;
}


/* =====================================================
   WRAPS CONTAINER
===================================================== */

.wraps-container {
  position: relative;

  z-index: 2;

  width: min(1180px, calc(100% - 48px));

  margin: 0 auto;
}


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

.wraps-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(280px, 0.65fr);

  align-items: end;

  gap: 70px;

  margin-bottom: 55px;
}

.wraps-heading {
  max-width: 700px;
}

.section-eyebrow {
  margin-bottom: 13px;

  color: #777b85;

  font-size: 0.7rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1.8px;
}

.section-title {
  font-family: var(--heading-font);

  color: #111218;

  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 600;

  line-height: 0.94;

  letter-spacing: -0.5px;
  text-transform: uppercase;
}

.section-title span {
  display: block;

  margin-top: 5px;

  background: var(--gradient);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.wraps-intro-copy {
  max-width: 390px;

  justify-self: end;
}

.wraps-intro-copy p {
  color: #62656e;

  font-size: 0.92rem;
  line-height: 1.7;
}


/* =====================================================
   WRAPS GRID
===================================================== */

.wraps-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(0, 0.65fr);

  grid-template-rows:
    repeat(2, 250px);

  gap: 18px;
}


/* =====================================================
   WRAP CARD
===================================================== */

.wrap-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border-radius: 10px;

  background: #151720;

  box-shadow:
    0 14px 35px rgba(25, 27, 34, 0.1);

  transform-style: preserve-3d;

  will-change: transform;

  transition:
    transform 0.18s ease-out,
    box-shadow 0.25s ease;
}

.wrap-card-large {
  grid-row: 1 / 3;
}


/* CARD IMAGE */

.wrap-card-image {
  position: absolute;

  inset: 0;

  overflow: hidden;
}

.wrap-card-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      0deg,
      rgba(8, 9, 13, 0.88) 0%,
      rgba(8, 9, 13, 0.28) 45%,
      transparent 75%
    );

  pointer-events: none;
}

.wrap-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.2s ease-out,
    filter 0.25s ease;

  will-change: transform;
}


/* CARD CONTENT */

.wrap-card-info {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 3;

  padding: 24px;
}

.wrap-card-info span {
  display: block;

  margin-bottom: 5px;

  color: #ffffff;

  font-family: var(--heading-font);

  font-size: 1.45rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.wrap-card-info p {
  color: rgba(255, 255, 255, 0.63);

  font-size: 0.78rem;
  line-height: 1.5;
}


/* LARGE CARD */

.wrap-card-large .wrap-card-info {
  padding: 30px;
}

.wrap-card-large .wrap-card-info span {
  font-size: 1.75rem;
}


/* HOVER */

.wrap-card.is-hovered {
  box-shadow:
    0 24px 55px rgba(25, 27, 34, 0.18);
}


/* =====================================================
   WRAPS BOTTOM
===================================================== */

.wraps-bottom {
  margin-top: 42px;

  display: flex;
  align-items: center;

  gap: 14px;
}

.wraps-bottom-line {
  width: 42px;
  height: 2px;

  background: var(--gradient);
}

.wraps-bottom p {
  color: #777a82;

  font-size: 0.76rem;
  font-weight: 500;
}

.wraps-link {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-left: 3px;

  color: #181a20;

  font-size: 0.76rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.7px;

  transition:
    gap 0.2s ease,
    opacity 0.2s ease,
    transform 0.15s ease;
}

.wraps-link:hover {
  gap: 12px;
}

.wraps-link.is-pressed {
  transform: translateY(1px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

  .desktop-nav,
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }


  .nav-container {
    width: calc(100% - 36px);

    height: 74px;
  }

  .mobile-nav {
    top: 74px;
  }


  /* HERO */

  .hero {
    min-height: 760px;

    max-height: none;
  }

  .hero-container {
    width: calc(100% - 36px);

    grid-template-columns:
      1fr
      1fr;

    gap: 40px;

    padding-top: 74px;
  }

  .hero-title {
    font-size:
      clamp(3rem, 6vw, 4.2rem);
  }

  .hero-visual-accent {
    right: -14px;
  }

  .hero-bottom {
    width: calc(100% - 36px);
  }


  /* WRAPS */

  .wraps-section {
    padding:
      90px 0
      90px;
  }

  .wraps-container {
    width: calc(100% - 36px);
  }

  .wraps-intro {
    gap: 45px;
  }

  .section-title {
    font-size:
      clamp(2.8rem, 6vw, 4.2rem);
  }

  .wraps-grid {
    grid-template-rows:
      repeat(2, 220px);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .nav-container {
    width: calc(100% - 30px);
  }


  .logo-main {
    font-size: 1.85rem;
  }

  .logo-accent {
    font-size: 1.42rem;
  }


  /* HERO */

  .hero {
    height: auto;
    min-height: 0;

    padding:
      120px 0
      90px;
  }

  .hero-container {
    width: calc(100% - 32px);

    padding-top: 0;

    display: flex;
    flex-direction: column;

    gap: 42px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-eyebrow {
    margin-bottom: 14px;

    font-size: 0.62rem;

    letter-spacing: 1.35px;
  }

  .hero-title {
    font-size:
      clamp(2.9rem, 13vw, 3.8rem);

    line-height: 0.96;
  }

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

    margin-top: 19px;

    font-size: 0.9rem;
    line-height: 1.55;
  }

  .hero-actions {
    width: 100%;

    margin-top: 24px;

    gap: 9px;
  }

  .btn {
    flex: 1;

    min-width: 0;

    padding-left: 12px;
    padding-right: 12px;

    font-size: 0.68rem;
  }

  .hero-note {
    margin-top: 28px;
  }

  .hero-note p {
    font-size: 0.7rem;
  }

  .hero-visual {
    width: 100%;
    max-width: none;
  }

  .hero-visual-accent {
    top: 18px;
    right: -8px;

    width: 92%;
    height: 94%;
  }

  .hero-photo {
    aspect-ratio: 4 / 3;
  }

  .hero-photo-label {
    left: 13px;
    bottom: 13px;
  }

  .hero-bottom {
    bottom: 24px;

    width: calc(100% - 32px);

    justify-content: center;

    font-size: 0.56rem;
  }

  .hero-bottom-line {
    width: 26px;
  }


  /* WRAPS */

  .wraps-section {
    padding:
      75px 0
      80px;
  }

  .wraps-container {
    width: calc(100% - 32px);
  }

  .wraps-intro {
    display: block;

    margin-bottom: 38px;
  }

  .section-eyebrow {
    margin-bottom: 11px;

    font-size: 0.63rem;
  }

  .section-title {
    max-width: 520px;

    font-size:
      clamp(2.65rem, 12vw, 3.6rem);
  }

  .wraps-intro-copy {
    max-width: 470px;

    margin-top: 21px;
  }

  .wraps-intro-copy p {
    font-size: 0.86rem;
    line-height: 1.65;
  }


  .wraps-grid {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      330px 210px;

    gap: 12px;
  }

  .wrap-card-large {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .wrap-card {
    border-radius: 8px;
  }

  .wrap-card-info {
    padding: 16px;
  }

  .wrap-card-large .wrap-card-info {
    padding: 20px;
  }

  .wrap-card-info span {
    font-size: 1.2rem;
  }

  .wrap-card-large .wrap-card-info span {
    font-size: 1.5rem;
  }

  .wrap-card-info p {
    font-size: 0.69rem;
  }

  .wraps-bottom {
    margin-top: 31px;

    flex-wrap: wrap;

    gap: 10px;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

  .hero {
    padding-top: 110px;
  }

  .hero-title {
    font-size: 2.85rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .hero-bottom {
    gap: 9px;

    letter-spacing: 1px;
  }


  .wraps-grid {
    grid-template-columns: 1fr;

    grid-template-rows: none;
  }

  .wrap-card,
  .wrap-card-large {
    grid-column: auto;
    grid-row: auto;

    min-height: 260px;
  }

  .wrap-card-large {
    min-height: 330px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

  html {
    scroll-behavior: auto;
  }

  .reveal-item,
  [data-reveal],
  .hero-visual.reveal-item,
  .hero-visual[data-reveal],
  .hero-bottom.reveal-item,
  .hero-bottom[data-reveal] {
    opacity: 1;

    transform: none;

    transition: none;
  }


  /* KEEP HERO BOTTOM CENTERED */

  .hero-bottom.reveal-item,
  .hero-bottom[data-reveal] {
    transform: translateX(-50%);
  }


  .hero-photo-wrap,
  .wrap-card {
    transform: none !important;

    transition: none;
  }

  .hero-photo,
  .wrap-card-image img {
    transition: none;
  }

  .btn-primary::after {
    display: none;
  }

}

/* =====================================================
   LIGHTING SECTION
===================================================== */

.lighting-section {
  position: relative;

  padding: 110px 0 115px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 30%,
      rgba(98, 124, 241, 0.1),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 80%,
      rgba(213, 154, 103, 0.07),
      transparent 28%
    ),
    #0b0c10;

  color: #ffffff;
}


/* SUBTLE BACKGROUND GRID */

.lighting-section::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 52px 52px;

  pointer-events: none;
}


/* TOP GRADIENT LINE */

.lighting-section::after {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background: var(--gradient);
}


/* =====================================================
   CONTAINER
===================================================== */

.lighting-container {
  position: relative;

  z-index: 2;

  width: min(1180px, calc(100% - 48px));

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(330px, 0.72fr)
    minmax(0, 1.28fr);

  align-items: center;

  gap: 80px;
}


/* =====================================================
   LIGHTING CONTENT
===================================================== */

.lighting-content {
  max-width: 470px;
}


/* EYEBROW */

.lighting-eyebrow {
  margin-bottom: 14px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.7rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1.8px;
}


/* TITLE */

.lighting-title {
  font-family: var(--heading-font);

  font-size: clamp(3rem, 4.5vw, 4.6rem);
  font-weight: 600;

  line-height: 0.95;

  letter-spacing: -0.4px;

  text-transform: uppercase;
}

.lighting-title span {
  display: block;

  margin-top: 5px;

  background: var(--gradient);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


/* =====================================================
   LIGHTING COPY
===================================================== */

.lighting-copy {
  margin-top: 25px;
}

.lighting-copy > p {
  max-width: 430px;

  color: rgba(255, 255, 255, 0.59);

  font-size: 0.92rem;
  line-height: 1.7;
}


/* =====================================================
   LIGHTING DETAILS
===================================================== */

.lighting-details {
  margin-top: 28px;

  display: flex;
  flex-direction: column;

  gap: 13px;
}

.lighting-detail {
  display: flex;
  align-items: center;

  gap: 12px;
}

.lighting-detail-mark {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: var(--gradient);

  box-shadow:
    0 0 12px rgba(113, 125, 242, 0.38);
}

.lighting-detail p {
  color: rgba(255, 255, 255, 0.72);

  font-size: 0.79rem;
  line-height: 1.4;
}


/* =====================================================
   LIGHTING LINK
===================================================== */

.lighting-link {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  margin-top: 31px;

  color: #ffffff;

  font-size: 0.76rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.8px;

  transition:
    gap 0.2s ease,
    opacity 0.2s ease;
}

.lighting-link span {
  font-size: 1rem;

  transition: transform 0.2s ease;
}

.lighting-link:hover {
  gap: 12px;
}

.lighting-link:hover span {
  transform: translateX(2px);
}


/* =====================================================
   LIGHTING GALLERY
===================================================== */

.lighting-gallery {
  min-width: 0;
}


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

.lighting-featured {
  position: relative;

  overflow: hidden;

  border-radius: 12px;

  background: #151720;

  border: 1px solid rgba(255, 255, 255, 0.09);

  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.32);
}

.lighting-featured-image {
  position: relative;

  overflow: hidden;

  aspect-ratio: 16 / 10;

  background: #111218;
}

.lighting-featured-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      0deg,
      rgba(8, 9, 13, 0.68) 0%,
      transparent 42%
    );

  pointer-events: none;
}

.lighting-featured-image img {
  width: 100%;
  height: 100%;

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

  opacity: 1;

  transform: scale(1);

  filter:
    brightness(0.93)
    contrast(1.04)
    saturate(1.08);

  transition:
    opacity 0.18s ease,
    transform 0.4s ease,
    filter 0.4s ease;
}


/* JS IMAGE CHANGE */

.lighting-featured-image img.is-changing {
  opacity: 0;

  transform: scale(1.025);
}


/* IMAGE HOVER */

.lighting-featured:hover
.lighting-featured-image img:not(.is-changing) {
  transform: scale(1.025);

  filter:
    brightness(0.98)
    contrast(1.05)
    saturate(1.12);
}


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

.lighting-featured-label {
  position: absolute;

  left: 20px;
  bottom: 18px;

  z-index: 3;

  padding: 10px 13px;

  display: flex;
  flex-direction: column;

  gap: 2px;

  background: rgba(9, 10, 14, 0.78);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 4px;

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

.lighting-featured-label span {
  color: rgba(255, 255, 255, 0.48);

  font-size: 0.58rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 1.3px;
}

.lighting-featured-label strong {
  font-family: var(--heading-font);

  color: #ffffff;

  font-size: 1.15rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.4px;
}


/* =====================================================
   LIGHTING THUMBNAILS
===================================================== */

.lighting-thumbnails {
  margin-top: 14px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


/* =====================================================
   THUMBNAIL BUTTON
===================================================== */

.lighting-thumb {
  position: relative;

  min-width: 0;
  height: 110px;

  padding: 0;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;

  background: #151720;

  color: #ffffff;

  cursor: pointer;

  opacity: 0.58;

  transition:
    opacity 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.lighting-thumb:hover {
  opacity: 0.85;

  transform: translateY(-2px);

  border-color: rgba(255, 255, 255, 0.18);
}


/* ACTIVE THUMB */

.lighting-thumb.active {
  opacity: 1;

  border-color: rgba(141, 130, 200, 0.72);

  box-shadow:
    0 0 0 1px rgba(98, 124, 241, 0.2),
    0 8px 25px rgba(0, 0, 0, 0.2);
}


/* ACTIVE GRADIENT LINE */

.lighting-thumb.active::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  z-index: 4;

  width: 100%;
  height: 3px;

  background: var(--gradient);
}


/* THUMB IMAGE */

.lighting-thumb img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(0.62)
    saturate(0.9);

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.lighting-thumb:hover img,
.lighting-thumb.active img {
  transform: scale(1.04);

  filter:
    brightness(0.76)
    saturate(1.03);
}


/* THUMB LABEL */

.lighting-thumb > span {
  position: absolute;

  left: 12px;
  bottom: 10px;

  z-index: 3;

  color: #ffffff;

  font-family: var(--heading-font);

  font-size: 0.94rem;
  font-weight: 600;

  text-align: left;

  text-transform: uppercase;

  letter-spacing: 0.35px;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.8);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

  .lighting-section {
    padding:
      90px 0
      95px;
  }


  .lighting-container {
    width: calc(100% - 36px);

    grid-template-columns:
      minmax(280px, 0.75fr)
      minmax(0, 1.25fr);

    gap: 48px;
  }


  .lighting-title {
    font-size:
      clamp(2.8rem, 5.5vw, 4rem);
  }


  .lighting-thumb {
    height: 95px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .lighting-section {
    padding:
      75px 0
      80px;
  }


  .lighting-container {
    width: calc(100% - 32px);

    display: flex;
    flex-direction: column;

    gap: 42px;
  }


  .lighting-content {
    max-width: 100%;
  }


  .lighting-eyebrow {
    margin-bottom: 11px;

    font-size: 0.63rem;
  }


  .lighting-title {
    max-width: 520px;

    font-size:
      clamp(2.65rem, 12vw, 3.6rem);
  }


  .lighting-copy {
    margin-top: 20px;
  }


  .lighting-copy > p {
    max-width: 470px;

    font-size: 0.86rem;
    line-height: 1.65;
  }


  .lighting-details {
    margin-top: 23px;

    gap: 11px;
  }


  .lighting-detail p {
    font-size: 0.74rem;
  }


  .lighting-link {
    margin-top: 27px;
  }


  .lighting-featured-image {
    aspect-ratio: 4 / 3;
  }


  .lighting-featured-label {
    left: 14px;
    bottom: 14px;
  }


  .lighting-thumbnails {
    gap: 8px;
  }


  .lighting-thumb {
    height: 90px;

    border-radius: 6px;
  }


  .lighting-thumb > span {
    left: 9px;
    bottom: 8px;

    font-size: 0.76rem;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

  .lighting-thumbnails {
    grid-template-columns:
      repeat(3, 1fr);

    gap: 6px;
  }


  .lighting-thumb {
    height: 78px;
  }


  .lighting-thumb > span {
    left: 7px;
    bottom: 7px;

    max-width: calc(100% - 14px);

    font-size: 0.65rem;
    line-height: 1.05;
  }


  .lighting-featured-label {
    padding: 8px 10px;
  }


  .lighting-featured-label strong {
    font-size: 1rem;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

  .lighting-featured-image img,
  .lighting-thumb,
  .lighting-thumb img,
  .lighting-link,
  .lighting-link span {
    transition: none;
  }

}

/* =====================================================
   WORK / PROJECTS
===================================================== */

.work-section {
  position: relative;

  padding: 110px 0 105px;

  overflow: hidden;

  background: #f2f2f0;

  color: #111218;
}


/* BACKGROUND DETAIL */

.work-section::before {
  content: "";

  position: absolute;

  top: -280px;
  right: -230px;

  width: 600px;
  height: 600px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(98, 124, 241, 0.09),
      transparent 68%
    );

  pointer-events: none;
}


.work-section::after {
  content: "";

  position: absolute;

  left: -320px;
  bottom: -430px;

  width: 650px;
  height: 650px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(213, 154, 103, 0.06),
      transparent 68%
    );

  pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.work-container {
  position: relative;

  z-index: 2;

  width: min(1180px, calc(100% - 48px));

  margin: 0 auto;
}


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

.work-intro {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(280px, 0.65fr);

  align-items: end;

  gap: 70px;

  margin-bottom: 48px;
}


.work-heading {
  max-width: 680px;
}


.work-title {
  font-family: var(--heading-font);

  color: #111218;

  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 600;

  line-height: 0.94;

  letter-spacing: -0.5px;

  text-transform: uppercase;
}


.work-title span {
  display: block;

  margin-top: 5px;

  background: var(--gradient);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.work-intro-copy {
  max-width: 390px;

  justify-self: end;
}


.work-intro-copy p {
  color: #63666f;

  font-size: 0.92rem;
  line-height: 1.7;
}


/* =====================================================
   REEL
===================================================== */

.work-reel {
  position: relative;

  outline: none;
}


/* SUBTLE RAIL BEHIND PHOTOS */

.work-reel::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 50%;

  height: 58%;

  transform: translateY(-53%);

  background:
    linear-gradient(
      90deg,
      rgba(98, 124, 241, 0.025),
      rgba(141, 130, 200, 0.045),
      rgba(213, 154, 103, 0.025)
    );

  border-top: 1px solid rgba(20, 22, 28, 0.045);
  border-bottom: 1px solid rgba(20, 22, 28, 0.045);

  pointer-events: none;
}


/* =====================================================
   VIEWPORT
===================================================== */

.work-viewport {
  position: relative;

  z-index: 2;

  width: 100%;

  overflow: hidden;
}


/* =====================================================
   TRACK
===================================================== */

.work-track {
  display: flex;
  align-items: center;

  gap: 22px;

  width: max-content;

  padding:
    24px 0
    30px;

  transition:
    transform 0.55s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  will-change: transform;
}


/* =====================================================
   SLIDE
===================================================== */

.work-slide {
  position: relative;

  flex: 0 0 470px;

  margin: 0;

  opacity: 0.46;

  cursor: pointer;

  transform: scale(0.92);

  transition:
    opacity 0.38s ease,
    transform 0.5s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.work-slide.active {
  opacity: 1;

  cursor: default;

  transform: scale(1);
}


/* ACTIVE ACCENT UNDER PHOTO */

.work-slide.active::after {
  content: "";

  position: absolute;

  left: 22%;
  right: 22%;

  bottom: -11px;

  height: 3px;

  border-radius: 20px;

  background: var(--gradient);

  opacity: 0.9;
}


/* =====================================================
   IMAGE
===================================================== */

.work-image {
  position: relative;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-radius: 12px;

  background: #dededb;

  border:
    1px solid
    rgba(20, 22, 28, 0.08);

  box-shadow:
    0 10px 25px
    rgba(22, 24, 30, 0.09);

  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease;
}


/* ACTIVE IMAGE DEPTH */

.work-slide.active
.work-image {
  box-shadow:
    0 22px 50px
    rgba(22, 24, 30, 0.18);
}


/* VERY LIGHT IMAGE EDGE */

.work-image::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.08);

  pointer-events: none;
}


.work-image img {
  width: 100%;
  height: 100%;

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

  transform: scale(1.01);

  filter:
    brightness(0.94)
    saturate(0.95);

  transition:
    transform 0.5s ease,
    filter 0.4s ease;
}


/* ACTIVE IMAGE */

.work-slide.active
.work-image img {
  filter:
    brightness(1)
    saturate(1.03);
}


/* INACTIVE HOVER */

.work-slide:not(.active):hover {
  opacity: 0.72;

  transform: scale(0.945);
}


.work-slide:not(.active):hover
.work-image {
  box-shadow:
    0 15px 32px
    rgba(22, 24, 30, 0.12);
}


.work-slide:not(.active):hover
.work-image img {
  transform: scale(1.035);

  filter:
    brightness(0.98)
    saturate(1);
}


/* ACTIVE HOVER */

.work-slide.active:hover
.work-image img {
  transform: scale(1.02);
}


/* =====================================================
   CAPTION
===================================================== */

/* KEPT IN CASE FIGCAPTIONS EXIST,
   BUT HIDDEN SINCE WE REMOVED PROJECT 01 / 02 ETC. */

.work-slide figcaption {
  display: none;
}


/* =====================================================
   CONTROLS
===================================================== */

.work-controls {
  position: relative;

  z-index: 3;

  margin-top: 20px;

  display: grid;

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

  align-items: center;

  gap: 30px;
}


/* =====================================================
   COUNTER
===================================================== */

.work-counter {
  display: flex;
  align-items: center;

  gap: 10px;

  color: #999ba1;

  font-size: 0.64rem;
  font-weight: 700;

  letter-spacing: 1px;
}


.work-counter
[data-work-current] {
  color: #191b21;
}


.work-counter-line {
  width: 34px;
  height: 1px;

  background: #c8c9cd;
}


/* =====================================================
   DOTS
===================================================== */

.work-dots {
  display: flex;
  align-items: center;

  gap: 7px;
}


.work-dot {
  width: 7px;
  height: 7px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #c5c7cb;

  cursor: pointer;

  transition:
    width 0.25s ease,
    border-radius 0.25s ease,
    background 0.25s ease,
    transform 0.2s ease;
}


.work-dot:hover {
  background: #96999f;

  transform: scale(1.15);
}


.work-dot.active {
  width: 26px;

  border-radius: 10px;

  background: var(--gradient);

  transform: none;
}


/* =====================================================
   ARROWS
===================================================== */

.work-arrows {
  justify-self: end;

  display: flex;

  gap: 8px;
}


.work-arrow {
  width: 43px;
  height: 43px;

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

  padding: 0;

  border: 1px solid #cecfd2;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.3);

  color: #202228;

  font-size: 1rem;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.work-arrow:hover {
  background: #151720;

  border-color: #151720;

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 7px 16px
    rgba(21, 23, 32, 0.12);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

  .work-section {
    padding:
      90px 0
      95px;
  }


  .work-container {
    width:
      calc(100% - 36px);
  }


  .work-intro {
    gap: 45px;
  }


  .work-title {
    font-size:
      clamp(
        2.8rem,
        6vw,
        4.2rem
      );
  }


  .work-slide {
    flex-basis: 420px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .work-section {
    padding:
      75px 0
      80px;
  }


  .work-container {
    width:
      calc(100% - 32px);
  }


  /* INTRO */

  .work-intro {
    display: block;

    margin-bottom: 36px;
  }


  .work-title {
    font-size:
      clamp(
        2.65rem,
        12vw,
        3.6rem
      );
  }


  .work-intro-copy {
    max-width: 450px;

    margin-top: 20px;
  }


  .work-intro-copy p {
    font-size: 0.86rem;
    line-height: 1.65;
  }


  /* REEL */

  .work-reel::before {
    height: 62%;
  }


  /* TRACK */

  .work-track {
    gap: 12px;

    padding:
      16px 0
      23px;
  }


  /* SLIDES */

  .work-slide {
    flex-basis:
      calc(100vw - 70px);

    opacity: 0.36;

    transform: scale(0.95);
  }


  .work-slide.active {
    transform: scale(1);
  }


  .work-slide.active::after {
    bottom: -8px;

    height: 2px;
  }


  .work-image {
    border-radius: 9px;

    box-shadow:
      0 8px 20px
      rgba(22, 24, 30, 0.08);
  }


  .work-slide.active
  .work-image {
    box-shadow:
      0 17px 35px
      rgba(22, 24, 30, 0.16);
  }


  /* CONTROLS */

  .work-controls {
    margin-top: 16px;

    grid-template-columns:
      auto
      1fr
      auto;

    gap: 14px;
  }


  .work-dots {
    justify-content: center;
  }


  .work-arrow {
    width: 40px;
    height: 40px;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

  .work-slide {
    flex-basis:
      calc(100vw - 52px);
  }


  .work-counter {
    gap: 6px;

    font-size: 0.58rem;
  }


  .work-counter-line {
    width: 20px;
  }


  .work-dots {
    gap: 5px;
  }


  .work-dot {
    width: 6px;
    height: 6px;
  }


  .work-dot.active {
    width: 18px;
  }


  .work-arrow {
    width: 37px;
    height: 37px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

  .work-track,
  .work-slide,
  .work-image,
  .work-image img,
  .work-dot,
  .work-arrow {
    transition: none;
  }

}

/* =====================================================
   CONTACT
===================================================== */

.contact-section {
  position: relative;

  padding: 110px 0 115px;

  overflow: hidden;

  background: #0b0c10;

  color: #ffffff;
}


/* BACKGROUND DETAIL */

.contact-section::before {
  content: "";

  position: absolute;

  top: -240px;
  right: -180px;

  width: 560px;
  height: 560px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(98, 124, 241, 0.13),
      transparent 68%
    );

  pointer-events: none;
}


.contact-section::after {
  content: "";

  position: absolute;

  left: -240px;
  bottom: -320px;

  width: 580px;
  height: 580px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(213, 154, 103, 0.08),
      transparent 68%
    );

  pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.contact-container {
  position: relative;

  z-index: 2;

  width: min(1180px, calc(100% - 48px));

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(420px, 1.1fr);

  align-items: center;

  gap: 90px;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.contact-content {
  max-width: 510px;
}


.contact-eyebrow {
  margin-bottom: 14px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 0.68rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1.8px;
}


.contact-title {
  font-family: var(--heading-font);

  font-size: clamp(3rem, 5vw, 4.8rem);
  font-weight: 600;

  line-height: 0.94;

  letter-spacing: -0.5px;

  text-transform: uppercase;
}


.contact-title span {
  display: block;

  margin-top: 5px;

  background: var(--gradient);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.contact-description {
  max-width: 450px;

  margin-top: 25px;

  color: rgba(255, 255, 255, 0.6);

  font-size: 0.92rem;
  line-height: 1.75;
}


/* =====================================================
   CONTACT NOTE
===================================================== */

.contact-note {
  margin-top: 28px;

  display: flex;
  align-items: flex-start;

  gap: 14px;
}


.contact-note-line {
  width: 34px;
  height: 1px;

  flex: 0 0 34px;

  margin-top: 8px;

  background: var(--gradient);
}


.contact-note p {
  max-width: 330px;

  color: rgba(255, 255, 255, 0.42);

  font-size: 0.72rem;
  line-height: 1.6;
}


/* =====================================================
   CONTACT PANEL
===================================================== */

.contact-panel {
  position: relative;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.035);

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.22);
}


/* TOP ACCENT */

.contact-panel::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 3px;

  background: var(--gradient);
}


/* =====================================================
   CONTACT ROWS
===================================================== */

.contact-row {
  min-height: 94px;

  padding: 0 28px;

  display: grid;

  grid-template-columns:
    105px
    minmax(0, 1fr);

  align-items: center;

  gap: 24px;

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

  color: inherit;

  transition:
    background 0.2s ease;
}


a.contact-row:hover {
  background:
    rgba(255, 255, 255, 0.035);
}


/* LABEL */

.contact-row-label {
  color:
    rgba(255, 255, 255, 0.35);

  font-size: 0.62rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1.25px;
}


/* VALUE */

.contact-row-value {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  color: #ffffff;

  font-size: 0.95rem;
  font-weight: 500;
}


.contact-row-value a {
  min-width: 0;

  color: #ffffff;

  word-break: break-word;

  transition: opacity 0.2s ease;
}


.contact-row-value a:hover {
  opacity: 0.7;
}


/* =====================================================
   PHONE ARROW
===================================================== */

.contact-arrow {
  color:
    rgba(255, 255, 255, 0.42);

  font-size: 1rem;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


a.contact-row:hover
.contact-arrow {
  color: #ffffff;

  transform:
    translate(
      2px,
      -2px
    );
}


/* =====================================================
   COPY BUTTON
===================================================== */

.contact-copy {
  flex: 0 0 auto;

  padding: 7px 11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 5px;

  background:
    rgba(255, 255, 255, 0.04);

  color:
    rgba(255, 255, 255, 0.62);

  font-family: inherit;

  font-size: 0.61rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.8px;

  cursor: pointer;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.contact-copy:hover {
  color: #ffffff;

  background:
    rgba(255, 255, 255, 0.08);

  border-color:
    rgba(255, 255, 255, 0.2);
}


.contact-copy.copied {
  color: #ffffff;

  border-color:
    rgba(141, 130, 200, 0.6);

  background:
    rgba(141, 130, 200, 0.14);
}


/* =====================================================
   PANEL BOTTOM
===================================================== */

.contact-panel-bottom {
  padding:
    25px 28px
    28px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}


.contact-panel-bottom p {
  color:
    rgba(255, 255, 255, 0.42);

  font-size: 0.72rem;
}


/* =====================================================
   CALL BUTTON
===================================================== */

.contact-call-btn {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  padding:
    12px 17px;

  border-radius: 6px;

  background: var(--gradient);

  color: #ffffff;

  font-size: 0.68rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.75px;

  box-shadow:
    0 8px 20px
    rgba(95, 121, 239, 0.14);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.contact-call-btn span {
  transition:
    transform 0.2s ease;
}


.contact-call-btn:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 27px
    rgba(95, 121, 239, 0.22);
}


.contact-call-btn:hover span {
  transform:
    translateX(2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

  .contact-section {
    padding:
      90px 0
      95px;
  }


  .contact-container {
    width:
      calc(100% - 36px);

    grid-template-columns:
      minmax(0, 0.85fr)
      minmax(380px, 1.15fr);

    gap: 55px;
  }


  .contact-title {
    font-size:
      clamp(
        2.8rem,
        6vw,
        4.2rem
      );
  }


  .contact-row {
    padding:
      0 22px;

    grid-template-columns:
      85px
      minmax(0, 1fr);
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .contact-section {
    padding:
      75px 0
      80px;
  }


  .contact-container {
    width:
      calc(100% - 32px);

    display: block;
  }


  .contact-content {
    max-width: 100%;
  }


  .contact-title {
    font-size:
      clamp(
        2.65rem,
        12vw,
        3.6rem
      );
  }


  .contact-description {
    max-width: 470px;

    margin-top: 20px;

    font-size: 0.86rem;
    line-height: 1.65;
  }


  .contact-note {
    margin-top: 23px;
  }


  /* PANEL */

  .contact-panel {
    margin-top: 42px;

    border-radius: 10px;
  }


  .contact-row {
    min-height: 84px;

    padding:
      0 18px;

    grid-template-columns:
      75px
      minmax(0, 1fr);

    gap: 16px;
  }


  .contact-row-label {
    font-size: 0.57rem;
  }


  .contact-row-value {
    font-size: 0.84rem;
  }


  .contact-panel-bottom {
    padding:
      21px 18px
      22px;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

  .contact-row {
    min-height: 80px;

    grid-template-columns: 1fr;

    align-content: center;

    gap: 5px;
  }


  .contact-row-value {
    width: 100%;
  }


  .contact-panel-bottom {
    align-items: flex-start;

    flex-direction: column;

    gap: 15px;
  }


  .contact-call-btn {
    width: 100%;

    justify-content: space-between;
  }


  .contact-copy {
    padding:
      6px 9px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

  .contact-row,
  .contact-arrow,
  .contact-copy,
  .contact-call-btn,
  .contact-call-btn span {
    transition: none;
  }

}

/* =====================================================
   FOOTER
===================================================== */

.site-footer {
  position: relative;

  padding:
    72px 0
    28px;

  background: #08090c;

  color: #ffffff;

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


/* =====================================================
   CONTAINER
===================================================== */

.footer-container {
  width: min(1180px, calc(100% - 48px));

  margin: 0 auto;
}


/* =====================================================
   FOOTER TOP
===================================================== */

.footer-top {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(150px, 0.55fr)
    minmax(220px, 0.75fr);

  gap: 70px;

  padding-bottom: 54px;
}


/* =====================================================
   BRAND
===================================================== */

.footer-brand {
  max-width: 430px;
}


.footer-logo {
  display: inline-flex;
  align-items: baseline;

  gap: 5px;

  font-family: var(--heading-font);

  font-size: 2rem;
  font-weight: 600;

  line-height: 1;

  text-transform: uppercase;
  letter-spacing: -0.5px;
}


.footer-logo-main {
  color: #ffffff;
}


.footer-logo-accent {
  background: var(--gradient);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.footer-tagline {
  max-width: 360px;

  margin-top: 18px;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 0.82rem;
  line-height: 1.7;
}


/* =====================================================
   LINK GROUP TITLES
===================================================== */

.footer-links-title {
  margin-bottom: 17px;

  color:
    rgba(255, 255, 255, 0.32);

  font-size: 0.61rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 1.4px;
}


/* =====================================================
   NAVIGATION
===================================================== */

.footer-nav {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 11px;
}


.footer-nav a {
  position: relative;

  color:
    rgba(255, 255, 255, 0.68);

  font-size: 0.8rem;
  font-weight: 500;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.footer-nav a:hover {
  color: #ffffff;

  transform:
    translateX(3px);
}


/* =====================================================
   CONTACT
===================================================== */

.footer-contact-links {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 11px;
}


.footer-contact-links a {
  color:
    rgba(255, 255, 255, 0.68);

  font-size: 0.8rem;

  transition:
    color 0.2s ease;
}


.footer-contact-links a:hover {
  color: #ffffff;
}


.footer-location {
  margin-top: 19px;

  color:
    rgba(255, 255, 255, 0.32);

  font-size: 0.69rem;

  text-transform: uppercase;
  letter-spacing: 0.9px;
}


/* =====================================================
   FOOTER BOTTOM
===================================================== */

.footer-bottom {
  padding-top: 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

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


/* COPYRIGHT */

.footer-copyright {
  color:
    rgba(255, 255, 255, 0.3);

  font-size: 0.66rem;
  line-height: 1.5;
}


/* =====================================================
   BACK TO TOP
===================================================== */

.footer-bottom-right {
  display: flex;
  align-items: center;
}


.footer-back-top {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 0.65rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.8px;

  transition:
    color 0.2s ease,
    gap 0.2s ease;
}


.footer-back-top span {
  font-size: 0.9rem;

  transition:
    transform 0.2s ease;
}


.footer-back-top:hover {
  color: #ffffff;

  gap: 10px;
}


.footer-back-top:hover span {
  transform:
    translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

  .site-footer {
    padding-top: 62px;
  }


  .footer-container {
    width:
      calc(100% - 36px);
  }


  .footer-top {
    grid-template-columns:
      1.2fr
      0.6fr
      0.8fr;

    gap: 45px;
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

  .site-footer {
    padding:
      55px 0
      24px;
  }


  .footer-container {
    width:
      calc(100% - 32px);
  }


  .footer-top {
    grid-template-columns:
      1fr 1fr;

    gap:
      38px
      28px;

    padding-bottom: 42px;
  }


  .footer-brand {
    grid-column:
      1 / 3;

    max-width: 390px;
  }


  .footer-logo {
    font-size: 1.8rem;
  }


  .footer-tagline {
    margin-top: 14px;

    font-size: 0.78rem;
  }


  .footer-bottom {
    padding-top: 21px;
  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 430px) {

  .footer-top {
    grid-template-columns: 1fr;

    gap: 32px;
  }


  .footer-brand {
    grid-column: auto;
  }


  .footer-bottom {
    align-items: flex-start;

    flex-direction: column;

    gap: 14px;
  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

  .footer-nav a,
  .footer-contact-links a,
  .footer-back-top,
  .footer-back-top span {
    transition: none;
  }

}