/* =====================================================
   MKS VISUAL PRODUCTION
   FINAL STYLE SYSTEM
===================================================== */


/* =====================================================
   ROOT
===================================================== */

:root {

  --black: #08090c;
  --black-soft: #0e1015;
  --black-card: #14171d;

  --cream: #eee9df;
  --cream-soft: #e5dfd3;

  --copper: #c87948;
  --copper-light: #e39a67;
  --copper-dark: #94502e;

  --white: #f7f4ee;

  --gray: #96989d;
  --gray-dark: #5e6066;

  --line-light: rgba(255, 255, 255, 0.12);
  --line-dark: rgba(8, 9, 12, 0.14);

  --page-space: clamp(24px, 6vw, 110px);

  --radius-small: 8px;
  --radius-medium: 18px;
  --radius-large: 30px;

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

}


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

* {

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  margin: 0;

  overflow-x: hidden;

  color: var(--white);

  background: var(--black);

  font-family:
  "Cairo",
  Arial,
  sans-serif;

  -webkit-font-smoothing:
  antialiased;

  text-rendering:
  optimizeLegibility;

}


body.menu-open,
body.modal-open {

  overflow: hidden;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input,
textarea {

  font: inherit;

}


button {

  color: inherit;

}


img,
video {

  display: block;

  max-width: 100%;

}


h1,
h2,
h3,
p {

  margin-top: 0;

}


button {

  cursor: pointer;

}


::selection {

  color: var(--black);

  background: var(--copper);

}


/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar {

  width: 8px;

}


::-webkit-scrollbar-track {

  background: var(--black);

}


::-webkit-scrollbar-thumb {

  border-radius: 20px;

  background: var(--copper);

}


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

.brand {

  display: flex;

  align-items: flex-end;

  gap: 14px;

  direction: ltr;

}


.brand strong {

  color: var(--white);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 13px;

  font-weight: 800;

  line-height: 0.9;

  letter-spacing: -0.5px;

}


.brand span {

  padding-bottom: 1px;

  color: var(--copper-light);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: 2px;

}


.brand--dark strong {

  color: var(--black);

}


.brand--dark span {

  color: var(--copper-dark);

}


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

.site-header {

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  z-index: 900;

  display: grid;

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

  align-items: center;

  height: 88px;

  padding:
  0
  var(--page-space);

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

  direction: ltr;

  transition:
  height var(--transition),
  background var(--transition),
  transform var(--transition);

}


.site-header.is-fixed {

  position: fixed;

  height: 68px;

  background:
  rgba(8, 9, 12, 0.9);

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

  backdrop-filter:
  blur(18px);

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

}


.site-header.is-hidden {

  transform:
  translateY(-105%);

}


.desktop-nav {

  display: flex;

  align-items: center;

  gap: clamp(20px, 2.7vw, 42px);

  direction: rtl;

}


.desktop-nav a {

  position: relative;

  padding: 10px 0;

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

  font-size: 10px;

  font-weight: 500;

  transition:
  color var(--transition);

}


.desktop-nav a::after {

  content: "";

  position: absolute;

  right: 0;

  bottom: 3px;

  width: 0;

  height: 1px;

  background: var(--copper);

  transition:
  width var(--transition);

}


.desktop-nav a:hover {

  color: var(--white);

}


.desktop-nav a:hover::after {

  width: 100%;

}


.header-contact {

  display: flex;

  align-items: center;

  justify-self: end;

  gap: 18px;

  padding:
  11px
  16px;

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

  font-size: 9px;

  direction: rtl;

  transition:
  var(--transition);

}


.header-contact span {

  color: var(--copper);

  font-size: 17px;

}


.header-contact:hover {

  color: var(--black);

  background: var(--copper);

  border-color: var(--copper);

}


.header-contact:hover span {

  color: var(--black);

}


.menu-button {

  display: none;

  justify-self: end;

  width: 44px;

  height: 44px;

  padding: 0;

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

  border-radius: 50%;

  background: transparent;

}


.menu-button span {

  display: block;

  width: 16px;

  height: 1px;

  margin: 5px auto;

  background: var(--white);

}


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

.mobile-menu {

  position: fixed;

  inset: 0;

  z-index: 2000;

  display: flex;

  flex-direction: column;

  padding:
  30px
  var(--page-space);

  color: var(--black);

  background: var(--copper);

  opacity: 0;

  visibility: hidden;

  transform:
  translateY(-30px);

  transition:
  var(--transition);

}


.mobile-menu.is-open {

  opacity: 1;

  visibility: visible;

  transform:
  translateY(0);

}


.mobile-menu__top {

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.mobile-menu__close {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  padding: 0;

  border:
  1px solid
  rgba(0, 0, 0, 0.25);

  border-radius: 50%;

  color: var(--black);

  background: transparent;

  font-family: Arial;

  font-size: 30px;

  font-weight: 300;

}


.mobile-menu__links {

  display: flex;

  flex-direction: column;

  justify-content: center;

  flex: 1;

}


.mobile-menu__links a {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
  16px
  0;

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

  font-size:
  clamp(22px, 6vw, 38px);

  font-weight: 600;

}


.mobile-menu__links span {

  font-family:
  "Manrope",
  sans-serif;

  font-size: 8px;

  letter-spacing: 1px;

}


.mobile-menu__footer {

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 3px;

}


/* =====================================================
   COMMON ELEMENTS
===================================================== */

.section-label {

  display: flex;

  align-items: center;

  gap: 11px;

  color: var(--copper-dark);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.4px;

}


.section-label > span {

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

  letter-spacing: 1px;

}


.section-label > i {

  width: 30px;

  height: 1px;

  background: currentColor;

}


.section-label--light {

  color: var(--copper-light);

}


.eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--copper-light);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 3px;

  direction: ltr;

}


.eyebrow > span {

  width: 34px;

  height: 1px;

  background: var(--copper);

}


.eyebrow i {

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

  font-style: normal;

}


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

.hero {

  position: relative;

  min-height: 720px;

  height: 100svh;

  overflow: hidden;

  background:
  radial-gradient(
    circle at 30% 30%,
    #282d35,
    var(--black) 60%
  );

}


.hero__media {

  position: absolute;

  inset: 0;

}


.hero__media video {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.hero__shade {

  position: absolute;

  inset: 0;

  background:

  linear-gradient(
    90deg,
    rgba(8, 9, 12, 0.18),
    rgba(8, 9, 12, 0.92)
  ),

  linear-gradient(
    to top,
    rgba(8, 9, 12, 0.75),
    transparent 50%
  );

}


.hero__content {

  position: absolute;

  top: 49%;

  right:
  clamp(30px, 9vw, 165px);

  z-index: 10;

  width:
  min(610px, 74vw);

  transform:
  translateY(-44%);

}


.hero h1 {

  margin:
  19px
  0
  20px;

  font-size:
  clamp(48px, 5.6vw, 84px);

  font-weight: 500;

  line-height: 1.03;

  letter-spacing: -3.8px;

}


.hero h1 > span {

  color: var(--white);

}


.hero h1 > em {

  display: block;

  color: var(--copper-light);

  font-style: normal;

}


.hero__content > p {

  max-width: 470px;

  margin-bottom: 0;

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

  font-size: 12px;

  font-weight: 400;

  line-height: 2.05;

}


.hero__actions {

  display: flex;

  align-items: center;

  gap: 30px;

  margin-top: 30px;

}


.button {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 205px;

  min-height: 52px;

  padding:
  0
  18px;

  font-size: 10px;

  font-weight: 600;

  transition:
  var(--transition);

}


.button b {

  font-size: 19px;

  font-weight: 400;

}


.button--primary {

  color: var(--black);

  background: var(--copper);

}


.button--primary:hover {

  background: var(--copper-light);

  transform:
  translateY(-3px);

}


.showreel-button {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0;

  border: 0;

  background: transparent;

  text-align: right;

}


.showreel-button > i {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 45px;

  height: 45px;

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

  border-radius: 50%;

  color: var(--copper);

  font-size: 10px;

  font-style: normal;

  transition:
  var(--transition);

}


.showreel-button:hover > i {

  color: var(--black);

  background: var(--copper);

  border-color: var(--copper);

  transform:
  scale(1.08);

}


.showreel-button > span {

  display: flex;

  flex-direction: column;

  gap: 3px;

  font-size: 9px;

}


.showreel-button small {

  color: var(--gray);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  letter-spacing: 1.5px;

}


.hero__technical {

  position: absolute;

  top: 115px;

  right: var(--page-space);

  left: var(--page-space);

  z-index: 8;

  display: flex;

  align-items: center;

  gap: 24px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  font-weight: 600;

  letter-spacing: 2px;

  direction: ltr;

}


.record-indicator {

  display: flex;

  align-items: center;

  gap: 7px;

  color: var(--white);

}


.record-indicator i {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #ec604f;

  animation:
  recBlink
  1.2s
  infinite;

}


@keyframes recBlink {

  50% {

    opacity: 0.25;

  }

}


.hero__timecode {

  position: absolute;

  right: var(--page-space);

  bottom: 70px;

  z-index: 8;

  display: flex;

  align-items: center;

  gap: 10px;

  font-family:
  "Manrope",
  sans-serif;

  direction: ltr;

}


.hero__timecode span {

  color: var(--copper);

  font-size: 6px;

  letter-spacing: 2px;

}


.hero__timecode strong {

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 2px;

}


.hero__side-copy {

  position: absolute;

  top: 50%;

  left:
  clamp(20px, 3vw, 50px);

  z-index: 8;

  display: flex;

  align-items: center;

  gap: 13px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  letter-spacing: 3px;

  writing-mode:
  vertical-rl;

  transform:
  translateY(-50%);

}


.hero__side-copy i {

  width: 1px;

  height: 60px;

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

}


.hero-marquee {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 10;

  overflow: hidden;

  padding:
  14px
  0;

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

  background:
  rgba(8, 9, 12, 0.38);

  backdrop-filter:
  blur(8px);

  direction: ltr;

}


.hero-marquee__track {

  display: flex;

  align-items: center;

  gap: 30px;

  width: max-content;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

  font-weight: 600;

  letter-spacing: 3px;

  white-space: nowrap;

  animation:
  marqueeMove
  32s
  linear
  infinite;

}


.hero-marquee__track i {

  color: var(--copper);

  font-style: normal;

}


@keyframes marqueeMove {

  to {

    transform:
    translateX(-50%);

  }

}


/* =====================================================
   VIEWFINDER
===================================================== */

.viewfinder {

  position: absolute;

  inset:
  120px
  var(--page-space)
  75px;

  z-index: 4;

  pointer-events: none;

}


.viewfinder__corner {

  position: absolute;

  width: 34px;

  height: 34px;

}


.viewfinder__corner--one {

  top: 0;

  right: 0;

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

  border-right:
  1px solid
  rgba(255, 255, 255, 0.32);

}


.viewfinder__corner--two {

  top: 0;

  left: 0;

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

  border-left:
  1px solid
  rgba(255, 255, 255, 0.32);

}


.viewfinder__corner--three {

  right: 0;

  bottom: 0;

  border-right:
  1px solid
  rgba(255, 255, 255, 0.32);

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

}


.viewfinder__corner--four {

  bottom: 0;

  left: 0;

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

  border-left:
  1px solid
  rgba(255, 255, 255, 0.32);

}


.viewfinder__focus {

  position: absolute;

  top: 50%;

  left: 31%;

  width: 65px;

  height: 65px;

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

}


.viewfinder__focus i {

  position: absolute;

  width: 14px;

  height: 14px;

}


.viewfinder__focus i:nth-child(1) {

  top: 0;

  left: 0;

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

  border-left:
  1px solid
  rgba(255, 255, 255, 0.35);

}


.viewfinder__focus i:nth-child(2) {

  top: 0;

  right: 0;

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

  border-right:
  1px solid
  rgba(255, 255, 255, 0.35);

}


.viewfinder__focus i:nth-child(3) {

  right: 0;

  bottom: 0;

  border-right:
  1px solid
  rgba(255, 255, 255, 0.35);

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

}


.viewfinder__focus i:nth-child(4) {

  bottom: 0;

  left: 0;

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

  border-left:
  1px solid
  rgba(255, 255, 255, 0.35);

}


/* =====================================================
   VISION
===================================================== */

.vision {

  position: relative;

  display: grid;

  grid-template-columns:
  1fr
  0.75fr;

  align-items: end;

  gap: 10vw;

  min-height: 720px;

  padding:
  125px
  var(--page-space);

  overflow: hidden;

  color: var(--black);

  background: var(--cream);

}


.giant-number {

  position: absolute;

  top: -95px;

  left: 3vw;

  color:
  rgba(8, 9, 12, 0.035);

  font-family:
  "Manrope",
  sans-serif;

  font-size:
  clamp(220px, 30vw, 480px);

  font-weight: 800;

  line-height: 1;

}


.vision__title,
.vision__copy {

  position: relative;

  z-index: 2;

}


.vision h2 {

  margin:
  22px
  0
  0;

  font-size:
  clamp(45px, 5vw, 76px);

  font-weight: 500;

  line-height: 1.1;

  letter-spacing: -3.5px;

}


.vision h2 em {

  color: var(--copper);

  font-style: normal;

}


.vision__copy {

  max-width: 450px;

}


.vision__lead {

  margin-bottom: 25px;

  color: var(--black);

  font-size:
  clamp(20px, 2vw, 28px);

  font-weight: 500;

}


.vision__lead span {

  color: var(--copper-dark);

}


.vision__copy > p:not(.vision__lead) {

  margin-bottom: 18px;

  color: #66645f;

  font-size: 11px;

  line-height: 2.15;

}


.vision__signature {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 35px;

  color: #76736d;

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: 2px;

  direction: ltr;

}


.vision__signature i {

  width: 40px;

  height: 1px;

  background: var(--copper);

}


/* =====================================================
   CAMERA LAB
===================================================== */

.camera-lab {

  position: relative;

  display: grid;

  grid-template-columns:
  0.75fr
  1.25fr;

  align-items: center;

  min-height: 790px;

  padding:
  110px
  var(--page-space);

  overflow: hidden;

  background:

  radial-gradient(
    circle at 70% 50%,
    #222730,
    transparent 38%
  ),

  var(--black-soft);

}


.camera-lab::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 63%;

  width: 560px;

  height: 560px;

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

  border-radius: 50%;

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

}


.camera-lab__noise {

  position: absolute;

  inset: 0;

  opacity: 0.1;

  background-image:

  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.03) 4px
  );

  pointer-events: none;

}


.camera-lab__copy {

  position: relative;

  z-index: 5;

}


.camera-lab h2 {

  margin:
  20px
  0;

  font-size:
  clamp(45px, 5.2vw, 78px);

  font-weight: 500;

  line-height: 1.06;

  letter-spacing: -4px;

}


.camera-lab h2 em {

  color: var(--copper);

  font-style: normal;

}


.camera-lab__copy > p {

  max-width: 370px;

  color: var(--gray);

  font-size: 11px;

  line-height: 2.1;

}


.equipment-stage {

  position: relative;

  min-height: 540px;

  perspective: 1100px;

}


.equipment-orbit {

  position: absolute;

  top: 50%;

  left: 53%;

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

  border-radius: 50%;

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

}


.equipment-orbit--one {

  width: 470px;

  height: 470px;

}


.equipment-orbit--two {

  width: 320px;

  height: 320px;

  border-color:
  rgba(200, 121, 72, 0.15);

}


.floating-camera {

  position: absolute;

  top: 48%;

  left: 52%;

  z-index: 4;

  display: flex;

  align-items: center;

  width: 360px;

  height: 200px;

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

  filter:
  drop-shadow(
    0 35px 45px
    rgba(0, 0, 0, 0.5)
  );

  animation:
  cameraFloat
  6s
  ease-in-out
  infinite;

}


@keyframes cameraFloat {

  50% {

    transform:
    translate(-50%, calc(-50% - 18px))
    rotate(-3deg);

  }

}


.camera-body {

  position: relative;

  width: 205px;

  height: 145px;

  border-radius:
  18px
  22px
  20px
  15px;

  background:

  linear-gradient(
    145deg,
    #343941,
    #121419 70%
  );

  box-shadow:

  inset
  0
  0
  0
  1px
  rgba(255, 255, 255, 0.08),

  inset
  12px
  10px
  25px
  rgba(255, 255, 255, 0.04);

}


.camera-body::before {

  content: "";

  position: absolute;

  top: -31px;

  right: 35px;

  width: 86px;

  height: 35px;

  border-radius:
  8px
  8px
  0
  0;

  background:
  linear-gradient(
    #282c33,
    #15171b
  );

}


.camera-body__screen {

  position: absolute;

  top: 27px;

  left: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 54px;

  height: 36px;

  border:
  2px solid
  #090a0d;

  color: #ef5e4d;

  background: #171a20;

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  letter-spacing: 1px;

}


.camera-body__button {

  position: absolute;

  top: -9px;

  right: 12px;

  width: 25px;

  height: 10px;

  border-radius: 8px;

  background: var(--copper);

}


.camera-body__grip {

  position: absolute;

  right: -20px;

  bottom: 5px;

  width: 50px;

  height: 90px;

  border-radius:
  0
  16px
  20px
  0;

  background:
  #0c0d10;

  transform:
  skewY(-7deg);

}


.camera-lens {

  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 160px;

  height: 160px;

  margin-right: -17px;

  border-radius: 50%;

  background:

  radial-gradient(
    circle,
    #17232c 0 19%,
    #080a0c 20% 33%,
    #30343a 34% 40%,
    #0a0b0e 41% 56%,
    #24282e 57% 64%,
    #090a0c 65%
  );

  box-shadow:

  inset
  0
  0
  20px
  rgba(255, 255, 255, 0.1),

  0
  0
  0
  2px
  #090a0d;

}


.camera-lens::after {

  content: "";

  position: absolute;

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background:

  radial-gradient(
    circle at 35% 30%,
    rgba(109, 164, 187, 0.65),
    rgba(35, 65, 80, 0.2) 35%,
    #040506 75%
  );

}


.camera-lens span {

  position: absolute;

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

  border-radius: 50%;

}


.camera-lens span:nth-child(1) {

  width: 125px;

  height: 125px;

}


.camera-lens span:nth-child(2) {

  width: 100px;

  height: 100px;

}


.camera-lens span:nth-child(3) {

  width: 70px;

  height: 70px;

}


.floating-lens {

  position: absolute;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background:

  radial-gradient(
    circle,
    #101a20 0 25%,
    #08090b 26% 40%,
    #30343a 41% 48%,
    #090a0c 49% 64%,
    #22262c 65%
  );

  box-shadow:

  0
  25px
  45px
  rgba(0, 0, 0, 0.45),

  inset
  0
  0
  15px
  rgba(255, 255, 255, 0.08);

}


.floating-lens span {

  position: absolute;

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

  border-radius: 50%;

}


.floating-lens--one {

  top: 4%;

  right: 5%;

  width: 115px;

  height: 115px;

  animation:
  lensFloatOne
  7s
  ease-in-out
  infinite;

}


.floating-lens--one span:nth-child(1) {

  width: 80px;

  height: 80px;

}


.floating-lens--one span:nth-child(2) {

  width: 54px;

  height: 54px;

}


.floating-lens--one span:nth-child(3) {

  width: 30px;

  height: 30px;

  background:
  rgba(49, 91, 109, 0.4);

}


@keyframes lensFloatOne {

  50% {

    transform:
    translate(-18px, 15px)
    rotate(18deg);

  }

}


.floating-lens--two {

  bottom: 7%;

  left: 7%;

  width: 78px;

  height: 78px;

  animation:
  lensFloatTwo
  5s
  ease-in-out
  infinite;

}


.floating-lens--two span:nth-child(1) {

  width: 52px;

  height: 52px;

}


.floating-lens--two span:nth-child(2) {

  width: 27px;

  height: 27px;

  background:
  rgba(49, 91, 109, 0.35);

}


@keyframes lensFloatTwo {

  50% {

    transform:
    translate(13px, -16px)
    rotate(-15deg);

  }

}


.equipment-note {

  position: absolute;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  letter-spacing: 3px;

}


.equipment-note--one {

  top: 16%;

  left: 10%;

}


.equipment-note--two {

  top: 28%;

  right: 1%;

}


.equipment-note--three {

  right: 12%;

  bottom: 14%;

}


.camera-lab__footer {

  position: absolute;

  right: var(--page-space);

  bottom: 38px;

  left: var(--page-space);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 17px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  letter-spacing: 2px;

}


.camera-lab__footer i {

  width: 35px;

  height: 1px;

  background:
  rgba(200, 121, 72, 0.45);

}


/* =====================================================
   MONITOR SECTION
===================================================== */

.monitor-section {

  display: grid;

  grid-template-columns:
  0.55fr
  1.45fr;

  gap: 7vw;

  padding:
  125px
  var(--page-space);

  color: var(--black);

  background: var(--cream);

}


.monitor-section__heading {

  align-self: center;

}


.monitor-section__heading h2 {

  margin:
  20px
  0;

  font-size:
  clamp(43px, 4.6vw, 70px);

  font-weight: 500;

  line-height: 1.08;

  letter-spacing: -3px;

}


.monitor-section__heading h2 em {

  color: var(--copper);

  font-style: normal;

}


.monitor-section__heading > p {

  max-width: 300px;

  color: #6b6964;

  font-size: 10px;

  line-height: 2;

}


.monitor-stage {

  min-width: 0;

}


.monitor-rig {

  position: relative;

  max-width: 850px;

  margin: auto;

  padding:
  28px
  22px
  20px;

  border-radius: 22px;

  background:

  linear-gradient(
    145deg,
    #24272c,
    #0d0f12
  );

  box-shadow:

  0
  45px
  80px
  rgba(0, 0, 0, 0.24),

  inset
  0
  0
  0
  1px
  rgba(255, 255, 255, 0.08);

}


.monitor-rig__antenna {

  position: absolute;

  top: -75px;

  width: 5px;

  height: 85px;

  border-radius: 5px;

  background:
  linear-gradient(
    #121418,
    #393d44
  );

  transform-origin: bottom;

}


.monitor-rig__antenna::after {

  content: "";

  position: absolute;

  top: -6px;

  left: -3px;

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background: #202329;

}


.monitor-rig__antenna--one {

  left: 60px;

  transform:
  rotate(-13deg);

}


.monitor-rig__antenna--two {

  right: 60px;

  transform:
  rotate(13deg);

}


.director-monitor {

  overflow: hidden;

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

  border-radius: 12px;

  background: #08090b;

}


.director-monitor__top,
.director-monitor__bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 37px;

  padding:
  0
  15px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 5px;

  font-weight: 600;

  letter-spacing: 1.5px;

  direction: ltr;

}


.director-monitor__top > div {

  display: flex;

  align-items: center;

  gap: 6px;

  color: #ef6454;

}


.director-monitor__top i {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: #ef6454;

  animation:
  recBlink
  1.2s
  infinite;

}


.monitor-screen {

  position: relative;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #12151a;

}


.monitor-screen__media {

  position: absolute;

  inset: 0;

}


.monitor-screen__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
  opacity 0.25s ease,
  transform 0.7s ease;

}


.monitor-screen.is-changing
.monitor-screen__media img {

  opacity: 0;

  transform:
  scale(1.04);

}


.monitor-screen__shade {

  position: absolute;

  inset: 0;

  background:

  linear-gradient(
    to top,
    rgba(4, 5, 7, 0.92),
    transparent 65%
  ),

  linear-gradient(
    90deg,
    transparent,
    rgba(5, 6, 8, 0.28)
  );

}


.monitor-screen__grid {

  position: absolute;

  inset: 0;

  opacity: 0.18;

  background:

  linear-gradient(
    90deg,
    transparent 33.2%,
    rgba(255, 255, 255, 0.3) 33.3%,
    transparent 33.5%,
    transparent 66.5%,
    rgba(255, 255, 255, 0.3) 66.6%,
    transparent 66.8%
  ),

  linear-gradient(
    transparent 33.2%,
    rgba(255, 255, 255, 0.3) 33.3%,
    transparent 33.5%,
    transparent 66.5%,
    rgba(255, 255, 255, 0.3) 66.6%,
    transparent 66.8%
  );

}


.monitor-screen__focus {

  position: absolute;

  top: 37%;

  left: 50%;

  width: 70px;

  height: 70px;

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

}


.monitor-screen__focus span {

  position: absolute;

  width: 15px;

  height: 15px;

}


.monitor-screen__focus span:nth-child(1) {

  top: 0;

  left: 0;

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

  border-left:
  1px solid
  rgba(255, 255, 255, 0.65);

}


.monitor-screen__focus span:nth-child(2) {

  top: 0;

  right: 0;

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

  border-right:
  1px solid
  rgba(255, 255, 255, 0.65);

}


.monitor-screen__focus span:nth-child(3) {

  right: 0;

  bottom: 0;

  border-right:
  1px solid
  rgba(255, 255, 255, 0.65);

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

}


.monitor-screen__focus span:nth-child(4) {

  bottom: 0;

  left: 0;

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

  border-left:
  1px solid
  rgba(255, 255, 255, 0.65);

}


.monitor-screen__copy {

  position: absolute;

  right: 30px;

  bottom: 35px;

  z-index: 3;

  max-width: 430px;

  color: var(--white);

}


.monitor-screen__copy small {

  color: var(--copper-light);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: 2px;

}


.monitor-screen__copy h3 {

  margin:
  6px
  0
  5px;

  font-size:
  clamp(23px, 3vw, 39px);

  font-weight: 500;

}


.monitor-screen__copy p {

  max-width: 350px;

  margin: 0;

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

  font-size: 9px;

  line-height: 1.9;

}


.monitor-screen__data {

  position: absolute;

  right: 14px;

  bottom: 10px;

  left: 14px;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 17px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 5px;

  letter-spacing: 1px;

  direction: ltr;

}


.monitor-screen__data strong {

  margin-left: auto;

  color: var(--white);

  font-size: 6px;

  font-weight: 500;

  letter-spacing: 2px;

}


.director-monitor__bottom {

  justify-content: flex-start;

  gap: 25px;

}


.director-monitor__bottom > div {

  display: flex;

  gap: 6px;

  margin-left: auto;

}


.director-monitor__bottom i {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #282c32;

}


.director-monitor__bottom i:nth-child(2) {

  background: var(--copper);

}


.monitor-rig__handle {

  position: absolute;

  right: 50%;

  bottom: -55px;

  width: 160px;

  height: 55px;

  border-right:
  15px solid
  #17191d;

  border-bottom:
  15px solid
  #17191d;

  border-left:
  15px solid
  #17191d;

  border-radius:
  0
  0
  20px
  20px;

  transform:
  translateX(50%);

}


.monitor-controls {

  display: grid;

  grid-template-columns:
  repeat(6, 1fr);

  gap: 7px;

  margin-top: 72px;

}


.monitor-control {

  min-height: 68px;

  padding:
  10px
  8px;

  border:
  1px solid
  rgba(8, 9, 12, 0.13);

  color: #6e6c67;

  background: transparent;

  font-size: 8px;

  transition:
  var(--transition);

}


.monitor-control span {

  display: block;

  margin-bottom: 6px;

  color: #a5a19a;

  font-family:
  "Manrope",
  sans-serif;

  font-size: 5px;

}


.monitor-control:hover,
.monitor-control.active {

  color: var(--white);

  background: var(--black);

  border-color: var(--black);

  transform:
  translateY(-4px);

}


.monitor-control.active span {

  color: var(--copper);

}


/* =====================================================
   ARTISTS
===================================================== */

.artists {

  padding:
  125px
  var(--page-space);

  background: var(--black);

}


.artists__heading {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 60px;

  margin-bottom: 55px;

}


.artists__heading h2 {

  margin:
  20px
  0
  0;

  font-size:
  clamp(45px, 5vw, 75px);

  font-weight: 500;

  line-height: 1.06;

  letter-spacing: -3.5px;

}


.artists__heading h2 em {

  color: var(--copper);

  font-style: normal;

}


.artists__intro {

  max-width: 340px;

}


.artists__intro p {

  color: var(--gray);

  font-size: 10px;

  line-height: 2;

}


.artists__intro > span {

  display: flex;

  align-items: center;

  gap: 12px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  letter-spacing: 2px;

  direction: ltr;

}


.artists__intro i {

  width: 40px;

  height: 1px;

  background: var(--copper);

}


.artists-grid {

  display: grid;

  grid-template-columns:
  1.15fr
  0.85fr
  0.85fr;

  grid-template-rows:
  360px
  310px;

  gap: 12px;

}


.artist-card {

  position: relative;

  overflow: hidden;

  min-height: 280px;

  background: var(--black-card);

}


.artist-card--hero {

  grid-row:
  span 2;

}


.artist-card--wide {

  grid-column:
  span 2;

}


.artist-card > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter:
  grayscale(100%);

  transform:
  scale(1.01);

  transition:
  filter 0.7s ease,
  transform 0.8s ease;

}


.artist-card:hover > img {

  filter:
  grayscale(0);

  transform:
  scale(1.045);

}


.artist-card__shade {

  position: absolute;

  inset: 0;

  background:

  linear-gradient(
    to top,
    rgba(5, 6, 8, 0.94),
    transparent 65%
  ),

  linear-gradient(
    90deg,
    transparent,
    rgba(5, 6, 8, 0.15)
  );

}


.artist-card__index {

  position: absolute;

  top: 20px;

  left: 20px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

}


.artist-card__content {

  position: absolute;

  right: 23px;

  bottom: 23px;

  left: 23px;

}


.artist-card__content small {

  color: var(--copper-light);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  font-weight: 600;

  letter-spacing: 2px;

}


.artist-card__content h3 {

  margin:
  7px
  0
  0;

  font-size:
  clamp(22px, 2.2vw, 34px);

  font-weight: 500;

}


.artist-card__content p {

  margin:
  8px
  0
  0;

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

  font-size: 9px;

  line-height: 1.8;

}


/* =====================================================
   FILM STRIP
===================================================== */

.film-strip {

  position: relative;

  overflow: hidden;

  padding:
  30px
  0;

  color: var(--black);

  background: var(--copper);

}


.film-strip__holes {

  position: absolute;

  right: 0;

  left: 0;

  height: 11px;

  opacity: 0.75;

  background-image:

  repeating-linear-gradient(
    90deg,
    transparent 0 13px,
    var(--black) 13px 30px,
    transparent 30px 42px
  );

}


.film-strip__holes--top {

  top: 7px;

}


.film-strip__holes--bottom {

  bottom: 7px;

}


.film-strip__track {

  display: grid;

  grid-template-columns:
  repeat(5, 1fr);

  direction: ltr;

}


.film-frame {

  min-height: 145px;

  padding:
  27px
  25px;

  border-right:
  1px solid
  rgba(0, 0, 0, 0.22);

}


.film-frame > span {

  display: block;

  margin-bottom: 27px;

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

}


.film-frame strong {

  display: block;

  font-family:
  "Manrope",
  sans-serif;

  font-size:
  clamp(19px, 2vw, 29px);

  font-weight: 800;

  letter-spacing: -1px;

}


.film-frame small {

  font-family:
  "Manrope",
  sans-serif;

  font-size: 5px;

  font-weight: 700;

  letter-spacing: 2px;

}


.film-frame--accent {

  color: var(--cream);

  background: var(--black);

}


/* =====================================================
   SERVICES
===================================================== */

.services {

  display: grid;

  grid-template-columns:
  0.52fr
  1.48fr;

  gap: 8vw;

  padding:
  125px
  var(--page-space);

  color: var(--black);

  background: var(--cream);

}


.services__heading {

  position: sticky;

  top: 110px;

  align-self: start;

}


.services__heading h2 {

  margin:
  20px
  0;

  font-size:
  clamp(42px, 4.5vw, 68px);

  font-weight: 500;

  line-height: 1.08;

  letter-spacing: -3px;

}


.services__heading h2 em {

  color: var(--copper);

  font-style: normal;

}


.services__heading > p {

  max-width: 300px;

  color: #696761;

  font-size: 10px;

  line-height: 2;

}


.services-list {

  border-top:
  1px solid
  var(--line-dark);

}


.service-row {

  display: grid;

  grid-template-columns:
  40px
  1fr
  0.8fr
  42px;

  align-items: center;

  gap: 25px;

  min-height: 145px;

  padding:
  24px
  8px;

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

  transition:
  var(--transition);

}


.service-row:hover {

  padding-right: 25px;

  padding-left: 25px;

  color: var(--white);

  background: var(--black);

}


.service-row__number {

  color: var(--copper);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

}


.service-row__title small {

  color: var(--copper-dark);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 5px;

  font-weight: 700;

  letter-spacing: 2px;

}


.service-row:hover
.service-row__title small {

  color: var(--copper-light);

}


.service-row__title h3 {

  margin:
  7px
  0
  0;

  font-size:
  clamp(19px, 1.8vw, 28px);

  font-weight: 500;

}


.service-row > p {

  margin: 0;

  color: #6b6964;

  font-size: 9px;

  line-height: 2;

}


.service-row:hover > p {

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

}


.service-row__icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border:
  1px solid
  rgba(0, 0, 0, 0.18);

  border-radius: 50%;

  font-size: 16px;

  transition:
  var(--transition);

}


.service-row:hover
.service-row__icon {

  color: var(--black);

  background: var(--copper);

  border-color: var(--copper);

  transform:
  rotate(45deg);

}


/* =====================================================
   LENS STORY
===================================================== */

.lens-story {

  position: relative;

  display: flex;

  align-items: center;

  min-height: 780px;

  overflow: hidden;

  background: var(--black);

}


.lens-story__media {

  position: absolute;

  inset: 0;

}


.lens-story__media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.lens-story__shade {

  position: absolute;

  inset: 0;

  background:

  linear-gradient(
    90deg,
    rgba(8, 9, 12, 0.05),
    rgba(8, 9, 12, 0.93)
  ),

  linear-gradient(
    to top,
    rgba(8, 9, 12, 0.55),
    transparent
  );

}


.lens-story__copy {

  position: relative;

  z-index: 4;

  width:
  min(560px, 72vw);

  margin-right:
  clamp(30px, 9vw, 170px);

}


.lens-story__copy h2 {

  margin:
  20px
  0;

  font-size:
  clamp(48px, 5.6vw, 85px);

  font-weight: 500;

  line-height: 1.04;

  letter-spacing: -4px;

}


.lens-story__copy h2 em {

  color: var(--copper);

  font-style: normal;

}


.lens-story__copy p {

  max-width: 390px;

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

  font-size: 10px;

  line-height: 2.1;

}


.lens-story__lens {

  position: absolute;

  top: 50%;

  left: 14%;

  z-index: 3;

  display: flex;

  align-items: center;

  justify-content: center;

  width:
  clamp(230px, 28vw, 430px);

  height:
  clamp(230px, 28vw, 430px);

  border-radius: 50%;

  background:

  radial-gradient(
    circle,
    #0a141a 0 23%,
    #020304 24% 36%,
    #292d33 37% 43%,
    #08090b 44% 60%,
    #262a30 61% 68%,
    #08090b 69%
  );

  box-shadow:

  0
  50px
  90px
  rgba(0, 0, 0, 0.65),

  inset
  0
  0
  35px
  rgba(255, 255, 255, 0.08);

  transform:
  translateY(-50%);

}


.story-lens__ring {

  position: absolute;

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

  border-radius: 50%;

}


.story-lens__ring--one {

  width: 83%;

  height: 83%;

}


.story-lens__ring--two {

  width: 65%;

  height: 65%;

}


.story-lens__glass {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  width: 43%;

  height: 43%;

  border-radius: 50%;

  background:

  radial-gradient(
    circle at 35% 30%,
    rgba(82, 139, 165, 0.7),
    rgba(20, 48, 61, 0.45) 35%,
    #030405 75%
  );

  box-shadow:
  inset
  0
  0
  35px
  rgba(73, 126, 151, 0.3);

}


.story-lens__glass span {

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 3px;

}


.story-lens__glass small {

  margin-top: 6px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 4px;

  letter-spacing: 2px;

}


/* =====================================================
   PROCESS
===================================================== */

.process {

  padding:
  125px
  var(--page-space);

  background: var(--black);

}


.process__heading h2 {

  margin:
  20px
  0
  65px;

  font-size:
  clamp(45px, 5vw, 76px);

  font-weight: 500;

  line-height: 1.06;

  letter-spacing: -3.5px;

}


.process__heading h2 em {

  color: var(--copper);

  font-style: normal;

}


.process-track {

  display: grid;

  grid-template-columns:
  repeat(5, 1fr);

  border-top:
  1px solid
  var(--line-light);

}


.process-card {

  position: relative;

  min-height: 255px;

  padding:
  25px
  20px;

  border-left:
  1px solid
  var(--line-light);

  transition:
  var(--transition);

}


.process-card:last-child {

  border-left: 0;

}


.process-card:hover {

  background: var(--black-card);

  transform:
  translateY(-7px);

}


.process-card > span {

  color: var(--copper);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

}


.process-card__line {

  width: 0;

  height: 1px;

  margin:
  18px
  0
  50px;

  background: var(--copper);

  transition:
  width 0.7s ease;

}


.process-card:hover
.process-card__line {

  width: 55px;

}


.process-card small {

  color: var(--gray-dark);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 5px;

  font-weight: 700;

  letter-spacing: 2px;

}


.process-card h3 {

  margin:
  7px
  0
  10px;

  font-size: 20px;

  font-weight: 500;

}


.process-card p {

  color: var(--gray);

  font-size: 9px;

  line-height: 1.9;

}


/* =====================================================
   CAPABILITIES
===================================================== */

.capabilities {

  display: grid;

  grid-template-columns:
  0.7fr
  1.3fr;

  align-items: center;

  gap: 7vw;

  min-height: 720px;

  padding:
  100px
  var(--page-space);

  overflow: hidden;

  background:

  radial-gradient(
    circle at 70% 50%,
    #20242b,
    transparent 40%
  ),

  var(--black-soft);

}


.capabilities__copy h2 {

  margin:
  20px
  0;

  font-size:
  clamp(45px, 5vw, 75px);

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: -3.5px;

}


.capabilities__copy h2 em {

  color: var(--copper);

  font-style: normal;

}


.capabilities__copy p {

  color: var(--gray);

  font-size: 10px;

  line-height: 2;

}


.capability-orbit {

  position: relative;

  width:
  min(540px, 42vw);

  height:
  min(540px, 42vw);

  margin: auto;

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

  border-radius: 50%;

}


.capability-orbit::before {

  content: "";

  position: absolute;

  inset: 17%;

  border:
  1px solid
  rgba(200, 121, 72, 0.15);

  border-radius: 50%;

}


.capability-orbit::after {

  content: "";

  position: absolute;

  inset: 35%;

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

  border-radius: 50%;

}


.capability-orbit__center {

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 4;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  width: 130px;

  height: 130px;

  border-radius: 50%;

  color: var(--black);

  background: var(--copper);

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

  box-shadow:
  0
  0
  80px
  rgba(200, 121, 72, 0.18);

}


.capability-orbit__center strong {

  font-family:
  "Manrope",
  sans-serif;

  font-size: 24px;

  letter-spacing: -1px;

}


.capability-orbit__center span {

  margin-top: 3px;

  font-family:
  "Manrope",
  sans-serif;

  font-size: 5px;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: 2px;

  text-align: center;

}


.capability-tag {

  position: absolute;

  z-index: 5;

  padding:
  10px
  15px;

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

  border-radius: 100px;

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

  background:
  rgba(8, 9, 12, 0.65);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: 2px;

  backdrop-filter:
  blur(8px);

  animation:
  tagFloat
  5s
  ease-in-out
  infinite;

}


@keyframes tagFloat {

  50% {

    transform:
    translateY(-8px);

  }

}


.capability-tag--one {

  top: 5%;

  left: 42%;

}


.capability-tag--two {

  top: 19%;

  right: 4%;

  animation-delay: -1s;

}


.capability-tag--three {

  top: 48%;

  right: -3%;

  animation-delay: -2s;

}


.capability-tag--four {

  right: 12%;

  bottom: 11%;

  animation-delay: -3s;

}


.capability-tag--five {

  bottom: 2%;

  left: 40%;

  animation-delay: -1.5s;

}


.capability-tag--six {

  bottom: 15%;

  left: 5%;

  animation-delay: -2.5s;

}


.capability-tag--seven {

  top: 47%;

  left: -2%;

  animation-delay: -0.5s;

}


.capability-tag--eight {

  top: 17%;

  left: 9%;

  animation-delay: -3.5s;

}


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

/* Legacy CSS - currently unused
   (تصميم قديم لقسم التواصل، اتستبدل بـ .final-contact
    تحت. متسيب هنا بدون حذف بناءً على طلب العميل) */

.contact {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 760px;

  padding:
  100px
  var(--page-space)
  30px;

  overflow: hidden;

  color: var(--black);

  background: var(--copper);

}


.contact::before {

  content: "";

  position: absolute;

  top: -35%;

  left: -8%;

  width: 620px;

  height: 620px;

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

  border-radius: 50%;

}


.contact::after {

  content: "";

  position: absolute;

  top: -12%;

  left: 6%;

  width: 340px;

  height: 340px;

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

  border-radius: 50%;

}


.contact__grain {

  position: absolute;

  inset: 0;

  opacity: 0.15;

  background-image:

  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 4px,
    rgba(0, 0, 0, 0.025) 5px
  );

}


.contact__rec,
.contact h2,
.contact > p,
.contact__actions,
.footer {

  position: relative;

  z-index: 3;

}


.contact__rec {

  display: flex;

  align-items: center;

  gap: 8px;

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 2px;

  direction: ltr;

}


.contact__rec i {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--white);

  animation:
  recBlink
  1.2s
  infinite;

}


.contact__rec span {

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

}


.contact h2 {

  margin:
  25px
  0;

  font-size:
  clamp(53px, 7vw, 105px);

  font-weight: 500;

  line-height: 1.02;

  letter-spacing: -5px;

}


.contact h2 em {

  color: var(--cream);

  font-style: normal;

}


.contact > p {

  max-width: 420px;

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

  font-size: 11px;

  line-height: 2;

}


.contact__actions {

  display: flex;

  align-items: center;

  gap: 30px;

  margin-top: 25px;

}


.contact-button {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 235px;

  min-height: 53px;

  padding:
  0
  18px;

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

  font-size: 9px;

  font-weight: 600;

  transition:
  var(--transition);

}


.contact-button b {

  font-size: 18px;

}


.contact-button:hover {

  color: var(--cream);

  background: var(--black);

  transform:
  translateY(-3px);

}


.contact-email {

  padding-bottom: 5px;

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

  font-family:
  "Manrope",
  sans-serif;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 2px;

}


.footer {

  display: grid;

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

  align-items: end;

  gap: 30px;

  margin-top: auto;

  padding-top: 25px;

  border-top:
  1px solid
  rgba(0, 0, 0, 0.22);

}


.footer > p,
.footer > a {

  margin: 0;

  color:
  rgba(0, 0, 0, 0.52);

  font-family:
  "Manrope",
  sans-serif;

  font-size: 6px;

  font-weight: 700;

  letter-spacing: 2px;

}


.footer > a {

  display: flex;

  gap: 8px;

}


/* End of Legacy CSS block (old CONTACT/.footer — currently unused). */


/* =====================================================
   SHOWREEL MODAL
===================================================== */

.showreel-modal {

  position: fixed;

  inset: 0;

  z-index: 3000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 6vw;

  background:
  rgba(3, 4, 6, 0.96);

  opacity: 0;

  visibility: hidden;

  transition:
  var(--transition);

}


.showreel-modal.is-open {

  opacity: 1;

  visibility: visible;

}


.showreel-modal__video {

  width:
  min(1100px, 100%);

  overflow: hidden;

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

  background: black;

  box-shadow:
  0
  40px
  100px
  rgba(0, 0, 0, 0.6);

}


.showreel-modal__video video {

  width: 100%;

  max-height: 80vh;

}


.showreel-modal__close {

  position: absolute;

  top: 25px;

  left: 25px;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  padding: 0;

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

  border-radius: 50%;

  color: var(--white);

  background: transparent;

  font-family: Arial;

  font-size: 29px;

}


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

@media
(max-width: 1050px) {


  .desktop-nav,
  .header-contact {

    display: none;

  }


  .site-header {

    grid-template-columns:
    1fr
    auto;

  }


  .menu-button {

    display: block;

  }


  .vision {

    grid-template-columns:
    1fr;

    gap: 55px;

  }


  .vision__copy {

    margin-right: auto;

  }


  .camera-lab {

    grid-template-columns:
    1fr;

  }


  .camera-lab__copy {

    max-width: 500px;

  }


  .equipment-stage {

    margin-top: 30px;

  }


  .monitor-section {

    grid-template-columns:
    1fr;

  }


  .monitor-section__heading {

    display: grid;

    grid-template-columns:
    1fr
    0.7fr;

    align-items: end;

    gap: 50px;

  }


  .monitor-section__heading > p {

    margin-bottom: 0;

  }


  .artists-grid {

    grid-template-columns:
    1fr
    1fr;

    grid-template-rows:
    480px
    340px
    340px;

  }


  .artist-card--hero {

    grid-column:
    span 2;

    grid-row: auto;

  }


  .artist-card--wide {

    grid-column:
    span 2;

  }


  .services {

    grid-template-columns:
    1fr;

  }


  .services__heading {

    position: static;

    max-width: 650px;

  }


  .process-track {

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

  }


  .process-card {

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

  }


  .capabilities {

    grid-template-columns:
    1fr;

  }


  .capability-orbit {

    width:
    min(540px, 75vw);

    height:
    min(540px, 75vw);

  }


}


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

@media
(max-width: 700px) {


  :root {

    --page-space: 22px;

  }


  .site-header {

    height: 74px;

  }


  .brand span {

    display: none;

  }


  .hero {

    min-height: 720px;

    height: 100svh;

  }


  .hero__shade {

    background:

    linear-gradient(
      to top,
      rgba(8, 9, 12, 0.98),
      rgba(8, 9, 12, 0.18) 75%
    );

  }


  .hero__technical {

    top: 93px;

  }


  .hero__technical > span:last-child {

    display: none;

  }


  .viewfinder {

    inset:
    100px
    22px
    65px;

  }


  .viewfinder__focus {

    top: 31%;

    left: 50%;

  }


  .hero__content {

    top: auto;

    right: 24px;

    bottom: 112px;

    left: 24px;

    width: auto;

    transform: none;

  }


  .hero h1 {

    margin:
    15px
    0;

    font-size:
    clamp(46px, 13vw, 59px);

    line-height: 1.05;

    letter-spacing: -2.8px;

  }


  .hero__content > p {

    max-width: 340px;

    font-size: 10px;

  }


  .hero__actions {

    align-items: flex-start;

    flex-direction: column;

    gap: 18px;

    margin-top: 22px;

  }


  .button {

    width: 190px;

    min-height: 48px;

  }


  .showreel-button > i {

    width: 40px;

    height: 40px;

  }


  .hero__side-copy {

    display: none;

  }


  .hero__timecode {

    display: none;

  }


  .hero-marquee {

    padding:
    11px
    0;

  }


  .vision {

    min-height: auto;

    padding-top: 90px;

    padding-bottom: 90px;

  }


  .vision h2,
  .camera-lab h2,
  .monitor-section__heading h2,
  .artists__heading h2,
  .services__heading h2,
  .process__heading h2,
  .capabilities__copy h2 {

    font-size:
    clamp(39px, 11vw, 49px);

    letter-spacing: -2.3px;

  }


  .giant-number {

    top: -20px;

    font-size: 220px;

  }


  .camera-lab {

    min-height: 900px;

    padding-top: 85px;

    padding-bottom: 90px;

  }


  .equipment-stage {

    min-height: 470px;

  }


  .camera-lab::before {

    top: 68%;

    left: 50%;

    width: 390px;

    height: 390px;

  }


  .equipment-orbit--one {

    width: 360px;

    height: 360px;

  }


  .equipment-orbit--two {

    width: 245px;

    height: 245px;

  }


  .floating-camera {

    left: 48%;

    width: 275px;

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

  }


  .camera-body {

    width: 165px;

    height: 118px;

  }


  .camera-body__screen {

    top: 23px;

    left: 16px;

    width: 43px;

    height: 29px;

  }


  .camera-body__grip {

    height: 70px;

  }


  .camera-lens {

    width: 125px;

    height: 125px;

  }


  .camera-lens span:nth-child(1) {

    width: 98px;

    height: 98px;

  }


  .camera-lens span:nth-child(2) {

    width: 76px;

    height: 76px;

  }


  .camera-lens span:nth-child(3) {

    width: 54px;

    height: 54px;

  }


  .camera-lab__footer {

    flex-wrap: wrap;

    gap: 10px;

  }


  .camera-lab__footer i {

    width: 15px;

  }


  .monitor-section {

    padding-top: 90px;

    padding-bottom: 90px;

  }


  .monitor-section__heading {

    display: block;

  }


  .monitor-section__heading > p {

    margin-top: 20px;

  }


  .monitor-rig {

    margin-top: 85px;

    padding:
    13px
    10px
    10px;

    border-radius: 13px;

  }


  .monitor-rig__antenna {

    top: -55px;

    height: 63px;

  }


  .director-monitor__top {

    height: 29px;

  }


  .director-monitor__top > span:first-child {

    display: none;

  }


  .monitor-screen__copy {

    right: 15px;

    bottom: 25px;

    left: 15px;

  }


  .monitor-screen__copy h3 {

    font-size: 23px;

  }


  .monitor-screen__copy p {

    display: none;

  }


  .monitor-screen__focus {

    width: 43px;

    height: 43px;

  }


  .monitor-screen__data {

    gap: 9px;

  }


  .monitor-screen__data span:nth-child(3) {

    display: none;

  }


  .director-monitor__bottom {

    height: 30px;

    gap: 14px;

  }


  .director-monitor__bottom span:nth-child(3),
  .director-monitor__bottom span:nth-child(4) {

    display: none;

  }


  .monitor-rig__handle {

    bottom: -37px;

    width: 110px;

    height: 38px;

    border-width: 10px;

  }


  .monitor-controls {

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

    margin-top: 55px;

  }


  .monitor-control {

    min-height: 60px;

  }


  .artists {

    padding-top: 90px;

    padding-bottom: 90px;

  }


  .artists__heading {

    display: block;

  }


  .artists__intro {

    margin-top: 25px;

  }


  .artists-grid {

    display: flex;

    gap: 11px;

    overflow-x: auto;

    padding-bottom: 10px;

    scroll-snap-type:
    x mandatory;

    scrollbar-width: none;

  }


  .artists-grid::-webkit-scrollbar {

    display: none;

  }


  .artist-card,
  .artist-card--hero,
  .artist-card--wide {

    flex:
    0
    0
    82vw;

    height: 500px;

    min-height: 500px;

    scroll-snap-align: center;

  }


  .artist-card > img {

    filter: none;

  }


  .film-strip {

    overflow-x: auto;

  }


  .film-strip__track {

    display: flex;

    width: max-content;

  }


  .film-frame {

    width: 190px;

  }


  .services {

    padding-top: 90px;

    padding-bottom: 90px;

  }


  .services__heading {

    margin-bottom: 45px;

  }


  .service-row {

    grid-template-columns:
    28px
    1fr
    38px;

    gap: 12px;

    min-height: 135px;

    padding:
    22px
    0;

  }


  .service-row > p {

    grid-column:
    2 / 4;

  }


  .service-row:hover {

    padding:
    22px
    12px;

  }


  .service-row__title h3 {

    font-size: 19px;

  }


  .lens-story {

    align-items: flex-end;

    min-height: 720px;

  }


  .lens-story__shade {

    background:

    linear-gradient(
      to top,
      rgba(8, 9, 12, 0.98),
      rgba(8, 9, 12, 0.05) 75%
    );

  }


  .lens-story__lens {

    top: 27%;

    left: 50%;

    width: 240px;

    height: 240px;

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

    opacity: 0.88;

  }


  .lens-story__copy {

    width: auto;

    margin:
    0
    24px
    65px;

  }


  .lens-story__copy h2 {

    font-size: 49px;

    letter-spacing: -2.5px;

  }


  .process {

    padding-top: 90px;

    padding-bottom: 90px;

  }


  .process-track {

    grid-template-columns:
    1fr;

  }


  .process-card {

    min-height: auto;

    padding:
    25px
    5px;

    border-left: 0;

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

  }


  .process-card__line {

    margin:
    13px
    0
    20px;

  }


  .capabilities {

    min-height: 760px;

    padding-top: 85px;

    padding-bottom: 85px;

  }


  .capability-orbit {

    width: 340px;

    max-width: 90vw;

    height: 340px;

  }


  .capability-orbit__center {

    width: 100px;

    height: 100px;

  }


  .capability-tag {

    padding:
    8px
    11px;

    font-size: 5px;

  }


  .contact {

    min-height: 720px;

    padding-top: 85px;

  }


  .contact h2 {

    font-size:
    clamp(46px, 12vw, 60px);

    letter-spacing: -3px;

  }


  .contact__actions {

    align-items: flex-start;

    flex-direction: column;

    gap: 22px;

  }


  .footer {

    grid-template-columns:
    1fr
    auto;

  }


  .footer > p {

    display: none;

  }


}


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

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


  * {

    scroll-behavior: auto !important;

    animation-duration:
    0.01ms !important;

    animation-iteration-count:
    1 !important;

    transition-duration:
    0.01ms !important;

  }


}




/* =====================================================
   FINAL FRAME
===================================================== */

/* Legacy CSS - currently unused
   (نسخة قديمة من قسم CTA الختامي، اتستبدلت بـ
    .final-contact. متسيبة هنا بدون حذف) */

.final-frame {

  --final-orange:
  #cc7945;

  --final-dark:
  #10100f;

  --final-light:
  #f5eee5;

  position: relative;

  min-height: 100svh;

  padding:

  0

  clamp(
    22px,
    5vw,
    100px
  );

  overflow: hidden;

  isolation: isolate;

  background:

  radial-gradient(

    circle
    at
    17%
    43%,

    rgba(
      36,
      17,
      7,
      0.2
    ),

    transparent
    31%

  ),

  linear-gradient(

    120deg,

    #d1824f
    0%,

    #cb7744
    48%,

    #c16b3b
    100%

  );

  color:
  var(
    --final-dark
  );

}


/* =====================================================
   TEXTURE
===================================================== */

.final-frame__noise {

  position:
  absolute;

  inset:
  0;

  z-index:
  -1;

  pointer-events:
  none;

  opacity:
  0.09;

  background-image:

  url(

  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"

  );

}


/* =====================================================
   DECORATIVE CIRCLES
===================================================== */

.final-frame__circle {

  position:
  absolute;

  z-index:
  -1;

  border:

  1px

  solid

  rgba(
    15,
    15,
    14,
    0.16
  );

  border-radius:
  50%;

  pointer-events:
  none;

}


.final-frame__circle--large {

  width:

  clamp(
    420px,
    47vw,
    900px
  );

  aspect-ratio:
  1;

  top:
  -42%;

  left:
  -16%;

}


.final-frame__circle--small {

  width:

  clamp(
    220px,
    25vw,
    470px
  );

  aspect-ratio:
  1;

  left:
  4%;

  top:
  -8%;

}


/* =====================================================
   MOVING MARQUEE
===================================================== */

.final-frame__marquee {

  position:
  relative;

  width:

  calc(
    100%
    +
    clamp(
      44px,
      10vw,
      200px
    )
  );

  margin-inline:

  calc(

    clamp(
      22px,
      5vw,
      100px
    )

    *

    -1

  );

  overflow:
  hidden;

  border-bottom:

  1px

  solid

  rgba(
    15,
    15,
    14,
    0.16
  );

}


.final-frame__marquee-track {

  display:
  flex;

  width:
  max-content;

  animation:

  finalMarquee

  32s

  linear

  infinite;

}


.final-frame__marquee-group {

  display:
  flex;

  align-items:
  center;

  flex-shrink:
  0;

  min-width:
  max-content;

  padding:

  17px

  0;

}


.final-frame__marquee span {

  margin:

  0

  clamp(
    22px,
    3vw,
    58px
  );

  color:

  rgba(
    16,
    16,
    15,
    0.72
  );

  font-family:

  Arial,

  sans-serif;

  font-size:

  clamp(
    9px,
    0.65vw,
    12px
  );

  font-weight:
  800;

  letter-spacing:
  0.34em;

}


.final-frame__marquee i {

  width:
  5px;

  height:
  5px;

  border-radius:
  50%;

  background:

  var(
    --final-light
  );

}


@keyframes finalMarquee {

  to {

    transform:

    translateX(
      -50%
    );

  }

}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.final-frame__container {

  position:
  relative;

  display:
  grid;

  grid-template-columns:

  minmax(
    340px,
    0.92fr
  )

  minmax(
    430px,
    1.08fr
  );

  align-items:
  center;

  gap:

  clamp(
    55px,
    8vw,
    150px
  );

  width:
  100%;

  max-width:
  1660px;

  min-height:

  calc(
    100svh
    -
    190px
  );

  margin:
  auto;

  padding:

  clamp(
    70px,
    8vw,
    130px
  )

  0;

}


/* =====================================================
   VIEWFINDER
===================================================== */

/* Legacy CSS - currently unused (جزء من FINAL FRAME القديم) */

.final-frame__visual {

  position:
  relative;

  width:
  100%;

}


.final-viewfinder {

  position:
  relative;

  width:

  min(
    100%,
    650px
  );

  aspect-ratio:

  1.05
  /
  1;

  overflow:
  hidden;

  border-radius:

  50%

  50%

  47%

  53%

  /

  52%

  47%

  53%

  48%;

  border:

  1px

  solid

  rgba(
    245,
    238,
    229,
    0.5
  );

  background:
  #171411;

  box-shadow:

  0

  40px

  100px

  rgba(
    48,
    21,
    7,
    0.24
  );

  transform:

  rotate(
    -2deg
  );

}


/* =====================================================
   SLIDES
===================================================== */

.final-viewfinder__images {

  position:
  absolute;

  inset:
  0;

}


.final-viewfinder__slide {

  position:
  absolute;

  inset:
  0;

  margin:
  0;

  opacity:
  0;

  visibility:
  hidden;

  transform:

  scale(
    1.07
  );

  transition:

  opacity

  1.15s

  ease,

  visibility

  1.15s

  ease,

  transform

  6.5s

  ease;

}


.final-viewfinder__slide.is-active {

  opacity:
  1;

  visibility:
  visible;

  transform:

  scale(
    1
  );

}


.final-viewfinder__slide img {

  display:
  block;

  width:
  100%;

  height:
  100%;

  object-fit:
  cover;

}


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

.final-viewfinder__overlay {

  position:
  absolute;

  inset:
  0;

  z-index:
  2;

  pointer-events:
  none;

  background:

  linear-gradient(

    180deg,

    rgba(
      0,
      0,
      0,
      0.24
    ),

    transparent
    30%,

    transparent
    60%,

    rgba(
      0,
      0,
      0,
      0.64
    )

  );

}


/* =====================================================
   VIEWFINDER UI
===================================================== */

.final-viewfinder__top {

  position:
  absolute;

  z-index:
  5;

  top:
  9%;

  right:
  11%;

  left:
  11%;

  display:
  flex;

  align-items:
  center;

  justify-content:
  space-between;

  color:
  #fff;

  font-family:

  Arial,

  sans-serif;

  font-size:
  9px;

  font-weight:
  700;

  letter-spacing:
  0.2em;

}


.final-viewfinder__record {

  display:
  flex;

  align-items:
  center;

  gap:
  8px;

}


.final-viewfinder__record span {

  width:
  7px;

  height:
  7px;

  border-radius:
  50%;

  background:
  #ff563f;

  box-shadow:

  0

  0

  0

  5px

  rgba(
    255,
    86,
    63,
    0.16
  );

  animation:

  finalRecord

  1.5s

  ease

  infinite;

}


@keyframes finalRecord {

  50% {

    opacity:
    0.3;

  }

}


.final-viewfinder__format {

  display:
  flex;

  align-items:
  center;

  gap:
  10px;

}


.final-viewfinder__format span {

  opacity:
  0.58;

}


/* =====================================================
   FOCUS MARK
===================================================== */

.final-viewfinder__focus {

  position:
  absolute;

  z-index:
  5;

  top:
  50%;

  left:
  50%;

  width:
  66px;

  height:
  52px;

  transform:

  translate(
    -50%,
    -50%
  );

}


.final-viewfinder__focus span {

  position:
  absolute;

  width:
  16px;

  height:
  16px;

}


.final-viewfinder__focus span:nth-child(1) {

  top:
  0;

  left:
  0;

  border-top:

  1px

  solid

  #fff;

  border-left:

  1px

  solid

  #fff;

}


.final-viewfinder__focus span:nth-child(2) {

  top:
  0;

  right:
  0;

  border-top:

  1px

  solid

  #fff;

  border-right:

  1px

  solid

  #fff;

}


.final-viewfinder__focus span:nth-child(3) {

  bottom:
  0;

  left:
  0;

  border-bottom:

  1px

  solid

  #fff;

  border-left:

  1px

  solid

  #fff;

}


.final-viewfinder__focus span:nth-child(4) {

  right:
  0;

  bottom:
  0;

  border-right:

  1px

  solid

  #fff;

  border-bottom:

  1px

  solid

  #fff;

}


/* =====================================================
   CORNERS
===================================================== */

.final-viewfinder__corner {

  position:
  absolute;

  z-index:
  5;

  width:
  25px;

  height:
  25px;

  opacity:
  0.55;

}


.final-viewfinder__corner--one {

  top:
  15%;

  left:
  12%;

  border-top:

  1px

  solid

  #fff;

  border-left:

  1px

  solid

  #fff;

}


.final-viewfinder__corner--two {

  top:
  15%;

  right:
  12%;

  border-top:

  1px

  solid

  #fff;

  border-right:

  1px

  solid

  #fff;

}


.final-viewfinder__corner--three {

  bottom:
  15%;

  left:
  12%;

  border-bottom:

  1px

  solid

  #fff;

  border-left:

  1px

  solid

  #fff;

}


.final-viewfinder__corner--four {

  right:
  12%;

  bottom:
  15%;

  border-right:

  1px

  solid

  #fff;

  border-bottom:

  1px

  solid

  #fff;

}


/* =====================================================
   BOTTOM CAMERA UI
===================================================== */

.final-viewfinder__bottom {

  position:
  absolute;

  z-index:
  5;

  right:
  12%;

  bottom:
  10%;

  left:
  12%;

  display:
  flex;

  justify-content:
  space-between;

  color:

  rgba(
    255,
    255,
    255,
    0.7
  );

  font-family:

  Arial,

  sans-serif;

  font-size:
  8px;

  font-weight:
  700;

  letter-spacing:
  0.27em;

}


/* =====================================================
   CHANGING CATEGORY
===================================================== */

.final-viewfinder__category {

  position:
  absolute;

  z-index:
  6;

  right:
  10%;

  bottom:
  19%;

  display:
  flex;

  align-items:
  center;

  gap:
  13px;

  color:
  #fff;

}


.final-viewfinder__category > span {

  color:

  rgba(
    255,
    255,
    255,
    0.38
  );

  font-family:

  Arial,

  sans-serif;

  font-size:

  clamp(
    30px,
    4vw,
    62px
  );

  font-weight:
  300;

  line-height:
  1;

}


.final-viewfinder__category div {

  display:
  flex;

  flex-direction:
  column;

  gap:
  5px;

}


.final-viewfinder__category small {

  color:

  rgba(
    255,
    255,
    255,
    0.55
  );

  font-family:

  Arial,

  sans-serif;

  font-size:
  7px;

  letter-spacing:
  0.28em;

}


.final-viewfinder__category strong {

  font-family:

  Arial,

  sans-serif;

  font-size:

  clamp(
    12px,
    1vw,
    17px
  );

  letter-spacing:
  0.1em;

}


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

.final-frame__content {

  position:
  relative;

  z-index:
  4;

  direction:
  rtl;

  text-align:
  right;

}


.final-frame__eyebrow {

  display:
  flex;

  align-items:
  center;

  gap:
  11px;

  margin-bottom:

  clamp(
    22px,
    3vw,
    40px
  );

  color:

  rgba(
    16,
    16,
    15,
    0.65
  );

  font-family:

  Arial,

  sans-serif;

  font-size:

  clamp(
    8px,
    0.58vw,
    11px
  );

  font-weight:
  800;

  letter-spacing:
  0.3em;

}


.final-frame__eyebrow span {

  width:
  8px;

  height:
  8px;

  border-radius:
  50%;

  background:

  var(
    --final-light
  );

}


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

.final-frame__title {

  display:
  flex;

  flex-direction:
  column;

  align-items:
  flex-start;

  margin:
  0;

  font-family:

  "Cairo",

  sans-serif;

  font-weight:
  500;

  line-height:
  0.98;

  letter-spacing:

  -0.045em;

}


.final-frame__title-top {

  margin-bottom:
  8px;

  color:

  var(
    --final-dark
  );

  font-size:

  clamp(
    27px,
    3.3vw,
    61px
  );

  font-weight:
  500;

}


.final-frame__title-main {

  color:

  var(
    --final-light
  );

  font-size:

  clamp(
    49px,
    6vw,
    108px
  );

  font-weight:
  500;

}


.final-frame__title-accent {

  position:
  relative;

  color:

  var(
    --final-light
  );

  font-size:

  clamp(
    49px,
    6vw,
    108px
  );

  font-weight:
  500;

}


.final-frame__title-accent::after {

  content:
  "";

  position:
  absolute;

  right:
  4%;

  bottom:
  -8px;

  width:
  61%;

  height:
  4px;

  background:

  var(
    --final-dark
  );

  transform-origin:
  right;

  animation:

  finalUnderline

  3.5s

  ease-in-out

  infinite;

}


@keyframes finalUnderline {

  0%,
  100% {

    transform:

    scaleX(
      0.18
    );

  }


  50% {

    transform:

    scaleX(
      1
    );

  }

}


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

.final-frame__description {

  max-width:
  630px;

  margin:

  clamp(
    30px,
    4vw,
    55px
  )

  0

  0;

  color:

  rgba(
    16,
    16,
    15,
    0.63
  );

  font-family:

  "Cairo",

  sans-serif;

  font-size:

  clamp(
    13px,
    1vw,
    17px
  );

  font-weight:
  500;

  line-height:
  2;

}


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

.final-frame__actions {

  display:
  flex;

  align-items:
  center;

  gap:

  clamp(
    22px,
    3vw,
    48px
  );

  margin-top:

  clamp(
    27px,
    3.5vw,
    48px
  );

}


.final-frame__button {

  display:
  flex;

  align-items:
  center;

  justify-content:
  space-between;

  gap:
  45px;

  min-width:

  clamp(
    245px,
    19vw,
    350px
  );

  padding:

  19px

  22px;

  border:

  1px

  solid

  var(
    --final-dark
  );

  color:

  var(
    --final-dark
  );

  font-family:

  "Cairo",

  sans-serif;

  font-size:

  clamp(
    11px,
    0.8vw,
    14px
  );

  font-weight:
  700;

  text-decoration:
  none;

  transition:

  color

  0.4s

  ease,

  background

  0.4s

  ease,

  transform

  0.4s

  ease;

}


.final-frame__button i {

  display:
  grid;

  width:
  31px;

  height:
  31px;

  place-items:
  center;

  border-radius:
  50%;

  background:

  var(
    --final-dark
  );

  color:

  var(
    --final-light
  );

  font-style:
  normal;

  transition:

  color

  0.4s

  ease,

  background

  0.4s

  ease,

  transform

  0.4s

  ease;

}


.final-frame__button:hover {

  color:

  var(
    --final-light
  );

  background:

  var(
    --final-dark
  );

  transform:

  translateY(
    -4px
  );

}


.final-frame__button:hover i {

  color:

  var(
    --final-dark
  );

  background:

  var(
    --final-light
  );

  transform:

  translateX(
    -5px
  );

}


.final-frame__email {

  position:
  relative;

  color:

  var(
    --final-dark
  );

  font-family:

  Arial,

  sans-serif;

  font-size:

  clamp(
    8px,
    0.6vw,
    11px
  );

  font-weight:
  800;

  letter-spacing:
  0.25em;

  text-decoration:
  none;

}


.final-frame__email::after {

  content:
  "";

  position:
  absolute;

  right:
  0;

  bottom:
  -8px;

  width:
  100%;

  height:
  1px;

  background:

  var(
    --final-dark
  );

  transform-origin:
  right;

  transition:

  transform

  0.35s

  ease;

}


.final-frame__email:hover::after {

  transform:

  scaleX(
    0.25
  );

}


/* =====================================================
   SERVICES
===================================================== */

.final-frame__services {

  display:
  flex;

  flex-wrap:
  wrap;

  gap:

  8px

  20px;

  margin-top:

  clamp(
    32px,
    4vw,
    62px
  );

}


.final-frame__services span {

  position:
  relative;

  color:

  rgba(
    16,
    16,
    15,
    0.58
  );

  font-family:

  "Cairo",

  sans-serif;

  font-size:

  clamp(
    9px,
    0.65vw,
    12px
  );

  font-weight:
  600;

}


.final-frame__services span:not(
:last-child
)::after {

  content:
  "•";

  position:
  absolute;

  left:
  -13px;

  color:

  var(
    --final-light
  );

}


/* End of Legacy CSS block (FINAL FRAME / VIEWFINDER — currently unused).
   القسم الشغال فعليًا اسمه FINAL CONTACT وبيبدأ تحت. */


/* =========================================================
   FINAL CONTACT — NEXT FRAME
========================================================= */

.final-contact {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  padding:
    clamp(90px, 10vw, 150px)
    clamp(24px, 6vw, 110px)
    34px;
  overflow: hidden;
  direction: rtl;
  color: #11100f;

  background:
    radial-gradient(
      circle at 72% 35%,
      rgba(255, 228, 202, 0.22),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #c87343 0%,
      #d5804d 45%,
      #c66f3e 100%
    );
}


/* =========================================================
   BACKGROUND DETAILS
========================================================= */

.final-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(
      rgba(20, 18, 16, 0.16) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(20, 18, 16, 0.1) 1px,
      transparent 1px
    );
  background-size:
    100% 100%,
    25% 100%;
}


.final-contact::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  opacity: 0.35;
  background: #171513;
}


.final-contact__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.1;
  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.75) 0.55px,
      transparent 0.7px
    );
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}


.final-contact__rings {
  position: absolute;
  top: -230px;
  left: -180px;
  z-index: -2;
  width: 700px;
  height: 700px;
  pointer-events: none;
}


.final-contact__rings span {
  position: absolute;
  border: 1px solid rgba(17, 16, 15, 0.2);
  border-radius: 50%;
}


.final-contact__rings span:nth-child(1) {
  inset: 0;
}


.final-contact__rings span:nth-child(2) {
  inset: 95px;
}


.final-contact__rings span:nth-child(3) {
  inset: 190px;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.final-contact__shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(0, 0.92fr)
    minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(60px, 7vw, 135px);
  width: min(100%, 1660px);
  min-height: calc(100vh - 210px);
  margin-inline: auto;
}


/* =========================================================
   MAIN MESSAGE
========================================================= */

.final-contact__content {
  position: relative;
  max-width: 700px;
}


.final-contact__eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 31px;
  color: rgba(17, 16, 15, 0.74);
  font-family:
    Arial,
    sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.36em;
  direction: ltr;
  justify-content: flex-end;
}


.final-contact__rec {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f6eee4;
  box-shadow:
    0 0 0 5px
    rgba(246, 238, 228, 0.11);
}


.final-contact__rec::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(246, 238, 228, 0.35);
  border-radius: inherit;
  animation:
    contactRecPulse
    2.2s
    ease-out
    infinite;
}


@keyframes contactRecPulse {

  0% {
    opacity: 0.9;
    transform: scale(0.65);
  }

  75%,
  100% {
    opacity: 0;
    transform: scale(1.65);
  }

}


.final-contact__content h2 {
  margin: 0;
  color: #11100f;
  font-family:
    "Cairo",
    sans-serif;
  font-size:
    clamp(
      3.2rem,
      5.25vw,
      6.5rem
    );
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.055em;
}


.final-contact__content h2 > strong {
  display: block;
  margin-top: 10px;
  color: #f7eee4;
  font-weight: 400;
}


.final-contact__content h2 em {
  position: relative;
  display: inline-block;
  color: #f7eee4;
  font-style: normal;
}


.final-contact__content h2 em::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 2px;
  width: 100%;
  height: 2px;
  opacity: 0.45;
  background: #f7eee4;
}


.final-contact__content > p {
  max-width: 570px;
  margin:
    clamp(30px, 3vw, 46px)
    0
    0
    auto;
  color: rgba(29, 24, 20, 0.68);
  font-family:
    "Cairo",
    sans-serif;
  font-size:
    clamp(
      0.86rem,
      0.95vw,
      1.05rem
    );
  font-weight: 500;
  line-height: 2;
}


.final-contact__services {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 13px;
  margin-top: 42px;
  color: rgba(24, 21, 18, 0.63);
  font-family:
    "Cairo",
    sans-serif;
  font-size: 11px;
  font-weight: 700;
}


.final-contact__services i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #f7eee4;
}


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

.contact-console {
  position: relative;
  overflow: hidden;
  width: 100%;
  color: #f3eee7;
  border: 1px solid rgba(17, 16, 15, 0.34);
  border-radius: 2px;
  background: #11110f;
  box-shadow:
    0 42px 90px
    rgba(55, 27, 12, 0.25);
}


.contact-console::before {
  content: "";
  position: absolute;
  top: -190px;
  left: -130px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(
      circle,
      rgba(204, 121, 69, 0.2),
      transparent 68%
    );
}


.contact-console__top,
.contact-console__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 53px;
  padding-inline: 24px;
  color: rgba(242, 237, 229, 0.46);
  font-family:
    Arial,
    sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.24em;
}


.contact-console__top {
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.contact-console__bottom {
  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.contact-console__top > div,
.contact-console__bottom > div {
  display: flex;
  align-items: center;
  gap: 9px;
}


.contact-console__live {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cf7043;
  box-shadow:
    0 0 12px
    rgba(207, 112, 67, 0.8);
}


.contact-console__bottom i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cf7043;
}


.contact-console__screen {
  position: relative;
  z-index: 2;
  padding:
    clamp(25px, 3vw, 42px);
}


.contact-console__screen-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}


.contact-console__screen-head span {
  color: rgba(242, 237, 229, 0.65);
  font-family:
    "Cairo",
    sans-serif;
  font-size: 12px;
}


.contact-console__screen-head strong {
  color: #cc7945;
  font-family:
    Arial,
    sans-serif;
  font-size: 8px;
  letter-spacing: 0.28em;
}


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

.contact-channel {
  position: relative;
  display: grid;
  grid-template-columns:
    37px
    minmax(0, 1fr)
    42px;
  align-items: center;
  gap: 15px;
  min-height: 105px;
  padding: 18px 20px;
  overflow: hidden;
  color: #f2ede5;
  text-decoration: none;
  border:
    1px solid
    rgba(255, 255, 255, 0.11);
  background:
    rgba(255, 255, 255, 0.025);
  transition:
    color 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease,
    transform 0.45s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.contact-channel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #cc7945;
  transform:
    translateX(105%);
  transition:
    transform 0.55s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.contact-channel:hover {
  color: #11110f;
  border-color: #cc7945;
  transform: translateY(-3px);
}


.contact-channel:hover::before {
  transform:
    translateX(0);
}


.contact-channel--main {
  min-height: 126px;
  margin-bottom: 12px;
  border-color:
    rgba(204, 121, 69, 0.48);
  background:
    linear-gradient(
      120deg,
      rgba(204, 121, 69, 0.2),
      rgba(255, 255, 255, 0.025)
    );
}


.contact-console__grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
}


.contact-channel__number {
  align-self: start;
  padding-top: 3px;
  color: #cc7945;
  font-family:
    Arial,
    sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  transition:
    color 0.4s ease;
}


.contact-channel:hover
.contact-channel__number {
  color: #11110f;
}


.contact-channel__copy {
  min-width: 0;
}


.contact-channel__copy small {
  display: block;
  margin-bottom: 7px;
  color:
    rgba(
      242,
      237,
      229,
      0.43
    );
  font-family:
    "Cairo",
    sans-serif;
  font-size: 9px;
  line-height: 1.6;
  transition:
    color 0.4s ease;
}


.contact-channel__copy strong {
  display: block;
  overflow-wrap: anywhere;
  color: inherit;
  font-family:
    "Cairo",
    sans-serif;
  font-size:
    clamp(
      0.78rem,
      0.9vw,
      0.96rem
    );
  font-weight: 700;
  line-height: 1.65;
}


.contact-channel:hover
.contact-channel__copy small {
  color:
    rgba(
      17,
      16,
      15,
      0.62
    );
}


.contact-channel__arrow {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  color: #11110f;
  border-radius: 50%;
  background: #f0e9df;
  font-family:
    Arial,
    sans-serif;
  font-size: 15px;
  transition:
    color 0.4s ease,
    background 0.4s ease,
    transform 0.45s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.contact-channel:hover
.contact-channel__arrow {
  color: #f3eee7;
  background: #11110f;
  transform:
    rotate(-45deg);
}


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

.final-contact__footer {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns:
    1fr
    auto
    1fr;
  align-items: end;
  gap: 30px;
  width: min(100%, 1660px);
  margin:
    clamp(60px, 7vw, 105px)
    auto
    0;
  padding-top: 28px;
  color:
    rgba(
      21,
      18,
      16,
      0.62
    );
  border-top:
    1px solid
    rgba(17, 16, 15, 0.28);
  font-family:
    Arial,
    sans-serif;
  font-size: 7px;
  letter-spacing: 0.25em;
}


.final-contact__back {
  display: flex;
  align-items: center;
  gap: 11px;
  justify-self: start;
  color: inherit;
  text-decoration: none;
  transition:
    color 0.3s ease;
}


.final-contact__back:hover {
  color: #f7eee4;
}


.final-contact__brand {
  display: flex;
  align-items: flex-end;
  gap: 17px;
  color: #11100f;
}


.final-contact__brand strong {
  font-family:
    Arial,
    sans-serif;
  font-size: 13px;
  line-height: 0.82;
  letter-spacing: -0.07em;
}


.final-contact__brand span {
  padding-bottom: 1px;
  color:
    rgba(
      17,
      16,
      15,
      0.42
    );
  font-size: 6px;
  letter-spacing: 0.29em;
}


.final-contact__footer > span {
  justify-self: end;
  text-align: left;
}


/* =========================================================
   REVEAL SUPPORT
========================================================= */

.final-contact
.js-reveal {
  opacity: 0;
  transform:
    translateY(30px);
  transition:
    opacity 0.9s ease,
    transform 0.9s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.final-contact
.js-reveal.is-visible {
  opacity: 1;
  transform:
    translateY(0);
}


.final-contact
.contact-console.js-reveal {
  transition-delay: 0.12s;
}


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

@media (
  max-width: 1180px
) {

  .final-contact {
    min-height: auto;
  }


  .final-contact__shell {
    grid-template-columns:
      minmax(0, 0.8fr)
      minmax(470px, 1.2fr);
    gap: 50px;
    min-height: auto;
  }


  .final-contact__content h2 {
    font-size:
      clamp(
        3rem,
        5.7vw,
        5.3rem
      );
  }

}


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

@media (
  max-width: 900px
) {

  .final-contact {
    min-height: auto;
    padding:
      85px
      18px
      25px;
  }


  .final-contact__rings {
    top: -170px;
    left: -230px;
    width: 520px;
    height: 520px;
  }


  .final-contact__shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 58px;
    min-height: auto;
  }


  .final-contact__content {
    max-width: 100%;
  }


  .final-contact__eyebrow {
    justify-content: flex-start;
    margin-bottom: 23px;
    font-size: 8px;
    letter-spacing: 0.25em;
  }


  .final-contact__content h2 {
    max-width: 600px;
    font-size:
      clamp(
        3rem,
        13.5vw,
        5.1rem
      );
    line-height: 1;
  }


  .final-contact__content > p {
    max-width: 620px;
    margin-top: 27px;
    font-size: 0.88rem;
    line-height: 1.9;
  }


  .final-contact__services {
    justify-content: flex-start;
    margin-top: 29px;
    font-size: 10px;
  }


  .contact-console {
    box-shadow:
      0 25px 55px
      rgba(
        54,
        26,
        12,
        0.22
      );
  }


  .final-contact__footer {
    grid-template-columns:
      1fr
      auto;
    gap: 25px;
    margin-top: 65px;
  }


  .final-contact__footer > span {
    display: none;
  }

}


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

@media (
  max-width: 620px
) {

  .final-contact {
    padding-inline: 14px;
  }


  .final-contact__content h2 {
    font-size:
      clamp(
        2.75rem,
        14vw,
        4.15rem
      );
  }


  .final-contact__content > p br {
    display: none;
  }


  .contact-console__top,
  .contact-console__bottom {
    min-height: 46px;
    padding-inline: 14px;
    font-size: 5.8px;
    letter-spacing: 0.15em;
  }


  .contact-console__top > span {
    display: none;
  }


  .contact-console__screen {
    padding:
      22px
      13px;
  }


  .contact-console__screen-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
  }


  .contact-console__screen-head span {
    font-size: 11px;
  }


  .contact-console__grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }


  .contact-channel,
  .contact-channel--main {
    min-height: 91px;
    padding:
      15px
      14px;
    grid-template-columns:
      27px
      minmax(0, 1fr)
      35px;
    gap: 10px;
  }


  .contact-channel--main {
    min-height: 105px;
  }


  .contact-channel__copy strong {
    font-size: 0.77rem;
  }


  .contact-channel__arrow {
    width: 34px;
    height: 34px;
  }


  .contact-console__bottom > span:first-child {
    display: none;
  }


  .final-contact__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-top: 22px;
  }


  .final-contact__back {
    font-size: 6px;
    letter-spacing: 0.15em;
  }


  .final-contact__brand {
    gap: 9px;
  }


  .final-contact__brand strong {
    font-size: 10px;
  }


  .final-contact__brand span {
    display: none;
  }

}


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

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

  .final-contact *,
  .final-contact *::before,
  .final-contact *::after {
    animation-duration:
      0.01ms !important;
    animation-iteration-count:
      1 !important;
    scroll-behavior:
      auto !important;
  }

}


/* =========================================================
   DIRECTOR MONITOR — SLIDER TRANSITIONS
========================================================= */

.monitor-screen__media img {

  opacity: 1;

  transform: scale(1);

  transition:

    opacity 0.26s ease,

    transform 0.65s cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

}


.monitor-screen__copy small,

.monitor-screen__copy h3,

.monitor-screen__copy p {

  opacity: 1;

  transform: translateY(0);

  transition:

    opacity 0.25s ease,

    transform 0.45s cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

}


.monitor-screen.is-changing
.monitor-screen__copy small,

.monitor-screen.is-changing
.monitor-screen__copy h3,

.monitor-screen.is-changing
.monitor-screen__copy p {

  transform: translateY(9px);

}


.monitor-control {

  cursor: pointer;

  position: relative;

  z-index: 5;

}


.monitor-control.active,

.monitor-control.is-active {

  background: #0b0c0f;

  color: #ffffff;

  border-color: #0b0c0f;

}


.monitor-control.active span,

.monitor-control.is-active span {

  color: #cc7945;

}