@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

img {
  width: 100%;
}

::-moz-selection {
  text-shadow: none;
}

::selection {
  text-shadow: none;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins/Poppins-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins";
}

body {
  font-family: "Poppins";
}

html,
body {
  height: 100%;
  scroll-behavior: auto !important;
}

:root {
  --HeadingFont: "Poppins", sans-serif;
  --BodyFont: "Poppins", sans-serif;
  --PageBackground: #000;
  --PageBackgroundSoft: #000;
  --TextPrimary: #f4f4f0;
  --TextSecondary: #a2a29d;
  --TextMuted: #686864;
  --LineColor: rgba(255, 255, 255, 0.13);
  --LineColorSoft: rgba(255, 255, 255, 0.07);
  --ButtonBackground: #f3f3ef;
  --ButtonText: #080808;
  --HeaderBackground: #000;
}

/* =========================================================
   Reset and common styles
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--PageBackground);
  color: var(--TextPrimary);
  font-family: var(--BodyFont);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.MenuIsOpen {
  overflow: hidden;
}

button,
input,
textarea,
select,
a {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

figure,
h1,
h2,
h3,
p {
  margin: 0;
}

::-moz-selection {
  background: var(--TextPrimary);
  color: var(--PageBackground);
}

::selection {
  background: var(--TextPrimary);
  color: var(--PageBackground);
}

.PageWrapper {
  min-height: 100vh;
  overflow: clip;
}

/*
 * Bootstrap container override.
 * At 1920px this leaves approximately 48px on each side.
 */
.container {
  width: calc(100% - 96px);
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.HeadingFont {
  font-family: var(--HeadingFont);
}

.BodyFont {
  font-family: var(--BodyFont);
}

/* =========================================================
   Common button
========================================================= */
.CommonButton {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  overflow: hidden;
  padding: 14px 25px;
  border: 0;
  border-radius: 999px;
  background: var(--ButtonBackground);
  color: var(--ButtonText);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.CommonButton::before {
  position: absolute;
  inset: 0;
  background: #ffffff;
  content: "";
  transform: translateX(-102%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.CommonButton:hover {
  transform: translateY(-2px);
}
.CommonButton:hover::before {
  transform: translateX(0);
}
.CommonButton:hover .CommonButtonIcon {
  transform: translate(3px, -3px);
}
.CommonButton:focus-visible {
  outline: 2px solid var(--TextPrimary);
  outline-offset: 4px;
}

.CommonButtonText,
.CommonButtonIcon {
  position: relative;
  z-index: 1;
}

.CommonButtonIcon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform 0.3s ease;
}

/* =========================================================
   Common text link
========================================================= */
.TextLink {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  color: var(--TextPrimary);
  font-size: 13px;
  font-weight: 500;
}
.TextLink:hover .TextLinkText::after {
  transform: scaleX(1);
}
.TextLink:hover .TextLinkIcon {
  transform: translate(3px, -3px);
}
.TextLink:focus-visible {
  outline: 2px solid var(--TextPrimary);
  outline-offset: 4px;
}

.TextLinkText {
  position: relative;
  padding-bottom: 5px;
}
.TextLinkText::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0.32);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.TextLinkIcon {
  width: 15px;
  height: 15px;
  transition: transform 0.3s ease;
}

/* =========================================================
   Header
========================================================= */
/* =========================================================
   Animated Morphing Header
========================================================= */
#SiteHeader {
  --HeaderExpandedHeight: 82px;
  --HeaderCollapsedWidth: 112px;
  --HeaderCollapsedHeight: 72px;
  --HeaderEase: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  background: transparent;
  pointer-events: none;
  transition: background-color 0.45s ease, backdrop-filter 0.45s ease;
}
#SiteHeader::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--LineColorSoft);
  content: "";
  opacity: 0;
  transform: scaleX(0.82);
  transition: opacity 0.45s ease, transform 0.8s var(--HeaderEase);
}
#SiteHeader > .container {
  position: relative;
}
#SiteHeader {
  /* =====================================================
     Header shell
  ===================================================== */
}
#SiteHeader .SiteHeaderInner {
  position: relative;
  display: flex;
  width: var(--HeaderCollapsedWidth);
  min-height: var(--HeaderCollapsedHeight);
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.78);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22);
  pointer-events: auto;
  backdrop-filter: blur(16px);
  will-change: width, min-height, margin-top, border-radius;
  transition: width 0.9s var(--HeaderEase), min-height 0.72s var(--HeaderEase), margin-top 0.72s var(--HeaderEase), border-radius 0.72s var(--HeaderEase), border-color 0.45s ease, background-color 0.45s ease, box-shadow 0.45s ease;
}
#SiteHeader {
  /* =====================================================
     Logo
  ===================================================== */
}
#SiteHeader .SiteHeaderBrand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: inline-flex;
  width: 82px;
  height: 48px;
  align-items: center;
  justify-content: flex-start;
  color: var(--TextPrimary);
  text-decoration: none;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: left, transform;
  transition: left 0.88s var(--HeaderEase), transform 0.88s var(--HeaderEase), width 0.55s var(--HeaderEase);
}
#SiteHeader .SiteHeaderBrand:focus-visible {
  outline: 2px solid var(--TextPrimary);
  outline-offset: 5px;
}
#SiteHeader .SiteHeaderLogo {
  display: block;
  width: 82px;
  height: auto;
  max-height: 45px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
  will-change: opacity, transform;
}
#SiteHeader {
  /* =====================================================
     Navigation
  ===================================================== */
}
#SiteHeader .SiteHeaderNavigation {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(28px, 2.5vw, 44px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translate(-50%, -35%) scale(0.96);
  will-change: opacity, transform;
  transition: opacity 0.42s ease, transform 0.72s var(--HeaderEase), visibility 0s linear 0.5s;
}
#SiteHeader .SiteHeaderNavigationLink {
  position: relative;
  padding: 12px 0;
  color: var(--TextSecondary);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}
#SiteHeader .SiteHeaderNavigationLink::after {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--TextPrimary);
  content: "";
  opacity: 0;
  transform: translate(-50%, 5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#SiteHeader .SiteHeaderNavigationLink:hover, #SiteHeader .SiteHeaderNavigationLink.IsActive {
  color: var(--TextPrimary);
}
#SiteHeader .SiteHeaderNavigationLink.IsActive::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
#SiteHeader .SiteHeaderNavigationLink:focus-visible {
  outline: 2px solid var(--TextPrimary);
  outline-offset: 4px;
}
#SiteHeader {
  /* =====================================================
     Actions
  ===================================================== */
}
#SiteHeader .SiteHeaderActions {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translate(24px, -50%);
  will-change: opacity, transform;
  transition: opacity 0.42s ease, transform 0.72s var(--HeaderEase), 623 visibility 0s linear 0.5s;
}
#SiteHeader .SiteHeaderButton {
  min-height: 50px;
  padding-right: 23px;
  padding-left: 23px;
}
#SiteHeader {
  /* =====================================================
     Mobile menu button
  ===================================================== */
}
#SiteHeader .MenuToggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--TextPrimary);
}
#SiteHeader .MenuToggle:focus-visible {
  outline: 2px solid var(--TextPrimary);
  outline-offset: 4px;
}
#SiteHeader .MenuToggle.IsOpen .MenuToggleLine:first-child {
  transform: translateY(4px) rotate(45deg);
}
#SiteHeader .MenuToggle.IsOpen .MenuToggleLine:last-child {
  transform: translateY(-4px) rotate(-45deg);
}
#SiteHeader .MenuToggleLine {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s ease;
}
#SiteHeader {
  /* =====================================================
     Expanded state
  ===================================================== */
}
#SiteHeader.IsExpanded, #SiteHeader.IsScrolled {
  background: rgba(5, 5, 5, 0.86);
  backdrop-filter: blur(18px);
}
#SiteHeader.IsExpanded::after, #SiteHeader.IsScrolled::after {
  opacity: 1;
  transform: scaleX(1);
}
#SiteHeader.IsExpanded .SiteHeaderInner, #SiteHeader.IsScrolled .SiteHeaderInner {
  width: 100%;
  min-height: var(--HeaderExpandedHeight);
  margin-top: 0;
  overflow: visible;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#SiteHeader.IsExpanded .SiteHeaderBrand, #SiteHeader.IsScrolled .SiteHeaderBrand {
  left: 0;
  transform: translate(0, -50%) !important;
}
#SiteHeader.IsExpanded .SiteHeaderNavigation, #SiteHeader.IsScrolled .SiteHeaderNavigation {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.18s, 0.18s, 0s;
  list-style: none;
}
#SiteHeader.IsExpanded .SiteHeaderActions, #SiteHeader.IsScrolled .SiteHeaderActions {
  opacity: 1 !important;
  pointer-events: auto;
  visibility: visible !important;
  transform: translate(0, -50%) !important;
  transition-delay: 0.24s, 0.24s, 0s;
}
#SiteHeader {
  /* =====================================================
     Loading entrance
  ===================================================== */
}
#SiteHeader:not(.IsReady) .SiteHeaderInner {
  opacity: 0;
  transform: translateY(-18px) scale(0.88);
  position: relative;
  border: none;
}
#SiteHeader.IsReady .SiteHeaderInner {
  opacity: 1;
  transform: translateY(0) scale(1);
  position: relative;
  transition: width 0.9s var(--HeaderEase), min-height 0.72s var(--HeaderEase), margin-top 0.72s var(--HeaderEase), border-radius 0.72s var(--HeaderEase), border-color 0.45s ease, background-color 0.45s ease, box-shadow 0.45s ease, opacity 0.7s ease, transform 0.85s var(--HeaderEase);
  border: none;
}

/* =========================================================
   Mobile menu
========================================================= */
#MobileMenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  padding-top: 105px;
  background: var(--PageBackground);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
#MobileMenu .SiteFooterSocials {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  margin-top: 35px;
}
#MobileMenu .SiteFooterSocialLink {
  position: relative;
  padding-bottom: 5px;
  color: var(--FooterSecondary);
  font-size: 9px;
  font-weight: 500;
  text-decoration: none;
}
#MobileMenu .SiteFooterSocialLink::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#MobileMenu .SiteFooterSocialLink:hover {
  color: var(--FooterPrimary);
}
#MobileMenu .SiteFooterSocialLink:hover::after {
  transform: scaleX(1);
}
#MobileMenu.IsOpen {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}
#MobileMenu .MobileMenuNavigation {
  display: flex;
  flex-direction: column;
  padding-top: 46px;
}
#MobileMenu .MobileMenuLink {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  color: var(--TextPrimary);
  font-family: var(--HeadingFont);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
}
#MobileMenu .MobileMenuLink:not(:last-of-type) {
  border-bottom: 1px solid var(--LineColorSoft);
}
#MobileMenu .MobileMenuNumber {
  color: var(--TextMuted);
  font-family: var(--BodyFont);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
#MobileMenu .MobileMenuButton {
  align-self: flex-start;
  margin-top: 42px;
}

/* =========================================================
   Hero
========================================================= */
#HeroSection {
  position: relative;
  min-height: 100vh;
  padding-top: 74px;
  overflow: clip;
}
#HeroSection .HeroSectionInner {
  display: grid;
  min-height: calc(100vh - 104px);
  grid-template-columns: minmax(0, 1.06fr) minmax(480px, 0.94fr);
  align-items: stretch;
}
#HeroSection {
  /* ---------------------------------------------
       Hero content
    --------------------------------------------- */
}
#HeroSection .HeroSectionContent {
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-top: 42px;
  padding-right: 64px;
  padding-bottom: 40px;
}
#HeroSection .HeroSectionMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
#HeroSection .HeroSectionEyebrow,
#HeroSection .HeroSectionLocation {
  color: var(--TextSecondary);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
#HeroSection .HeroSectionEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
#HeroSection .HeroSectionEyebrow::before {
  display: block;
  width: 30px;
  height: 1px;
  background: var(--TextSecondary);
  content: "";
  opacity: 0.7;
}
#HeroSection .HeroSectionMain {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-top: 55px;
  padding-bottom: 0px;
}
#HeroSection .HeroSectionHeading {
  max-width: 1040px;
  color: var(--TextPrimary);
  font-size: 102px;
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.96;
}
#HeroSection .HeroSectionHeadingLine {
  display: block;
  overflow: hidden;
  padding-right: 14px;
  padding-bottom: 7px;
}
#HeroSection .HeroSectionHeadingText {
  display: block;
}
#HeroSection .HeroSectionHeadingAccent {
  color: var(--TextSecondary);
  font-style: italic;
  font-weight: 400;
}
#HeroSection .HeroSectionInformation {
  max-width: 900px;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr);
  align-items: end;
  gap: 60px;
  margin-top: 4px;
}
#HeroSection .HeroSectionDescription {
  max-width: 420px;
  color: var(--TextSecondary);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 40px;
}
#HeroSection .HeroSectionActions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
}
#HeroSection .HeroSectionFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--LineColorSoft);
}
#HeroSection .HeroSectionExpertise {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}
#HeroSection .HeroSectionExpertise span {
  position: relative;
  color: var(--TextSecondary);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#HeroSection .HeroSectionExpertise span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  right: -16px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--TextMuted);
  content: "";
  transform: translateY(-50%);
}
#HeroSection .HeroSectionIndex {
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#HeroSection {
  /* ---------------------------------------------
       Hero image
    --------------------------------------------- */
}
#HeroSection .HeroSectionMedia {
  position: absolute;
  min-width: 0;
  top: 0px;
  right: 0;
  min-height: 650px;
  overflow: hidden;
  background: var(--PageBackgroundSoft);
}
#HeroSection .HeroSectionImage {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 18%;
     object-position: center 18%;
  filter: grayscale(1) brightness(0.75) contrast(1.08);
  transform: scale(1.04);
  will-change: transform;
}
#HeroSection .HeroSectionMedia::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 150px;
  background: linear-gradient(90deg, var(--PageBackground) 0%, rgba(7, 7, 7, 0.88) 20%, rgba(7, 7, 7, 0.3) 68%, transparent 100%);
  content: "";
  pointer-events: none;
}
#HeroSection .HeroSectionMedia::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 180px;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 7, 7, 0.72) 100%);
  content: "";
  pointer-events: none;
}
#HeroSection .HeroSectionImageShade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, transparent 45%, rgba(0, 0, 0, 0.14) 100%);
  pointer-events: none;
}
#HeroSection .HeroSectionCaption {
  position: absolute;
  right: 34px;
  bottom: 34px;
  left: 80px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: #ffffff;
}
#HeroSection .HeroSectionCaptionName {
  font-size: 12px;
  font-weight: 500;
}
#HeroSection .HeroSectionCaptionRole {
  color: rgba(255, 255, 255, 0.65);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-align: right;
  text-transform: uppercase;
}
#HeroSection {
  /* ---------------------------------------------
       Scroll indicator
    --------------------------------------------- */
}
#HeroSection .HeroSectionScroll {
  position: absolute;
  right: 48px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
}
#HeroSection .HeroSectionScrollText {
  color: var(--TextMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#HeroSection .HeroSectionScrollLine {
  position: relative;
  display: block;
  width: 68px;
  height: 1px;
  overflow: hidden;
  background: var(--LineColor);
}
#HeroSection .HeroSectionScrollLine::after {
  position: absolute;
  inset: 0;
  background: var(--TextPrimary);
  content: "";
  transform: translateX(-100%);
  animation: ScrollLineAnimation 2.2s ease-in-out infinite;
}

@keyframes ScrollLineAnimation {
  0% {
    transform: translateX(-100%);
  }
  45%, 55% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
#AuthorityMetricsSection {
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 140px;
  background: var(--PageBackground);
  /* ---------------------------------------------
       Compact section header
    --------------------------------------------- */
}
#AuthorityMetricsSection .AuthorityMetricsHeader {
  display: grid;
  grid-template-columns: minmax(190px, 0.32fr) minmax(520px, 1.28fr) minmax(280px, 0.6fr);
  align-items: end;
  gap: 64px;
}
#AuthorityMetricsSection .AuthorityMetricsHeaderMeta {
  display: flex;
  align-self: start;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 14px;
}
#AuthorityMetricsSection .AuthorityMetricsEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--TextSecondary);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
#AuthorityMetricsSection .AuthorityMetricsEyebrow::before {
  display: block;
  width: 30px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.7;
}
#AuthorityMetricsSection .AuthorityMetricsIndex {
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
#AuthorityMetricsSection .AuthorityMetricsHeading {
  max-width: 880px;
  color: var(--TextPrimary);
  font-size: 78px;
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.96;
}
#AuthorityMetricsSection .AuthorityMetricsHeadingLine {
  display: block;
  overflow: hidden;
  padding-right: 12px;
  padding-bottom: 7px;
}
#AuthorityMetricsSection .AuthorityMetricsHeadingText {
  display: block;
}
#AuthorityMetricsSection .AuthorityMetricsHeadingAccent {
  color: var(--TextSecondary);
  font-style: italic;
  font-weight: 400;
}
#AuthorityMetricsSection .AuthorityMetricsHeaderAside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 9px;
}
#AuthorityMetricsSection .AuthorityMetricsIntroduction {
  max-width: 350px;
  color: var(--TextSecondary);
  font-size: 14px;
  line-height: 1.75;
}
#AuthorityMetricsSection .AuthorityMetricsScope {
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}
#AuthorityMetricsSection .AuthorityMetricsRule {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 28px;
  transform-origin: left center;
}
#AuthorityMetricsSection {
  /* ---------------------------------------------
       Metrics
    --------------------------------------------- */
}
#AuthorityMetricsSection .AuthorityMetricsList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#AuthorityMetricsSection .AuthorityMetricItem {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 34px 36px 0;
}
#AuthorityMetricsSection .AuthorityMetricItem:not(:first-child) {
  padding-left: 34px;
}
#AuthorityMetricsSection .AuthorityMetricItem:not(:last-child)::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--LineColorSoft);
  content: "";
}
#AuthorityMetricsSection .AuthorityMetricItem:hover .AuthorityMetricValueWrap {
  transform: translateY(-5px);
}
#AuthorityMetricsSection .AuthorityMetricItem:hover .AuthorityMetricTitle {
  color: var(--TextPrimary);
}
#AuthorityMetricsSection .AuthorityMetricItem:hover .AuthorityMetricNumber {
  color: var(--TextSecondary);
}
#AuthorityMetricsSection .AuthorityMetricValueWrap {
  display: flex;
  align-items: flex-start;
  color: var(--TextPrimary);
  font-family: var(--HeadingFont);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#AuthorityMetricsSection .AuthorityMetricValue {
  font-size: 76px;
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.9;
}
#AuthorityMetricsSection .AuthorityMetricSuffix {
  padding-top: 4px;
  padding-left: 4px;
  color: var(--TextSecondary);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}
#AuthorityMetricsSection .AuthorityMetricContent {
  max-width: 270px;
}
#AuthorityMetricsSection .AuthorityMetricTitle {
  margin-bottom: 12px;
  color: var(--TextSecondary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.3s ease;
}
#AuthorityMetricsSection .AuthorityMetricDescription {
  color: var(--TextMuted);
  font-size: 13px;
  line-height: 1.65;
}
#AuthorityMetricsSection .AuthorityMetricNumber {
  position: absolute;
  right: 18px;
  bottom: 36px;
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  transition: color 0.3s ease;
}
#AuthorityMetricsSection {
  /* ---------------------------------------------
       Footer
    --------------------------------------------- */
}
#AuthorityMetricsSection .AuthorityMetricsFooter {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  border-top: 1px solid var(--LineColor);
}

@keyframes AuthorityTrustPulse {
  0% {
    opacity: 0.8;
    transform: scale(0.6);
  }
  65%, 100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
/* =========================================================
   Trust and recognition — minimal animated logo wall
========================================================= */
#TrustRecognitionSection {
  --RecognitionBackground: #070707;
  --RecognitionTile: #111111;
  --RecognitionTileHover: #efeee9;
  --RecognitionText: #f3f3ef;
  --RecognitionMuted: #8c8c87;
  --RecognitionGap: 10px;
  border-top: 1px solid var(--LineColorSoft);
  position: relative;
  overflow: hidden;
  padding: 100px 10px;
  background: var(--RecognitionBackground);
  /* =====================================================
     Topline
  ===================================================== */
}
#TrustRecognitionSection .TrustRecognitionTopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
#TrustRecognitionSection .TrustRecognitionEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--TextSecondary);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
#TrustRecognitionSection .TrustRecognitionEyebrow::before {
  display: block;
  width: 30px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.7;
}
#TrustRecognitionSection .TrustRecognitionIndex {
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
#TrustRecognitionSection {
  /* =====================================================
     Header
  ===================================================== */
}
#TrustRecognitionSection .TrustRecognitionHeader {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
  align-items: end;
  gap: 70px;
  padding-top: 66px;
  padding-bottom: 64px;
}
#TrustRecognitionSection .TrustRecognitionHeading {
  max-width: 950px;
  color: var(--RecognitionText);
  font-size: 76px;
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.98;
}
#TrustRecognitionSection .TrustRecognitionHeadingLine {
  display: block;
  overflow: hidden;
  padding-right: 12px;
  padding-bottom: 7px;
}
#TrustRecognitionSection .TrustRecognitionHeadingText {
  display: block;
}
#TrustRecognitionSection .TrustRecognitionHeadingAccent {
  color: var(--TextSecondary);
  font-style: italic;
  font-weight: 400;
}
#TrustRecognitionSection .TrustRecognitionHeaderAside {
  display: flex;
  max-width: 390px;
  flex-direction: column;
  gap: 24px;
  justify-self: end;
  padding-bottom: 7px;
}
#TrustRecognitionSection .TrustRecognitionCount {
  color: var(--RecognitionText);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#TrustRecognitionSection .TrustRecognitionDescription {
  color: var(--TextSecondary);
  font-size: 14px;
  line-height: 1.75;
}
#TrustRecognitionSection {
  /* =====================================================
     Logo grid
  ===================================================== */
}
#TrustRecognitionSection .TrustRecognitionGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--RecognitionGap);
}
#TrustRecognitionSection .TrustRecognitionTile {
  --LogoX: 0px;
  --LogoY: 0px;
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 230px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 42px;
  background: var(--RecognitionTile);
  color: var(--RecognitionText);
  transition: background-color 0.48s cubic-bezier(0.22, 1, 0.36, 1), transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  /*
   * Soft light entering on hover or during
   * the automatic sequential activation.
   */
}
#TrustRecognitionSection .TrustRecognitionTile::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--RecognitionTileHover);
  content: "";
  transform: translateY(102%);
  transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}
#TrustRecognitionSection .TrustRecognitionTile {
  /*
   * Subtle radial pointer light.
   */
}
#TrustRecognitionSection .TrustRecognitionTile::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.4s ease, transform 0.55s ease;
}
#TrustRecognitionSection .TrustRecognitionTile:hover, #TrustRecognitionSection .TrustRecognitionTile:focus-visible, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive {
  color: #090909;
  transform: translateY(-4px);
}
#TrustRecognitionSection .TrustRecognitionTile:hover::before, #TrustRecognitionSection .TrustRecognitionTile:focus-visible::before, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive::before {
  transform: translateY(0);
}
#TrustRecognitionSection .TrustRecognitionTile:hover::after, #TrustRecognitionSection .TrustRecognitionTile:focus-visible::after, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#TrustRecognitionSection .TrustRecognitionTile:hover, #TrustRecognitionSection .TrustRecognitionTile:focus-visible, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive {
  /*
   * Transparent dark or coloured artwork becomes black
   * against the warm-white active tile.
   */
}
#TrustRecognitionSection .TrustRecognitionTile:hover .TrustRecognitionLogo, #TrustRecognitionSection .TrustRecognitionTile:focus-visible .TrustRecognitionLogo, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive .TrustRecognitionLogo {
  opacity: 1;
  filter: grayscale(1) brightness(0) contrast(1.12);
  mix-blend-mode: normal;
  transform: translate3d(var(--LogoX), var(--LogoY), 0) scale(calc(var(--LogoScale, 1) * 1.06));
}
#TrustRecognitionSection .TrustRecognitionTile:hover, #TrustRecognitionSection .TrustRecognitionTile:focus-visible, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive {
  /*
   * Logos exported on a solid white canvas must not use
   * brightness(0), otherwise the entire canvas turns black.
   * Multiply makes the white canvas merge into the warm-white
   * tile while preserving the dark artwork.
   */
}
#TrustRecognitionSection .TrustRecognitionTile:hover .TrustRecognitionLogo[data-logo-mode=canvas], #TrustRecognitionSection .TrustRecognitionTile:focus-visible .TrustRecognitionLogo[data-logo-mode=canvas], #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive .TrustRecognitionLogo[data-logo-mode=canvas] {
  filter: grayscale(1) contrast(1.12);
  mix-blend-mode: multiply;
}
#TrustRecognitionSection .TrustRecognitionTile:hover, #TrustRecognitionSection .TrustRecognitionTile:focus-visible, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive {
  /*
   * Logos already supplied as white artwork on transparency
   * also become black on the active tile.
   */
}
#TrustRecognitionSection .TrustRecognitionTile:hover .TrustRecognitionLogo[data-logo-mode=light], #TrustRecognitionSection .TrustRecognitionTile:focus-visible .TrustRecognitionLogo[data-logo-mode=light], #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive .TrustRecognitionLogo[data-logo-mode=light] {
  filter: grayscale(1) brightness(0) contrast(1.12);
  mix-blend-mode: normal;
}
#TrustRecognitionSection .TrustRecognitionTile:hover .TrustRecognitionTileIndex, #TrustRecognitionSection .TrustRecognitionTile:focus-visible .TrustRecognitionTileIndex, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive .TrustRecognitionTileIndex {
  color: rgba(0, 0, 0, 0.45);
  transform: translateY(0);
}
#TrustRecognitionSection .TrustRecognitionTile:hover .TrustRecognitionTileArrow, #TrustRecognitionSection .TrustRecognitionTile:focus-visible .TrustRecognitionTileArrow, #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive .TrustRecognitionTileArrow {
  opacity: 1;
  transform: translate(0, 0);
}
#TrustRecognitionSection .TrustRecognitionTile:focus-visible {
  outline: 2px solid var(--TextPrimary);
  outline-offset: 4px;
}
#TrustRecognitionSection .TrustRecognitionTileIndex {
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 3;
  color: rgba(255, 255, 255, 0.25);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  transform: translateY(-4px);
  transition: color 0.38s ease, transform 0.42s ease;
}
#TrustRecognitionSection {
  /* =====================================================
     Logo presentation
  ===================================================== */
}
#TrustRecognitionSection .TrustRecognitionLogoWrap {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  will-change: transform;
}
#TrustRecognitionSection .TrustRecognitionLogo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
  /*
   * Default mode for dark or coloured artwork
   * supplied on a transparent background.
   */
  filter: grayscale(1) brightness(0) invert(1) contrast(1.08);
  mix-blend-mode: normal;
  transform: scale(var(--LogoScale, 1));
  transform-origin: center;
  transition: opacity 0.55s ease, filter 0.45s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}
#TrustRecognitionSection {
  /*
   * Logos exported on a solid white canvas.
   *
   * Default dark tile state:
   * original white canvas becomes black after inversion,
   * dark artwork becomes white, and screen blending removes
   * the black canvas against the dark tile.
   */
}
#TrustRecognitionSection .TrustRecognitionLogo[data-logo-mode=canvas] {
  filter: grayscale(1) invert(1) contrast(1.2);
  mix-blend-mode: screen;
}
#TrustRecognitionSection {
  /*
   * Optional mode for artwork that is already white
   * on a transparent background.
   */
}
#TrustRecognitionSection .TrustRecognitionLogo[data-logo-mode=light] {
  filter: grayscale(1) brightness(1.08) contrast(1.12);
  mix-blend-mode: normal;
}
#TrustRecognitionSection {
  /*
   * Image enters smoothly only after loading.
   */
}
#TrustRecognitionSection .TrustRecognitionTile.IsLogoLoaded .TrustRecognitionLogo {
  opacity: 0.88;
}
#TrustRecognitionSection .TrustRecognitionTile.IsLogoLoaded:hover .TrustRecognitionLogo, #TrustRecognitionSection .TrustRecognitionTile.IsLogoLoaded:focus-visible .TrustRecognitionLogo, #TrustRecognitionSection .TrustRecognitionTile.IsLogoLoaded.IsAutoActive .TrustRecognitionLogo {
  opacity: 1;
  filter: none;
}
#TrustRecognitionSection {
  /* =====================================================
     Failed-image fallback
  ===================================================== */
}
#TrustRecognitionSection .TrustRecognitionLogoFallback {
  display: none;
  max-width: 180px;
  color: var(--RecognitionText);
  font-family: var(--HeadingFont);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-align: center;
}
#TrustRecognitionSection .TrustRecognitionTile.HasLogoError .TrustRecognitionLogo {
  display: none;
}
#TrustRecognitionSection .TrustRecognitionTile.HasLogoError .TrustRecognitionLogoFallback {
  display: block;
}
#TrustRecognitionSection .TrustRecognitionTile.HasLogoError:hover .TrustRecognitionLogoFallback, #TrustRecognitionSection .TrustRecognitionTile.HasLogoError:focus-visible .TrustRecognitionLogoFallback, #TrustRecognitionSection .TrustRecognitionTile.HasLogoError.IsAutoActive .TrustRecognitionLogoFallback {
  color: #090909;
}
#TrustRecognitionSection {
  /* =====================================================
     Footer
  ===================================================== */
}
#TrustRecognitionSection .TrustRecognitionFooter {
  display: flex;
  min-height: 92px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--LineColorSoft);
}
#TrustRecognitionSection .TrustRecognitionFooterText,
#TrustRecognitionSection .TrustRecognitionFooterCount {
  padding-bottom: 26px;
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* =========================================================
   Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
  #TrustRecognitionSection .TrustRecognitionTile,
  #TrustRecognitionSection .TrustRecognitionTile::before,
  #TrustRecognitionSection .TrustRecognitionTile::after,
  #TrustRecognitionSection .TrustRecognitionLogo,
  #TrustRecognitionSection .TrustRecognitionTileIndex,
  #TrustRecognitionSection .TrustRecognitionTileArrow {
    transition: none !important;
  }
  #TrustRecognitionSection .TrustRecognitionTile.IsAutoActive {
    transform: none;
  }
}
/* =========================================================
   Services — structured full-screen horizontal section
========================================================= */
#ServicesSection {
  --ServicesHeaderOffset: 0px;
  --ServicesBackground: #050505;
  --ServicesPrimary: #f2f2ee;
  --ServicesSecondary: #92928e;
  --ServicesMuted: #5f5f5b;
  --ServicesLine: rgba(255, 255, 255, 0.15);
  --ServicesLineSoft: rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--ServicesBackground);
  color: var(--ServicesPrimary);
  padding-top: 80px;
  /* =====================================================
       Horizontal structure
    ===================================================== */
}
#ServicesSection .ServicesHorizontal {
  position: relative;
  width: 100%;
}
#ServicesSection .ServicesPin {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--ServicesHeaderOffset));
  min-height: 760px;
  overflow: hidden;
  background: var(--ServicesBackground);
}
#ServicesSection .ServicesTrack {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  align-items: stretch;
  will-change: transform;
}
#ServicesSection .ServicesSlide {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  min-width: 100vw;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 38% 72%, rgba(255, 255, 255, 0.018), transparent 34%), var(--ServicesBackground);
}
#ServicesSection .ServicesSlideContainer {
  height: 100%;
  padding-top: 34px;
  padding-bottom: 72px;
}
#ServicesSection {
  /* =====================================================
       Unified slide grid
    ===================================================== */
}
#ServicesSection .ServicesSlideGrid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 24px 330px minmax(0, 1fr);
  -moz-column-gap: 24px;
       column-gap: 24px;
}
#ServicesSection .ServicesSlideTopline {
  display: flex;
  grid-column: 1/-1;
  grid-row: 1;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
#ServicesSection .ServicesEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ServicesMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}
#ServicesSection .ServicesEyebrow::before {
  display: block;
  width: 30px;
  height: 1px;
  background: currentColor;
  content: "";
}
#ServicesSection .ServicesSlideIndex,
#ServicesSection .ServicesListLabel,
#ServicesSection .ServicesFinalEyebrow {
  color: var(--ServicesMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1.5;
  text-transform: uppercase;
}
#ServicesSection {
  /* =====================================================
       Title
    ===================================================== */
}
#ServicesSection .ServicesSlideTitle {
  grid-column: 1/10;
  grid-row: 2;
  align-self: start;
  max-width: 1280px;
  margin-top: 20px;
  color: var(--ServicesPrimary);
  font-size: 172px;
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.78;
}
#ServicesSection .ServicesTitleMask {
  display: block;
  overflow: hidden;
  padding-right: 22px;
  padding-bottom: 16px;
}
#ServicesSection .ServicesTitleText {
  display: block;
}
#ServicesSection .ServicesSlideTitle em,
#ServicesSection .ServicesFinalHeading em {
  color: var(--ServicesSecondary);
  font-style: italic;
  font-weight: 400;
}
#ServicesSection {
  /* =====================================================
       Lower composition
    ===================================================== */
}
#ServicesSection .ServicesSlideContent {
  display: grid;
  min-height: 0;
  grid-column: 1/-1;
  grid-row: 3;
  grid-template-columns: minmax(0, 1.04fr) minmax(480px, 0.96fr);
  align-items: stretch;
  gap: 120px;
  padding-top: 24px;
}
#ServicesSection .ServicesSlideLeft {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
#ServicesSection .ServicesSlideDescription {
  max-width: 430px;
  margin: 0;
  color: var(--ServicesSecondary);
  font-size: 19px;
  line-height: 1.8;
  position: absolute;
  right: 350px;
  top: 150px;
}
#ServicesSection {
  /* =====================================================
       Media
    ===================================================== */
}
#ServicesSection .ServicesMedia {
  width: 420px;
  max-width: 100%;
  margin: 10px 0 0;
}
#ServicesSection .ServicesMedia:hover .ServicesMediaImage {
  transform: scale(1.08) !important;
  filter: none;
}
#ServicesSection .ServicesMediaViewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1.48;
  background: #101010;
}
#ServicesSection .ServicesMediaFallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 58%), #101010;
  color: var(--ServicesPrimary);
  transition: opacity 0.4s ease;
}
#ServicesSection .ServicesMediaFallback::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  opacity: 0.35;
}
#ServicesSection .ServicesMediaFallbackIndex,
#ServicesSection .ServicesMediaFallbackTitle {
  position: relative;
  z-index: 2;
}
#ServicesSection .ServicesMediaFallbackIndex {
  color: var(--ServicesMuted);
  font-size: 9px;
  letter-spacing: 0.15em;
}
#ServicesSection .ServicesMediaFallbackTitle {
  max-width: 190px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
}
#ServicesSection .ServicesMediaImage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1);
  opacity: 0;
  transform: scale(1.05);
  transition: filter 0.5s ease, opacity 0.5s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform filter;
}
#ServicesSection .ServicesMediaViewport.IsMediaLoaded .ServicesMediaFallback {
  opacity: 0;
}
#ServicesSection .ServicesMediaViewport.IsMediaLoaded .ServicesMediaImage.IsCurrent {
  opacity: 1;
  transform: scale(1);
}
#ServicesSection .ServicesMediaSweep {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -42%;
  z-index: 4;
  width: 25%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-16deg);
}
#ServicesSection .ServicesMediaCaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 13px;
  color: var(--ServicesMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#ServicesSection {
  /* =====================================================
       Capability list
    ===================================================== */
}
#ServicesSection .ServicesSlideRight {
  width: 100%;
  max-width: 680px;
  align-self: start;
  justify-self: end;
  padding-top: 2px;
}
#ServicesSection .ServicesListLabel {
  display: block;
  margin-bottom: 18px;
}
#ServicesSection .ServicesOptionList {
  border-top: 1px solid var(--ServicesLine);
}
#ServicesSection .ServicesOption {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 70px;
  grid-template-columns: 34px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 15px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ServicesLine);
  background: transparent;
  color: var(--ServicesSecondary);
  cursor: pointer;
  text-align: left;
  transition: color 0.35s ease, padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesSection .ServicesOption::before {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--ServicesPrimary);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesSection .ServicesOption:hover, #ServicesSection .ServicesOption:focus-visible, #ServicesSection .ServicesOption.IsActive {
  padding-left: 10px;
  color: var(--ServicesPrimary);
}
#ServicesSection .ServicesOption:hover::before, #ServicesSection .ServicesOption:focus-visible::before, #ServicesSection .ServicesOption.IsActive::before {
  transform: scaleX(1);
}
#ServicesSection .ServicesOption:hover .ServicesOptionNumber, #ServicesSection .ServicesOption:focus-visible .ServicesOptionNumber, #ServicesSection .ServicesOption.IsActive .ServicesOptionNumber {
  color: var(--ServicesPrimary);
}
#ServicesSection .ServicesOption:hover .ServicesOptionName, #ServicesSection .ServicesOption:focus-visible .ServicesOptionName, #ServicesSection .ServicesOption.IsActive .ServicesOptionName {
  transform: translateX(4px);
}
#ServicesSection .ServicesOption:hover .ServicesOptionDot, #ServicesSection .ServicesOption:focus-visible .ServicesOptionDot, #ServicesSection .ServicesOption.IsActive .ServicesOptionDot {
  opacity: 1;
  transform: scale(1);
}
#ServicesSection .ServicesOption:focus-visible {
  outline: none;
}
#ServicesSection .ServicesOptionNumber {
  color: var(--ServicesMuted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  transition: color 0.35s ease;
}
#ServicesSection .ServicesOptionName {
  color: currentColor;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 1px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesSection .ServicesOptionDot {
  display: block;
  width: 7px;
  height: 7px;
  justify-self: end;
  border-radius: 50%;
  background: var(--ServicesPrimary);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesSection {
  /* =====================================================
       Final slide
    ===================================================== */
}
#ServicesSection .ServicesSlideFinal {
  background: #070707;
}
#ServicesSection .ServicesFinalContainer {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: 60px;
  padding-bottom: 90px;
}
#ServicesSection .ServicesFinalHeading {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin-top: 28px;
  color: var(--ServicesPrimary);
  font-size: 150px;
  font-weight: 500;
  letter-spacing: -0.074em;
  line-height: 0.84;
}
#ServicesSection .ServicesFinalBottom {
  position: relative;
  z-index: 3;
  display: flex;
  max-width: 760px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  margin-top: 44px;
}
#ServicesSection .ServicesFinalDescription {
  max-width: 450px;
  margin: 0;
  color: var(--ServicesSecondary);
  font-size: 14px;
  line-height: 1.8;
}
#ServicesSection .ServicesFinalButton {
  flex: 0 0 auto;
}
#ServicesSection .ServicesFinalBackground {
  position: absolute;
  right: -2%;
  bottom: -8%;
  color: rgba(255, 255, 255, 0.025);
  font-family: var(--HeadingFont);
  font-size: 380px;
  font-weight: 600;
  letter-spacing: -0.09em;
  line-height: 0.7;
  pointer-events: none;
}
#ServicesSection {
  /* =====================================================
       Progress interface
    ===================================================== */
}
#ServicesSection .ServicesProgressInterface {
  position: absolute;
  right: 4.5vw;
  bottom: 32px;
  left: 4.5vw;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(300px, 0.8fr) minmax(150px, 1fr);
  align-items: center;
  gap: 40px;
  pointer-events: none;
}
#ServicesSection .ServicesProgressCurrent {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--ServicesMuted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#ServicesSection .ServicesProgressCurrent span:first-child {
  color: var(--ServicesPrimary);
}
#ServicesSection .ServicesProgressTrack {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: var(--ServicesLineSoft);
}
#ServicesSection .ServicesProgressBar {
  position: absolute;
  inset: 0;
  background: var(--ServicesPrimary);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
#ServicesSection .ServicesProgressHint {
  justify-self: end;
  color: var(--ServicesMuted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
#ServicesSection {
  /* =====================================================
       Cursor
    ===================================================== */
}
#ServicesSection .ServicesCursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  display: flex;
  width: 66px;
  height: 66px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  visibility: hidden;
  will-change: transform, opacity;
}
#ServicesSection .ServicesCursorInner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffffff;
  transform: scale(0.15);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesSection .ServicesCursor.IsVisible {
  opacity: 1;
  visibility: visible;
}
#ServicesSection .ServicesCursor.IsOverOption {
  mix-blend-mode: difference;
}
#ServicesSection .ServicesCursor.IsOverOption .ServicesCursorInner {
  transform: scale(1);
}

@media (pointer: fine) and (min-width: 993px) {
  #ServicesSection .ServicesOption {
    cursor: none;
  }
}
/* =========================================================
   Testimonials — independently draggable scattered marquees
========================================================= */
#TestimonialsSection {
  --TestimonialsBackground: #050505;
  --TestimonialsLight: #f2f1eb;
  --TestimonialsDark: #181817;
  --TestimonialsLightText: #080808;
  --TestimonialsDarkText: #f2f1eb;
  --TestimonialsMuted: #797975;
  --TestimonialsCardWidth: 370px;
  --TestimonialsCardHeight: 285px;
  --TestimonialsGap: 52px;
  position: relative;
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 105px;
  background: var(--TestimonialsBackground);
  color: var(--TextPrimary);
  isolation: isolate;
  /* =====================================================
     Header
  ===================================================== */
}
#TestimonialsSection .TestimonialsEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--TextSecondary);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
#TestimonialsSection .TestimonialsEyebrow::before {
  display: block;
  width: 30px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.7;
}
#TestimonialsSection .TestimonialsIndex {
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
#TestimonialsSection .TestimonialsHeading {
  color: var(--TextPrimary);
  font-size: clamp(76px, 7vw, 132px);
  font-weight: 500;
  letter-spacing: -0.072em;
  line-height: 0.83;
  text-align: center;
}
#TestimonialsSection .TestimonialsHeadingLine {
  display: block;
  overflow: hidden;
  padding-right: 18px;
  padding-bottom: 15px;
}
#TestimonialsSection .TestimonialsHeadingText {
  display: block;
}
#TestimonialsSection .TestimonialsHeading em {
  color: var(--TextSecondary);
  font-style: italic;
  font-weight: 400;
}
#TestimonialsSection .TestimonialsHeaderAction {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 28px;
  padding-top: 12px;
  justify-self: end;
}
#TestimonialsSection .TestimonialsIntroduction {
  max-width: 330px;
  color: var(--TextSecondary);
  font-size: 13px;
  line-height: 1.75;
}
#TestimonialsSection {
  /* =====================================================
     Drag stage
  ===================================================== */
}
#TestimonialsSection .TestimonialsStage {
  position: relative;
  height: 700px;
  margin-top: 54px;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  isolation: isolate;
  /*
   * Smooth edge fading.
   */
}
#TestimonialsSection .TestimonialsStage::before, #TestimonialsSection .TestimonialsStage::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 20;
  width: 8vw;
  content: "";
  pointer-events: none;
}
#TestimonialsSection .TestimonialsStage::before {
  left: 0;
  background: linear-gradient(90deg, var(--TestimonialsBackground) 0%, rgba(5, 5, 5, 0.82) 28%, transparent 100%);
}
#TestimonialsSection .TestimonialsStage::after {
  right: 0;
  background: linear-gradient(-90deg, var(--TestimonialsBackground) 0%, rgba(5, 5, 5, 0.82) 28%, transparent 100%);
}
#TestimonialsSection .TestimonialsStage {
  /*
   * Backwards compatibility if older JavaScript
   * still applies IsDragging to the stage.
   */
}
#TestimonialsSection .TestimonialsStage.IsDragging .TestimonialsStageHint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#TestimonialsSection .TestimonialsStage {
  /*
   * New independent-row implementation.
   * The hint appears whenever either row is dragged.
   */
}
#TestimonialsSection .TestimonialsStage:has(.TestimonialsRow.IsDragging) .TestimonialsStageHint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#TestimonialsSection .TestimonialsStageHint {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 40;
  padding: 11px 17px;
  border-radius: 999px;
  background: var(--TestimonialsLight);
  color: var(--TestimonialsLightText);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#TestimonialsSection {
  /* =====================================================
     Independently draggable rows
  ===================================================== */
}
#TestimonialsSection .TestimonialsRow {
  position: absolute;
  right: 0;
  left: 0;
  height: 330px;
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  isolation: isolate;
  /*
   * Each row receives IsDragging independently.
   */
}
#TestimonialsSection .TestimonialsRow.IsDragging {
  z-index: 12;
  cursor: grabbing;
}
#TestimonialsSection .TestimonialsRow.IsDragging .TestimonialsCard {
  pointer-events: none;
}
#TestimonialsSection .TestimonialsRow.IsDragging .TestimonialsCardShell {
  /*
   * Keeps movement stable while the row receives
   * rapid pointer updates.
   */
  backface-visibility: hidden;
}
#TestimonialsSection .TestimonialsRowTop {
  top: 0;
  z-index: 2;
}
#TestimonialsSection .TestimonialsRowTop .TestimonialsRowMover {
  margin-left: -8vw;
}
#TestimonialsSection .TestimonialsRowBottom {
  bottom: 0;
  z-index: 1;
}
#TestimonialsSection .TestimonialsRowBottom .TestimonialsRowMover {
  margin-left: -24vw;
}
#TestimonialsSection {
  /*
   * The mover handles scroll-based movement.
   * The drag layer handles manual pointer movement.
   * The track handles the infinite marquee animation.
   *
   * Keeping them separate prevents transform conflicts.
   */
}
#TestimonialsSection .TestimonialsRowMover,
#TestimonialsSection .TestimonialsRowDrag,
#TestimonialsSection .TestimonialsTrack {
  width: -moz-max-content;
  width: max-content;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}
#TestimonialsSection .TestimonialsRowMover {
  position: relative;
}
#TestimonialsSection .TestimonialsRowDrag {
  position: relative;
}
#TestimonialsSection .TestimonialsTrack {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
#TestimonialsSection .TestimonialsGroup {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--TestimonialsGap);
  padding-right: var(--TestimonialsGap);
}
#TestimonialsSection {
  /* =====================================================
     Cards
  ===================================================== */
}
#TestimonialsSection .TestimonialsCardShell {
  position: relative;
  flex: 0 0 var(--TestimonialsCardWidth);
  width: var(--TestimonialsCardWidth);
  padding-top: max(0px, var(--CardOffset));
  padding-bottom: max(0px, var(--CardOffset) * -1);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}
#TestimonialsSection .TestimonialsCard {
  position: relative;
  display: flex;
  width: 100%;
  height: var(--TestimonialsCardHeight);
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 34px 34px 29px;
  transform: translate3d(0, 0, 0) rotate(var(--CardRotate));
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
  will-change: transform;
}
#TestimonialsSection .TestimonialsCard:hover {
  z-index: 5;
  transform: translate3d(0, -12px, 0) rotate(0deg) scale(1.025);
}
#TestimonialsSection .TestimonialsCard.IsLight {
  background: var(--TestimonialsLight);
  color: var(--TestimonialsLightText);
}
#TestimonialsSection .TestimonialsCard.IsDark {
  background: var(--TestimonialsDark);
  color: var(--TestimonialsDarkText);
}
#TestimonialsSection {
  /*
   * Prevent hover transforms while its row is being dragged.
   * This reduces visual shaking beneath the pointer.
   */
}
#TestimonialsSection .TestimonialsRow.IsDragging .TestimonialsCard,
#TestimonialsSection .TestimonialsRow.IsDragging .TestimonialsCard:hover {
  transform: translate3d(0, 0, 0) rotate(var(--CardRotate));
}
#TestimonialsSection .TestimonialsQuoteMark {
  position: absolute;
  top: 18px;
  right: 25px;
  font-family: Georgia, serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}
#TestimonialsSection .TestimonialsQuote {
  max-width: 295px;
  margin: auto;
  padding: 25px 0 16px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.48;
  text-align: center;
}
#TestimonialsSection .TestimonialsCardFooter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}
#TestimonialsSection .TestimonialsAuthor {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
#TestimonialsSection .TestimonialsRole {
  display: block;
  margin-top: 4px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
  opacity: 0.6;
  text-transform: uppercase;
}
#TestimonialsSection .TestimonialsCardIndex {
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.45;
}
#TestimonialsSection {
  /* =====================================================
     Footer
  ===================================================== */
}
#TestimonialsSection .TestimonialsFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 34px;
  border-top: 1px solid var(--LineColorSoft);
}
#TestimonialsSection .TestimonialsFooterText,
#TestimonialsSection .TestimonialsFooterHint {
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}
#TestimonialsSection {
  /* =====================================================
     Custom cursor
  ===================================================== */
}
#TestimonialsSection .TestimonialsCursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
  display: flex;
  width: 74px;
  height: 74px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--TestimonialsLight);
  color: var(--TestimonialsLightText);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0) scale(0.25);
  visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
#TestimonialsSection .TestimonialsCursorText {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.3s ease;
}
#TestimonialsSection .TestimonialsCursor.IsVisible {
  opacity: 1;
  visibility: visible;
}
#TestimonialsSection .TestimonialsCursor.IsDragging .TestimonialsCursorText {
  transform: rotate(-8deg);
}

/* =========================================================
   Fine pointer devices
========================================================= */
@media (pointer: fine) and (min-width: 993px) {
  #TestimonialsSection {
    /*
     * Only the interactive row hides the native cursor.
     * Header and footer retain normal pointer behaviour.
     */
  }
  #TestimonialsSection .TestimonialsRow {
    cursor: none;
  }
}
/* =========================================================
   Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
  #TestimonialsSection .TestimonialsRowMover,
  #TestimonialsSection .TestimonialsRowDrag,
  #TestimonialsSection .TestimonialsTrack,
  #TestimonialsSection .TestimonialsCardShell,
  #TestimonialsSection .TestimonialsCard,
  #TestimonialsSection .TestimonialsCursor,
  #TestimonialsSection .TestimonialsStageHint {
    animation: none;
    transition: none;
  }
  #TestimonialsSection .TestimonialsCard:hover {
    transform: translate3d(0, 0, 0) rotate(var(--CardRotate));
  }
}
/* =========================================================
   Case studies
========================================================= */
#CaseStudiesSection {
  --CaseStudiesBackground: #050505;
  --CaseStudiesMediaBackground: #111111;
  --CaseStudiesPrimary: #f2f2ee;
  --CaseStudiesSecondary: #989894;
  --CaseStudiesMuted: #62625f;
  --CaseStudiesLine: rgba(255, 255, 255, 0.14);
  --CaseStudiesLineSoft: rgba(255, 255, 255, 0.07);
}
#CaseStudiesSection.ServicePage {
  padding-top: 0;
}
#CaseStudiesSection.ServicePage .CaseStudiesImage {
  filter: grayscale(1) brightness(0.77) contrast(1.05);
}
#CaseStudiesSection {
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 120px;
  background: var(--CaseStudiesBackground);
  color: var(--CaseStudiesPrimary);
  /* =====================================================
     Header
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesHeader {
  text-align: center;
  padding-bottom: 48px;
  display: flex;
  justify-content: center;
}
#CaseStudiesSection .CaseStudiesSectionIndex {
  color: var(--TextMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
#CaseStudiesSection .CaseStudiesHeading {
  max-width: 930px;
  color: var(--CaseStudiesPrimary);
  font-size: clamp(66px, 6vw, 108px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.91;
}
#CaseStudiesSection .CaseStudiesHeadingLine {
  display: block;
  overflow: hidden;
  padding-right: 16px;
  padding-bottom: 11px;
}
#CaseStudiesSection .CaseStudiesHeadingText {
  display: block;
}
#CaseStudiesSection .CaseStudiesHeading em {
  color: var(--CaseStudiesSecondary);
  font-style: italic;
  font-weight: 400;
}
#CaseStudiesSection .CaseStudiesHeaderAside {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 7px;
}
#CaseStudiesSection .CaseStudiesIntroduction {
  max-width: 360px;
  color: var(--CaseStudiesSecondary);
  font-size: 14px;
  line-height: 1.75;
}
#CaseStudiesSection .CaseStudiesCount {
  color: var(--CaseStudiesMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#CaseStudiesSection {
  /* =====================================================
     Grid
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: clamp(20px, 2.2vw, 38px);
       column-gap: clamp(20px, 2.2vw, 38px);
  row-gap: clamp(76px, 8vw, 140px);
}
#CaseStudiesSection .CaseStudiesCard {
  min-width: 0;
}
#CaseStudiesSection .CaseStudiesCard:nth-child(4n+2) .CaseStudiesMedia, #CaseStudiesSection .CaseStudiesCard:nth-child(4n+3) .CaseStudiesMedia {
  background: #0e0e0e;
}
#CaseStudiesSection .CaseStudiesCardLink {
  display: block;
  color: inherit;
  text-decoration: none;
}
#CaseStudiesSection .CaseStudiesCardLink:focus-visible {
  outline: none;
}
#CaseStudiesSection .CaseStudiesCardLink:focus-visible .CaseStudiesMedia {
  outline: 2px solid var(--CaseStudiesPrimary);
  outline-offset: 5px;
}
#CaseStudiesSection {
  /* =====================================================
     Media
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesMedia {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 0;
  overflow: hidden;
  background: var(--CaseStudiesMediaBackground);
  -o-object-fit: cover;
     object-fit: cover;
}
#CaseStudiesSection .Logo {
  width: 200px;
  position: absolute;
  top: -40px;
  left: -50px;
  z-index: 10;
}
#CaseStudiesSection .CaseStudiesMediaFallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 28px;
  background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), #101010;
  background-size: 52px 52px;
  color: var(--CaseStudiesPrimary);
}
#CaseStudiesSection .CaseStudiesMediaFallback span {
  color: var(--CaseStudiesMuted);
  font-size: 9px;
  letter-spacing: 0.14em;
}
#CaseStudiesSection .CaseStudiesMediaFallback strong {
  font-family: var(--HeadingFont);
  font-size: clamp(30px, 3vw, 54px);
  font-weight: 500;
  letter-spacing: -0.045em;
}
#CaseStudiesSection .CaseStudiesImage {
  position: absolute;
  z-index: 1;
  display: block;
  width: 112%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1);
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 0.55s ease, filter 0.65s ease, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#CaseStudiesSection .CaseStudiesMedia.IsLoaded .CaseStudiesImage {
  opacity: 1;
}
#CaseStudiesSection .CaseStudiesMediaOverlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 27px;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.74) 100%);
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.45s ease;
}
#CaseStudiesSection .CaseStudiesOverlayLabel {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transform: translateY(10px);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
#CaseStudiesSection .CaseStudiesOverlayIcon {
  width: 21px;
  height: 21px;
  transform: translate(-7px, 7px) rotate(-8deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#CaseStudiesSection .CaseStudiesCard:hover .CaseStudiesImage {
  filter: grayscale(0.25);
  transform: scale(1.085);
}
#CaseStudiesSection .CaseStudiesCard:hover .CaseStudiesMediaOverlay {
  opacity: 1;
}
#CaseStudiesSection .CaseStudiesCard:hover .CaseStudiesOverlayLabel {
  transform: translateY(0);
}
#CaseStudiesSection .CaseStudiesCard:hover .CaseStudiesOverlayIcon {
  transform: translate(0, 0) rotate(0deg);
}
#CaseStudiesSection .CaseStudiesCard:hover .CaseStudiesCardTitle {
  color: #ffffff;
}
#CaseStudiesSection .CaseStudiesCard:hover .CaseStudiesCardFooter::after {
  transform: scaleX(1);
}
#CaseStudiesSection {
  /* =====================================================
     Card content
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesCardContent {
  padding-top: 22px;
}
#CaseStudiesSection .CaseStudiesCardTopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 16px;
}
#CaseStudiesSection .CaseStudiesCardCategory,
#CaseStudiesSection .CaseStudiesCardYear {
  color: var(--CaseStudiesMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#CaseStudiesSection .CaseStudiesCardTitle {
  color: var(--CaseStudiesPrimary);
  font-size: clamp(34px, 3vw, 54px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
  transition: color 0.35s ease;
}
#CaseStudiesSection .CaseStudiesCardDescription {
  max-width: 540px;
  margin-top: 16px;
  color: var(--CaseStudiesSecondary);
  font-size: 13px;
  line-height: 1.75;
}
#CaseStudiesSection .CaseStudiesCardFooter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--CaseStudiesLineSoft);
}
#CaseStudiesSection .CaseStudiesCardFooter::after {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--CaseStudiesPrimary);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
#CaseStudiesSection .CaseStudiesCardFooter span {
  color: var(--CaseStudiesMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#CaseStudiesSection {
  /* =====================================================
     Footer
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesFooter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 50px;
  margin-top: 80px;
  padding-bottom: 3px;
}
#CaseStudiesSection .CaseStudiesFooterText {
  max-width: 480px;
  color: var(--CaseStudiesMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}
#CaseStudiesSection {
  /* =====================================================
     Cursor
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesCursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 700;
  display: flex;
  min-width: 124px;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--CaseStudiesPrimary);
  color: #090909;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-200px, -200px, 0) scale(0.72);
  visibility: hidden;
  will-change: transform, opacity;
}
#CaseStudiesSection .CaseStudiesCursorText {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
#CaseStudiesSection .CaseStudiesCursorIcon {
  width: 13px;
  height: 13px;
}
#CaseStudiesSection .CaseStudiesCursor.IsVisible {
  opacity: 1;
  visibility: visible;
}

@media (pointer: fine) and (min-width: 993px) {
  #CaseStudiesSection .CaseStudiesMedia {
    cursor: none;
  }
}
/* =========================================================
   Works Gallery — central title with rising image field
========================================================= */
#WorkGallerySection {
  --WorkGalleryBackground: #050505;
  --WorkGalleryPrimary: #f2f2ee;
  --WorkGallerySecondary: #989894;
  --WorkGalleryMuted: #656562;
  --WorkGalleryLine: rgba(255, 255, 255, 0.12);
  --WorkGalleryHeaderOffset: 0px;
  position: relative;
  width: 100%;
  /*
   * Reduced from 540vh. The sequence now uses
   * the complete scroll distance without long,
   * visually empty beginning or ending areas.
   */
  height: 420vh;
  height: 420svh;
  overflow: visible;
  background: var(--WorkGalleryBackground);
  color: var(--WorkGalleryPrimary);
  /* =====================================================
       Sticky viewport
    ===================================================== */
}
#WorkGallerySection .WorkGallerySticky {
  position: sticky;
  top: var(--WorkGalleryHeaderOffset);
  width: 100%;
  height: calc(100vh - var(--WorkGalleryHeaderOffset));
  height: calc(100svh - var(--WorkGalleryHeaderOffset));
  /*
  * Removing the 620px minimum prevents the
  * sticky canvas from becoming taller than
  * shorter desktop browser viewports.
  */
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.025), transparent 45%), var(--WorkGalleryBackground);
  isolation: isolate;
}
#WorkGallerySection {
  /* =====================================================
       Central title
    ===================================================== */
}
#WorkGallerySection .WorkGalleryCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  display: flex;
  width: min(92vw, 1500px);
  align-items: center;
  flex-direction: column;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
}
#WorkGallerySection .WorkGalleryEyebrow {
  margin-bottom: clamp(22px, 3vh, 42px);
  color: var(--WorkGallerySecondary);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
#WorkGallerySection .WorkGalleryTitle {
  color: var(--WorkGalleryPrimary);
  font-size: clamp(120px, 18vw, 350px);
  font-weight: 500;
  letter-spacing: -0.09em;
  line-height: 0.72;
  mix-blend-mode: difference;
}
#WorkGallerySection .WorkGalleryTitleMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.12em;
}
#WorkGallerySection .WorkGalleryTitleText {
  display: block;
}
#WorkGallerySection .WorkGallerySubtitle {
  margin-top: clamp(24px, 4vh, 48px);
  color: var(--WorkGallerySecondary);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#WorkGallerySection {
  /* =====================================================
       Full-screen canvas
    ===================================================== */
}
#WorkGallerySection .WorkGalleryCanvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
#WorkGallerySection .WorkGalleryItem {
  position: absolute;
  top: 0;
  width: var(--WorkWidth);
  opacity: 0;
  pointer-events: auto;
  will-change: transform;
}
#WorkGallerySection .WorkGalleryItemOne {
  left: 3vw;
  z-index: 7;
  --WorkWidth: 25vw;
  --WorkRotation: -3deg;
  --WorkRatio: 1.36;
}
#WorkGallerySection .WorkGalleryItemTwo {
  left: 69vw;
  z-index: 9;
  --WorkWidth: 23vw;
  --WorkRotation: 2.5deg;
  --WorkRatio: 0.84;
}
#WorkGallerySection .WorkGalleryItemThree {
  left: 34vw;
  z-index: 4;
  --WorkWidth: 18vw;
  --WorkRotation: -2deg;
  --WorkRatio: 0.78;
}
#WorkGallerySection .WorkGalleryItemFour {
  left: 76vw;
  z-index: 6;
  --WorkWidth: 20vw;
  --WorkRotation: -2.5deg;
  --WorkRatio: 1.25;
}
#WorkGallerySection .WorkGalleryItemFive {
  left: 7vw;
  z-index: 10;
  --WorkWidth: 21vw;
  --WorkRotation: 3deg;
  --WorkRatio: 0.9;
}
#WorkGallerySection .WorkGalleryItemSix {
  left: 49vw;
  z-index: 8;
  --WorkWidth: 28vw;
  --WorkRotation: -1.5deg;
  --WorkRatio: 1.48;
}
#WorkGallerySection .WorkGalleryItemSeven {
  left: 23vw;
  z-index: 6;
  --WorkWidth: 24vw;
  --WorkRotation: 2deg;
  --WorkRatio: 1.15;
}
#WorkGallerySection .WorkGalleryItemEight {
  left: 72vw;
  z-index: 10;
  --WorkWidth: 22vw;
  --WorkRotation: -3deg;
  --WorkRatio: 1.32;
}
#WorkGallerySection .WorkGalleryItemLink {
  display: block;
  color: inherit;
  text-decoration: none;
}
#WorkGallerySection .WorkGalleryItemLink:focus-visible {
  outline: none;
}
#WorkGallerySection .WorkGalleryItemLink:focus-visible .WorkGalleryMedia {
  outline: 2px solid var(--WorkGalleryPrimary);
  outline-offset: 5px;
}
#WorkGallerySection {
  /* =====================================================
       Image card
    ===================================================== */
}
#WorkGallerySection .WorkGalleryMedia {
  position: relative;
  width: 100%;
  aspect-ratio: var(--WorkRatio);
  margin: 0;
  overflow: hidden;
  background: #111111;
  transform: rotate(var(--WorkRotation));
  transform-origin: center;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
  will-change: transform;
}
#WorkGallerySection .WorkGalleryImage {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1.08);
  transition: filter 0.65s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#WorkGallerySection .WorkGalleryMedia::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.72) 100%);
  content: "";
  opacity: 0;
  transition: opacity 0.4s ease;
}
#WorkGallerySection .WorkGalleryCaption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  color: #ffffff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#WorkGallerySection .WorkGalleryCaptionIndex {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
#WorkGallerySection .WorkGalleryCaptionTitle {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-align: right;
  text-transform: uppercase;
}
#WorkGallerySection .WorkGalleryItem:hover {
  z-index: 30;
}
#WorkGallerySection .WorkGalleryItem:hover .WorkGalleryMedia {
  transform: rotate(0deg) scale(1.035);
}
#WorkGallerySection .WorkGalleryItem:hover .WorkGalleryImage {
  filter: grayscale(0);
  transform: scale(1.13);
}
#WorkGallerySection .WorkGalleryItem:hover .WorkGalleryMedia::after {
  opacity: 1;
}
#WorkGallerySection .WorkGalleryItem:hover .WorkGalleryCaption {
  opacity: 1;
  transform: translateY(0);
}
#WorkGallerySection {
  /* =====================================================
       Bottom interface
    ===================================================== */
}
#WorkGallerySection .WorkGalleryInterface {
  position: absolute;
  right: 4.5vw;
  bottom: 24px;
  left: 4.5vw;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 0.7fr) minmax(170px, 1fr);
  align-items: center;
  gap: 40px;
  pointer-events: none;
}
#WorkGallerySection .WorkGalleryInterfaceText,
#WorkGallerySection .WorkGalleryInterfaceHint {
  color: var(--WorkGalleryMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#WorkGallerySection .WorkGalleryInterfaceHint {
  justify-self: end;
}
#WorkGallerySection .WorkGalleryProgress {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: var(--WorkGalleryLine);
}
#WorkGallerySection .WorkGalleryProgressBar {
  position: absolute;
  inset: 0;
  background: var(--WorkGalleryPrimary);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
#WorkGallerySection {
  /* =====================================================
       Cursor
    ===================================================== */
}
#WorkGallerySection .WorkGalleryCursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
  display: flex;
  min-width: 90px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 999px;
  background: var(--WorkGalleryPrimary);
  color: #080808;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-150px, -150px, 0) scale(0.7);
  visibility: hidden;
  will-change: transform, opacity;
}
#WorkGallerySection .WorkGalleryCursor span {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#WorkGallerySection .WorkGalleryCursor svg {
  width: 13px;
  height: 13px;
}
#WorkGallerySection .WorkGalleryCursor.IsVisible {
  opacity: 1;
  visibility: visible;
}

@media (pointer: fine) and (min-width: 993px) {
  #WorkGallerySection .WorkGalleryMedia {
    cursor: none;
  }
}
/* =========================================================
   About — Minimal Editorial Composition
========================================================= */
#AboutSection {
  --AboutBackground: #050505;
  --AboutPrimary: #f2f2ee;
  --AboutSecondary: #999995;
  --AboutMuted: #62625f;
  --AboutLine: rgba(255, 255, 255, 0.13);
  --AboutLineSoft: rgba(255, 255, 255, 0.065);
  --AboutHeaderOffset: 0px;
  --AboutPointerX: 50%;
  --AboutPointerY: 45%;
  position: relative;
  display: flex;
  width: 100%;
  min-height: calc(100svh - var(--AboutHeaderOffset));
  align-items: stretch;
  overflow: hidden;
  background: var(--AboutBackground);
  color: var(--AboutPrimary);
  isolation: isolate;
  border-bottom: 1px solid var(--AboutLineSoft);
  /* =====================================================
     Container
  ===================================================== */
}
#AboutSection .AboutContainer {
  position: relative;
  display: flex;
  min-height: calc(100svh - var(--AboutHeaderOffset));
  flex-direction: column;
  padding-top: 80px;
  padding-bottom: 80px;
}
#AboutSection {
  /* =====================================================
     Topline
  ===================================================== */
}
#AboutSection .AboutTopline {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
#AboutSection {
  /* =====================================================
     Main Stage
  ===================================================== */
}
#AboutSection .AboutStage {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: minmax(240px, 0.88fr) minmax(320px, 0.84fr) minmax(330px, 1fr);
  align-items: center;
  -moz-column-gap: clamp(55px, 6.5vw, 115px);
       column-gap: clamp(55px, 6.5vw, 115px);
  padding-top: clamp(34px, 5vh, 62px);
  padding-bottom: clamp(28px, 4vh, 50px);
}
#AboutSection .AboutStage::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -3;
  width: min(84vw, 1380px);
  height: min(70vh, 690px);
  background: linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  opacity: 0.3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000000 12%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000000 12%, transparent 70%);
}
#AboutSection {
  /* =====================================================
     Spotlight
  ===================================================== */
}
#AboutSection .AboutSpotlight {
  position: absolute;
  top: var(--AboutPointerY);
  left: var(--AboutPointerX);
  z-index: -2;
  width: min(64vw, 950px);
  height: min(72vh, 730px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.022) 35%, transparent 70%);
  opacity: 0.8;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: top, left;
}
#AboutSection {
  /* =====================================================
     Left Side
  ===================================================== */
}
#AboutSection .AboutLeft {
  position: relative;
  z-index: 8;
  align-self: center;
}
#AboutSection .AboutEyebrow,
#AboutSection .AboutRightEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--AboutSecondary);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
#AboutSection .AboutEyebrow::before,
#AboutSection .AboutRightEyebrow::before {
  display: block;
  width: 30px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.7;
}
#AboutSection {
  /* =====================================================
     Hey
  ===================================================== */
}
#AboutSection .AboutHello {
  margin-top: 34px;
  color: var(--AboutPrimary);
  font-size: clamp(82px, 9vw, 170px);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.75;
}
#AboutSection .AboutHelloMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.15em;
}
#AboutSection .AboutHelloText {
  display: block;
}
#AboutSection {
  /* =====================================================
     Left Copy
  ===================================================== */
}
#AboutSection .AboutLeftCopy {
  max-width: 315px;
  margin-top: clamp(46px, 6vh, 72px);
}
#AboutSection .AboutCopyLabel {
  display: block;
  margin-bottom: 17px;
  color: var(--AboutMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#AboutSection .AboutLeftCopy p {
  margin: 0;
  color: var(--AboutPrimary);
  font-size: clamp(17px, 1.25vw, 22px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.48;
}
#AboutSection {
  /* =====================================================
     Portrait
     EXISTING STYLE PRESERVED
  ===================================================== */
}
#AboutSection .AboutPortrait {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 355px;
  margin: 0 auto;
  transform-origin: center;
  will-change: transform;
}
#AboutSection .AboutPortraitViewport {
  position: relative;
  width: 100%;
  aspect-ratio: 0.76;
  overflow: hidden;
  background: #111111;
  isolation: isolate;
}
#AboutSection .AboutPortraitViewport::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.58) 100%);
  content: "";
  pointer-events: none;
}
#AboutSection .AboutPortraitFallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), #101010;
  background-size: 46px 46px;
}
#AboutSection .AboutPortraitFallback span {
  color: var(--AboutMuted);
  font-size: 8px;
  letter-spacing: 0.15em;
}
#AboutSection .AboutPortraitFallback strong {
  color: var(--AboutPrimary);
  font-size: 11px;
  font-weight: 500;
}
#AboutSection .AboutPortraitImageMotion {
  position: absolute;
  inset: -6%;
  z-index: 2;
  transform: scale(1.07);
  will-change: transform;
}
#AboutSection .AboutPortraitImage {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  filter: grayscale(1) brightness(0.73) contrast(1.04);
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.6s ease, filter 0.7s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
#AboutSection .AboutPortraitViewport.IsLoaded .AboutPortraitImage {
  opacity: 1;
}
#AboutSection .AboutPortraitGlow {
  position: absolute;
  top: 5%;
  left: 50%;
  z-index: 3;
  width: 88%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.035) 37%, transparent 70%);
  opacity: 0.58;
  pointer-events: none;
  transform: translateX(-50%);
  mix-blend-mode: screen;
}
#AboutSection .AboutPortraitName {
  position: absolute;
  right: 18px;
  bottom: 17px;
  left: 18px;
  z-index: 8;
}
#AboutSection .AboutPortrait:hover .AboutPortraitImage {
  filter: grayscale(0.15) brightness(0.88) contrast(1);
  transform: scale(1.065);
}
#AboutSection {
  /* =====================================================
     Right Side
  ===================================================== */
}
#AboutSection .AboutRight {
  position: relative;
  z-index: 8;
  align-self: center;
  width: 100%;
  max-width: 445px;
}
#AboutSection .AboutRightEyebrow {
  margin-bottom: clamp(24px, 2.6vw, 34px);
}
#AboutSection .AboutRightIntroduction {
  max-width: 430px;
}
#AboutSection .AboutRightLead,
#AboutSection .AboutRightText {
  margin: 0;
  color: var(--AboutSecondary);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.8;
}
#AboutSection .AboutRightText {
  margin-top: 26px;
}
#AboutSection {
  /* =====================================================
     Approach List
  ===================================================== */
}
#AboutSection .AboutApproachList {
  margin-top: clamp(32px, 3vw, 44px);
  border-top: 1px solid var(--AboutLine);
}
#AboutSection .AboutApproachItem {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 15px;
  min-height: 72px;
  border-bottom: 1px solid var(--AboutLineSoft);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#AboutSection .AboutApproachItem:hover {
  transform: translateX(5px);
}
#AboutSection .AboutApproachItem:hover .AboutApproachIcon {
  color: var(--AboutPrimary);
  opacity: 1;
}
#AboutSection .AboutApproachItem:hover .AboutApproachMark {
  color: var(--AboutSecondary);
}
#AboutSection {
  /* =====================================================
     Approach Icon
  ===================================================== */
}
#AboutSection .AboutApproachIcon {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--AboutSecondary);
  opacity: 0.72;
  transition: color 0.35s ease, opacity 0.35s ease;
}
#AboutSection .AboutApproachIcon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#AboutSection {
  /* =====================================================
     Approach Content
  ===================================================== */
}
#AboutSection .AboutApproachContent {
  min-width: 0;
}
#AboutSection .AboutApproachTitle {
  display: block;
  margin-bottom: 5px;
  color: var(--AboutPrimary);
  font-size: clamp(12px, 0.9vw, 14px);
  font-weight: 500;
  letter-spacing: 0em;
}
#AboutSection .AboutApproachDescription {
  display: block;
  max-width: 310px;
  color: var(--AboutMuted);
  font-size: clamp(9px, 0.72vw, 11px);
  line-height: 1.5;
}
#AboutSection .AboutApproachMark {
  justify-self: end;
  color: rgba(255, 255, 255, 0.2);
  font-size: 7px;
  letter-spacing: 0.1em;
  transition: color 0.35s ease;
}
#AboutSection {
  /* =====================================================
     Signature
  ===================================================== */
}
#AboutSection .AboutSignature {
  margin-top: clamp(26px, 2.7vw, 38px);
}
#AboutSection .AboutSignatureName {
  display: block;
  color: rgba(242, 242, 238, 0.78);
  font-size: clamp(28px, 2.5vw, 43px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1;
}
#AboutSection .AboutSignatureRole {
  display: block;
  margin-top: 10px;
  color: var(--AboutMuted);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* =========================================================
   Global site cursor
========================================================= */
.GlobalCursor {
  --GlobalCursorBackground: #f2f2ee;
  --GlobalCursorForeground: #060606;
  --GlobalCursorLight: #f2f2ee;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  will-change: transform, opacity;
}
.GlobalCursor.IsVisible {
  opacity: 1;
  visibility: visible;
}
.GlobalCursor.IsHidden {
  opacity: 0;
  visibility: hidden;
}

.GlobalCursorInner {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 10px;
  height: 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(242, 242, 238, 0.85);
  border-radius: 50%;
  background: var(--GlobalCursorBackground);
  color: var(--GlobalCursorForeground);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  white-space: nowrap;
  will-change: width, height, transform;
  transition: width 0.44s cubic-bezier(0.22, 1, 0.36, 1), height 0.44s cubic-bezier(0.22, 1, 0.36, 1), padding 0.44s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.44s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.GlobalCursorLabel {
  display: block;
  max-width: 0;
  overflow: hidden;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(4px);
  transition: max-width 0.4s ease, opacity 0.25s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.GlobalCursorIcon {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  opacity: 0;
  transform: translate(-4px, 4px) rotate(-8deg);
  transition: width 0.35s ease, height 0.35s ease, opacity 0.25s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   Default state
========================================================= */
.GlobalCursor.IsDefault .GlobalCursorInner {
  width: 10px;
  height: 10px;
}

/* =========================================================
   Links and buttons
========================================================= */
.GlobalCursor.IsLink .GlobalCursorInner {
  width: 42px;
  height: 42px;
  border-color: rgba(242, 242, 238, 0.42);
  background: rgba(242, 242, 238, 0.09);
  color: var(--GlobalCursorLight);
  backdrop-filter: blur(8px);
}
.GlobalCursor.IsLink .GlobalCursorIcon {
  width: 13px;
  height: 13px;
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* =========================================================
   View state
========================================================= */
.GlobalCursor.IsView .GlobalCursorInner {
  width: 76px;
  height: 76px;
  padding: 0 13px;
  border-color: var(--GlobalCursorBackground);
  background: var(--GlobalCursorBackground);
  color: var(--GlobalCursorForeground);
}
.GlobalCursor.IsView .GlobalCursorLabel {
  max-width: 45px;
  opacity: 1;
  transform: translateY(0);
}
.GlobalCursor.IsView .GlobalCursorIcon {
  width: 12px;
  height: 12px;
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* =========================================================
   Drag state
========================================================= */
.GlobalCursor.IsDrag .GlobalCursorInner {
  width: 72px;
  height: 72px;
  border-color: var(--GlobalCursorBackground);
  background: var(--GlobalCursorBackground);
  color: var(--GlobalCursorForeground);
}
.GlobalCursor.IsDrag .GlobalCursorLabel {
  max-width: 45px;
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Explore state
========================================================= */
.GlobalCursor.IsExplore .GlobalCursorInner {
  width: 94px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border-color: var(--GlobalCursorBackground);
  background: var(--GlobalCursorBackground);
  color: var(--GlobalCursorForeground);
}
.GlobalCursor.IsExplore .GlobalCursorLabel {
  max-width: 64px;
  opacity: 1;
  transform: translateY(0);
}
.GlobalCursor.IsExplore .GlobalCursorIcon {
  width: 12px;
  height: 12px;
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* =========================================================
   Click and drag feedback
========================================================= */
.GlobalCursor.IsPressed .GlobalCursorInner {
  transform: translate(-50%, -50%) scale(0.82);
}

/* =========================================================
   Activate custom cursor
========================================================= */
@media (pointer: fine) and (min-width: 993px) and (prefers-reduced-motion: no-preference) {
  html.HasCustomCursor,
  html.HasCustomCursor body,
  html.HasCustomCursor body * {
    cursor: none !important;
  }
  html.HasCustomCursor input,
  html.HasCustomCursor textarea,
  html.HasCustomCursor select,
  html.HasCustomCursor [contenteditable=true] {
    cursor: text !important;
  }
}
/* =========================================================
   Native cursor fallback
========================================================= */
html:not(.HasCustomCursor) .TestimonialsRow {
  cursor: grab !important;
}
html:not(.HasCustomCursor) .TestimonialsRow.IsDragging {
  cursor: grabbing !important;
}
html:not(.HasCustomCursor) .CaseStudiesMedia,
html:not(.HasCustomCursor) .WorkGalleryMedia,
html:not(.HasCustomCursor) .TrustRecognitionTile,
html:not(.HasCustomCursor) .ServicesOption,
html:not(.HasCustomCursor) a,
html:not(.HasCustomCursor) button {
  cursor: pointer !important;
}

/* =========================================================
   Disable legacy section cursors
========================================================= */
.ServicesCursor,
.TrustRecognitionCursor,
.TestimonialsCursor,
.CaseStudiesCursor,
.WorkGalleryCursor {
  display: none !important;
}

/* =========================================================
   Touch devices and reduced motion
========================================================= */
@media (pointer: coarse), (max-width: 992px), (prefers-reduced-motion: reduce) {
  .GlobalCursor {
    display: none !important;
  }
}
/* =========================================================
   Final CTA
========================================================= */
#FinalCtaSection {
  --FinalCtaBackground: #050505;
  --FinalCtaPrimary: #f2f2ee;
  --FinalCtaSecondary: #979793;
  --FinalCtaMuted: #62625f;
  --FinalCtaLine: rgba(255, 255, 255, 0.13);
  --FinalCtaLineSoft: rgba(255, 255, 255, 0.065);
  --FinalCtaPointerX: 50%;
  --FinalCtaPointerY: 50%;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--FinalCtaBackground);
  color: var(--FinalCtaPrimary);
  isolation: isolate;
  /* =====================================================
     Background
  ===================================================== */
}
#FinalCtaSection .FinalCtaBackground {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#FinalCtaSection .FinalCtaBackground::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--FinalCtaBackground) 0%, transparent 20%, transparent 78%, var(--FinalCtaBackground) 100%);
  content: "";
}
#FinalCtaSection .FinalCtaGlow {
  position: absolute;
  top: var(--FinalCtaPointerY);
  left: var(--FinalCtaPointerX);
  width: min(72vw, 1180px);
  height: min(90vh, 900px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.022) 36%, transparent 70%);
  opacity: 0.75;
  transform: translate(-50%, -50%);
  will-change: top, left;
}
#FinalCtaSection .FinalCtaRail {
  position: absolute;
  right: 0;
  left: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.025);
  font-family: var(--HeadingFont);
  font-size: clamp(100px, 13vw, 250px);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.8;
  white-space: nowrap;
}
#FinalCtaSection .FinalCtaRailTop {
  top: 15%;
}
#FinalCtaSection .FinalCtaRailBottom {
  bottom: 15%;
  color: rgba(255, 255, 255, 0.018);
  font-style: italic;
}
#FinalCtaSection .FinalCtaRailTrack {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  will-change: transform;
}
#FinalCtaSection .FinalCtaRailTrack span {
  display: block;
  flex: 0 0 auto;
  padding-right: 0.2em;
}
#FinalCtaSection {
  /* =====================================================
     Container
  ===================================================== */
}
#FinalCtaSection .FinalCtaContainer {
  position: relative;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  padding-top: clamp(34px, 5vh, 58px);
  padding-bottom: clamp(28px, 4vh, 48px);
}
#FinalCtaSection {
  /* =====================================================
     Topline
  ===================================================== */
}
#FinalCtaSection .FinalCtaTopline {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
#FinalCtaSection .FinalCtaEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--FinalCtaSecondary);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
#FinalCtaSection .FinalCtaEyebrow::before {
  display: block;
  width: 30px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.7;
}
#FinalCtaSection .FinalCtaSectionIndex {
  color: var(--FinalCtaMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
#FinalCtaSection {
  /* =====================================================
     Main content
  ===================================================== */
}
#FinalCtaSection .FinalCtaContent {
  position: relative;
  z-index: 5;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(70px, 11vh, 135px);
  padding-bottom: clamp(70px, 10vh, 120px);
}
#FinalCtaSection .FinalCtaIntroduction {
  display: block;
  margin-bottom: clamp(28px, 4vh, 50px);
  color: var(--FinalCtaMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
#FinalCtaSection .FinalCtaHeading {
  max-width: 1500px;
  color: var(--FinalCtaPrimary);
  font-size: clamp(78px, 7vw, 174px);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.84;
  text-align: center;
}
#FinalCtaSection .FinalCtaHeadingLine {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.11em;
}
#FinalCtaSection .FinalCtaHeadingText {
  display: block;
}
#FinalCtaSection .FinalCtaHeading em {
  color: var(--FinalCtaSecondary);
  font-style: italic;
  font-weight: 400;
}
#FinalCtaSection {
  /* =====================================================
     Bottom content
  ===================================================== */
}
#FinalCtaSection .FinalCtaBottom {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(160px, 0.38fr);
  align-items: center;
  gap: clamp(60px, 10vw, 180px);
  margin-top: clamp(48px, 8vh, 95px);
}
#FinalCtaSection .FinalCtaDescription {
  max-width: 510px;
  margin: 0;
  color: var(--FinalCtaSecondary);
  font-size: 14px;
  line-height: 1.8;
}
#FinalCtaSection {
  /* =====================================================
     Circular action
  ===================================================== */
}
#FinalCtaSection .FinalCtaButton {
  position: relative;
  display: flex;
  width: clamp(140px, 10vw, 188px);
  height: clamp(140px, 10vw, 188px);
  align-items: center;
  justify-content: center;
  justify-self: end;
  border: 1px solid var(--FinalCtaPrimary);
  border-radius: 50%;
  color: var(--FinalCtaPrimary);
  text-decoration: none;
  transition: background-color 0.45s ease, color 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#FinalCtaSection .FinalCtaButton::before {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: inherit;
  content: "";
  transform: scale(0.84);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#FinalCtaSection .FinalCtaButton:hover, #FinalCtaSection .FinalCtaButton:focus-visible {
  background: var(--FinalCtaPrimary);
  color: #080808;
  outline: none;
}
#FinalCtaSection .FinalCtaButton:hover::before, #FinalCtaSection .FinalCtaButton:focus-visible::before {
  transform: scale(1);
}
#FinalCtaSection .FinalCtaButton:hover .FinalCtaButtonIcon, #FinalCtaSection .FinalCtaButton:focus-visible .FinalCtaButtonIcon {
  transform: translate(4px, -4px) rotate(0deg);
}
#FinalCtaSection .FinalCtaButtonInner {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  will-change: transform;
}
#FinalCtaSection .FinalCtaButtonText {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#FinalCtaSection .FinalCtaButtonIcon {
  width: 28px;
  height: 28px;
  transform: rotate(-7deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#FinalCtaSection {
  /* =====================================================
     Footnote
  ===================================================== */
}
#FinalCtaSection .FinalCtaFootnote {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--FinalCtaLineSoft);
}
#FinalCtaSection .FinalCtaFootnote span {
  color: var(--FinalCtaMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}
#FinalCtaSection .FinalCtaFootnote span:last-child {
  text-align: right;
}

/* =========================================================
   Site Footer
========================================================= */
#SiteFooter {
  --FooterBackground: #0b0b0b;
  --FooterPrimary: #f2f2ee;
  --FooterSecondary: #91918d;
  --FooterMuted: #5f5f5c;
  --FooterLine: rgba(255, 255, 255, 0.12);
  --FooterLineSoft: rgba(255, 255, 255, 0.065);
  position: relative;
  overflow: hidden;
  background: var(--FooterBackground);
  color: var(--FooterPrimary);
}
#SiteFooter .SiteFooterContainer {
  position: relative;
  padding-top: clamp(85px, 10vw, 150px);
  padding-bottom: 30px;
}
#SiteFooter {
  /* =====================================================
     Top layout
  ===================================================== */
}
#SiteFooter .SiteFooterTop {
  display: grid;
  grid-template-columns: minmax(290px, 1.2fr) minmax(220px, 0.62fr) minmax(300px, 0.9fr);
  align-items: start;
  gap: clamp(60px, 8vw, 145px);
}
#SiteFooter {
  /* =====================================================
     Brand
  ===================================================== */
}
#SiteFooter .SiteFooterBrand {
  max-width: 470px;
}
#SiteFooter .SiteFooterBrandLink {
  display: inline-flex;
  align-items: flex-start;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
#SiteFooter .SiteFooterBrandName {
  color: var(--FooterPrimary);
  font-size: clamp(34px, 3.3vw, 58px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.95;
}
#SiteFooter .SiteFooterBrandRole {
  margin-top: 12px;
  color: var(--FooterMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#SiteFooter .SiteFooterBrandDescription {
  max-width: 400px;
  margin: 43px 0 0;
  color: var(--FooterSecondary);
  font-size: 13px;
  line-height: 1.8;
}
#SiteFooter {
  /* =====================================================
     Common column
  ===================================================== */
}
#SiteFooter .SiteFooterColumnLabel {
  display: block;
  margin-bottom: 28px;
  color: var(--FooterMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
#SiteFooter {
  /* =====================================================
     Navigation
  ===================================================== */
}
#SiteFooter .SiteFooterLinkList {
  border-top: 1px solid var(--FooterLineSoft);
}
#SiteFooter .SiteFooterLink {
  position: relative;
  display: flex;
  min-height: 51px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--FooterLineSoft);
  color: var(--FooterSecondary);
  font-size: 11px;
  text-decoration: none;
  transition: color 0.35s ease, padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#SiteFooter .SiteFooterLink::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--FooterPrimary);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#SiteFooter .SiteFooterLink span:last-child {
  color: var(--FooterMuted);
  font-size: 7px;
  letter-spacing: 0.13em;
}
#SiteFooter .SiteFooterLink:hover {
  padding-left: 7px;
  color: var(--FooterPrimary);
}
#SiteFooter .SiteFooterLink:hover::after {
  transform: scaleX(1);
}
#SiteFooter {
  /* =====================================================
     Contact
  ===================================================== */
}
#SiteFooter .SiteFooterEmail {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 15px;
  padding-bottom: 8px;
  color: var(--FooterPrimary);
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-decoration: none;
}
#SiteFooter .SiteFooterEmail::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
#SiteFooter .SiteFooterEmail svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#SiteFooter .SiteFooterEmail:hover::after {
  transform: scaleX(1);
}
#SiteFooter .SiteFooterEmail:hover svg {
  transform: translate(4px, -4px);
}
#SiteFooter .SiteFooterContactText {
  max-width: 390px;
  margin: 32px 0 0;
  color: var(--FooterSecondary);
  font-size: 12px;
  line-height: 1.75;
}
#SiteFooter .SiteFooterSocials {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 35px;
}
#SiteFooter .SiteFooterSocialLink {
  position: relative;
  padding-bottom: 5px;
  color: var(--FooterSecondary);
  font-size: 9px;
  font-weight: 500;
  text-decoration: none;
}
#SiteFooter .SiteFooterSocialLink::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#SiteFooter .SiteFooterSocialLink:hover {
  color: var(--FooterPrimary);
}
#SiteFooter .SiteFooterSocialLink:hover::after {
  transform: scaleX(1);
}
#SiteFooter {
  /* =====================================================
     Large wordmark
  ===================================================== */
}
#SiteFooter .SiteFooterWordmark {
  margin-top: clamp(95px, 12vw, 185px);
  overflow: hidden;
}
#SiteFooter .SiteFooterWordmarkMask {
  display: block;
  overflow: hidden;
  padding-right: 0.04em;
  padding-bottom: 0em;
}
#SiteFooter .SiteFooterWordmarkText {
  display: block;
  color: var(--FooterPrimary);
  font-size: clamp(105px, 16.2vw, 310px);
  font-weight: 500;
  letter-spacing: -0.095em;
  line-height: 0.9;
  white-space: nowrap;
  will-change: transform;
  text-align: center;
}
#SiteFooter {
  /* =====================================================
     Bottom
  ===================================================== */
}
#SiteFooter .SiteFooterBottom {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(170px, 1fr);
  align-items: center;
  gap: 40px;
  margin-top: 38px;
  padding-top: 23px;
  border-top: 1px solid var(--FooterLine);
}
#SiteFooter .SiteFooterCopyright,
#SiteFooter .SiteFooterLegal a,
#SiteFooter .SiteFooterBackToTop {
  color: var(--FooterMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}
#SiteFooter .SiteFooterLegal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
#SiteFooter .SiteFooterLegal a {
  text-decoration: none;
  transition: color 0.3s ease;
}
#SiteFooter .SiteFooterLegal a:hover {
  color: var(--FooterPrimary);
}
#SiteFooter .SiteFooterBackToTop {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  text-decoration: none;
  transition: color 0.3s ease;
}
#SiteFooter .SiteFooterBackToTop svg {
  width: 13px;
  height: 13px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#SiteFooter .SiteFooterBackToTop:hover {
  color: var(--FooterPrimary);
}
#SiteFooter .SiteFooterBackToTop:hover svg {
  transform: translateY(-4px);
}

/* =========================================================
   Reusable Minimal Inner-Page Banner
========================================================= */
#InnerPageBannerSection {
  --PageBannerBackground: #050505;
  --PageBannerPrimary: #f2f2ee;
  --PageBannerSecondary: #999995;
  --PageBannerLine: rgba(255, 255, 255, 0.07);
  --PageBannerHeaderOffset: 0px;
  --PageBannerPointerX: 50%;
  --PageBannerPointerY: 45%;
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--PageBannerPrimary);
  isolation: isolate;
  z-index: 50;
  /* =====================================================
     Accessible heading
  ===================================================== */
}
#InnerPageBannerSection .InnerPageBannerSemanticTitle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#InnerPageBannerSection {
  /* =====================================================
     Background
  ===================================================== */
}
#InnerPageBannerSection .InnerPageBannerBackground {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
#InnerPageBannerSection .InnerPageBannerGlow {
  position: absolute;
  top: var(--PageBannerPointerY);
  left: var(--PageBannerPointerX);
  width: min(82vw, 1350px);
  height: min(88vh, 900px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.022) 34%, transparent 70%);
  opacity: 0.72;
  transform: translate(-50%, -50%);
  will-change: top, left, transform;
}
#InnerPageBannerSection {
  /* =====================================================
     Container
  ===================================================== */
}
#InnerPageBannerSection .InnerPageBannerContainer {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: auto;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--PageBannerHeaderOffset) + clamp(40px, 6vh, 75px));
  padding-bottom: clamp(70px, 9vh, 120px);
}
#InnerPageBannerSection {
  /* =====================================================
     Main layout
  ===================================================== */
}
#InnerPageBannerSection .InnerPageBannerContent {
  position: relative;
  z-index: 4;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  will-change: transform;
}
#InnerPageBannerSection {
  /* =====================================================
     Title marquee
  ===================================================== */
}
#InnerPageBannerSection .InnerPageBannerMarquee {
  position: relative;
  width: 100vw;
  overflow: hidden;
}
#InnerPageBannerSection .InnerPageBannerMarquee::before,
#InnerPageBannerSection .InnerPageBannerMarquee::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: clamp(45px, 7vw, 140px);
  content: "";
  pointer-events: none;
}
#InnerPageBannerSection .InnerPageBannerMarquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--PageBannerBackground), transparent);
}
#InnerPageBannerSection .InnerPageBannerMarquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--PageBannerBackground), transparent);
}
#InnerPageBannerSection .InnerPageBannerMarqueeScrollLayer {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}
#InnerPageBannerSection .InnerPageBannerMarqueeTrack {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  will-change: transform;
}
#InnerPageBannerSection .InnerPageBannerMarqueeGroup {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(55px, 5vw, 105px);
  padding-right: clamp(55px, 5vw, 105px);
}
#InnerPageBannerSection .InnerPageBannerMarqueeWord {
  display: block;
  flex: 0 0 auto;
  color: var(--PageBannerPrimary);
  font-size: clamp(125px, 15vw, 290px);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}
#InnerPageBannerSection .InnerPageBannerMarqueeWord.IsSans {
  font-family: var(--HeadingFont);
  font-weight: 500;
}
#InnerPageBannerSection .InnerPageBannerMarqueeDot {
  display: block;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--PageBannerPrimary);
}
#InnerPageBannerSection {
  /* =====================================================
     Description and action
  ===================================================== */
}
#InnerPageBannerSection .InnerPageBannerIntroduction {
  position: relative;
  z-index: 7;
  display: flex;
  width: min(100%, 760px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(30px, 4vh, 46px);
  margin-top: clamp(44px, 6vh, 75px);
}
#InnerPageBannerSection .InnerPageBannerDescription {
  max-width: 650px;
  margin: 0;
  color: var(--PageBannerSecondary);
  font-size: 14px;
  line-height: 1.8;
}
#InnerPageBannerSection .InnerPageBannerButton {
  position: relative;
  display: inline-flex;
  min-width: 230px;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 15px 29px;
  border: 0;
  border-radius: 999px;
  background: var(--PageBannerPrimary);
  color: #080808;
  text-decoration: none;
  isolation: isolate;
  transition: color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#InnerPageBannerSection .InnerPageBannerButton::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #d4d4ce;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#InnerPageBannerSection .InnerPageBannerButton:hover, #InnerPageBannerSection .InnerPageBannerButton:focus-visible {
  outline: none;
}
#InnerPageBannerSection .InnerPageBannerButton:hover::before, #InnerPageBannerSection .InnerPageBannerButton:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}
#InnerPageBannerSection .InnerPageBannerButton:hover .InnerPageBannerButtonIcon, #InnerPageBannerSection .InnerPageBannerButton:focus-visible .InnerPageBannerButtonIcon {
  transform: translate(4px, -4px);
}
#InnerPageBannerSection .InnerPageBannerButtonInner {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 18px;
  will-change: transform;
}
#InnerPageBannerSection .InnerPageBannerButtonText {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#InnerPageBannerSection .InnerPageBannerButtonIcon {
  width: 17px;
  height: 17px;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   Minimal Animated Contact Form
========================================================= */
#ContactFormSection {
  --ContactBackground: #181817;
  --ContactPrimary: #f2f2ee;
  --ContactSecondary: #a4a49f;
  --ContactMuted: #70706c;
  --ContactLine: rgba(255, 255, 255, 0.14);
  --ContactLineSoft: rgba(255, 255, 255, 0.07);
  --ContactError: #d8a49f;
  --ContactPointerX: 50%;
  --ContactPointerY: 30%;
  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 75px;
  overflow: visible;
  background: transparent;
  color: var(--ContactPrimary);
  /* =====================================================
     Curved surface
  ===================================================== */
}
#ContactFormSection .ContactFormSurface {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ContactBackground);
  isolation: isolate;
  /*
   * This ellipse creates the full-width curve.
   * It extends above the section instead of relying
   * only on rounded corners.
   */
}
#ContactFormSection .ContactFormSurface::before {
  position: absolute;
  top: -120px;
  left: -10%;
  z-index: -2;
  width: 120%;
  height: 340px;
  border-radius: 100%;
  background: var(--ContactBackground);
  content: "";
  will-change: transform;
}
#ContactFormSection .ContactFormGlow {
  position: absolute;
  top: var(--ContactPointerY);
  left: var(--ContactPointerX);
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015) 38%, transparent 72%);
  opacity: 0.8;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: top, left, transform;
}
#ContactFormSection .ContactFormContainer {
  position: relative;
  padding-bottom: clamp(90px, 9vw, 150px);
}
#ContactFormSection {
  /* =====================================================
     Header
  ===================================================== */
}
#ContactFormSection .ContactFormHeader {
  padding-bottom: clamp(75px, 8vw, 125px);
}
#ContactFormSection .ContactFormHeading {
  margin: 0;
  color: var(--ContactPrimary);
  font-size: clamp(76px, 7vw, 132px);
  font-weight: 500;
  letter-spacing: -0.078em;
  line-height: 0.86;
  text-align: center;
}
#ContactFormSection .ContactFormHeadingMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.1em;
}
#ContactFormSection .ContactFormHeadingText {
  display: block;
}
#ContactFormSection .ContactFormHeading em {
  color: var(--ContactSecondary);
  font-style: italic;
  font-weight: 400;
}
#ContactFormSection .ContactFormIntroduction {
  max-width: 400px;
  margin: 0 0 12px;
  color: var(--ContactSecondary);
  font-size: 14px;
  line-height: 1.8;
}
#ContactFormSection {
  /* =====================================================
     Form
  ===================================================== */
}
#ContactFormSection .ContactProjectForm {
  padding-top: clamp(65px, 7vw, 105px);
  border-top: 1px solid var(--ContactLine);
  background: #000;
  width: 85%;
  margin: auto;
  padding: 50px;
  border-radius: 24px;
}
#ContactFormSection .ContactFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(55px, 4vw, 120px);
  margin: auto;
}
#ContactFormSection .ContactField {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0 0 42px;
  border: 0;
}
#ContactFormSection .ContactField:focus-within .ContactFieldLabel {
  color: var(--ContactPrimary);
}
#ContactFormSection .ContactField:focus-within .ContactFieldLine::after {
  transform: scaleX(1);
}
#ContactFormSection .ContactField.HasValue .ContactFieldLabel {
  color: var(--ContactSecondary);
}
#ContactFormSection .ContactField.HasError .ContactFieldLabel,
#ContactFormSection .ContactField.HasError .ContactFieldError {
  color: var(--ContactError);
}
#ContactFormSection .ContactField.HasError .ContactFieldLine::after {
  background: var(--ContactError);
  transform: scaleX(1);
}
#ContactFormSection .ContactFieldLabel {
  display: block;
  margin-bottom: 19px;
  color: var(--ContactMuted);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  transition: color 0.3s;
  margin-top: 27px;
}
#ContactFormSection .ContactFieldControl {
  display: block;
  width: 100%;
  min-height: 57px;
  padding: 0 35px 18px 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ContactPrimary);
  font-family: inherit;
  font-size: clamp(24px, 2vw, 35px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.35;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
#ContactFormSection .ContactFieldControl::-moz-placeholder {
  color: rgba(164, 164, 159, 0.34);
  opacity: 1;
}
#ContactFormSection .ContactFieldControl::placeholder {
  color: rgba(164, 164, 159, 0.34);
  opacity: 1;
}
#ContactFormSection .ContactFieldControl:-webkit-autofill {
  -webkit-text-fill-color: var(--ContactPrimary);
  box-shadow: 0 0 0 1000px var(--ContactBackground) inset;
}
#ContactFormSection .ContactFieldControl:autofill, #ContactFormSection .ContactFieldControl:-webkit-autofill {
  -webkit-text-fill-color: var(--ContactPrimary);
  box-shadow: 0 0 0 1000px var(--ContactBackground) inset;
}
#ContactFormSection .ContactFieldLine {
  position: absolute;
  right: 0;
  bottom: 54px;
  left: 0;
  height: 1px;
  overflow: hidden;
  background: var(--ContactLineSoft);
}
#ContactFormSection .ContactFieldLine::after {
  position: absolute;
  inset: 0;
  background: var(--ContactPrimary);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#ContactFormSection .ContactFieldError {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  color: var(--ContactError);
  font-size: 10px;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#ContactFormSection .ContactField.HasError .ContactFieldError {
  opacity: 1;
  transform: translateY(0);
}
#ContactFormSection {
  /* =====================================================
     Select
  ===================================================== */
}
#ContactFormSection .ContactSelectWrap {
  position: relative;
}
#ContactFormSection .ContactSelectWrap svg {
  position: absolute;
  top: 14px;
  right: 0;
  width: 17px;
  height: 17px;
  color: var(--ContactSecondary);
  pointer-events: none;
}
#ContactFormSection .ContactFieldSelect {
  cursor: pointer;
  color: rgba(164, 164, 159, 0.34);
}
#ContactFormSection .ContactFieldSelect option {
  background: var(--ContactBackground);
}
#ContactFormSection {
  /* =====================================================
     Message
  ===================================================== */
}
#ContactFormSection .ContactMessageField {
  grid-column: 1/-1;
  margin-top: 12px;
}
#ContactFormSection .ContactMessageField .ContactFieldLine {
  bottom: 0;
}
#ContactFormSection .ContactFieldTextarea {
  min-height: 155px;
  padding-right: 0;
  resize: none;
  overflow: hidden;
}
#ContactFormSection {
  /* =====================================================
     Submit
  ===================================================== */
}
#ContactFormSection .ContactFormSubmitRow {
  max-width: 82%;
  margin: auto;
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: Center;
  padding-top: 45px;
}
#ContactFormSection .ContactFormSubmitRow .CommonButton {
  font-size: 21px;
  padding: 27px 40px;
}
#ContactFormSection .ContactFormStatus {
  max-width: 460px;
  min-height: 22px;
  margin: 0 auto 0 0;
  color: var(--ContactSecondary);
  font-size: 12px;
  line-height: 1.6;
}
#ContactFormSection .ContactFormSubmit {
  position: relative;
  display: flex;
  width: clamp(145px, 11vw, 185px);
  height: clamp(145px, 11vw, 185px);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ContactPrimary);
  border-radius: 50%;
  background: transparent;
  color: var(--ContactPrimary);
  font-family: inherit;
  transition: background-color 0.45s ease, color 0.45s ease;
}
#ContactFormSection .ContactFormSubmit::before {
  position: absolute;
  inset: 8px;
  border: 1px solid var(--ContactLineSoft);
  border-radius: inherit;
  content: "";
  transform: scale(0.84);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#ContactFormSection .ContactFormSubmit:hover, #ContactFormSection .ContactFormSubmit:focus-visible {
  background: var(--ContactPrimary);
  color: #090909;
  outline: none;
}
#ContactFormSection .ContactFormSubmit:hover::before, #ContactFormSection .ContactFormSubmit:focus-visible::before {
  transform: scale(1);
}
#ContactFormSection .ContactFormSubmit:hover svg, #ContactFormSection .ContactFormSubmit:focus-visible svg {
  transform: translate(4px, -4px);
}
#ContactFormSection .ContactFormSubmitInner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 21px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  will-change: transform;
}
#ContactFormSection .ContactFormSubmitInner svg {
  width: 28px;
  height: 28px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ContactFormSection {
  /* =====================================================
     Direct contact
  ===================================================== */
}
#ContactFormSection .ContactDirect {
  margin-top: clamp(120px, 13vw, 210px);
  padding-top: clamp(75px, 8vw, 115px);
  border-top: 1px solid var(--ContactLine);
}
#ContactFormSection .ContactDirectHeading {
  margin-bottom: clamp(55px, 7vw, 95px);
}
#ContactFormSection .ContactDirectTitle {
  max-width: 900px;
  margin: 0;
  color: var(--ContactPrimary);
  font-size: clamp(45px, 5vw, 88px);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.95;
}
#ContactFormSection .ContactDirectGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ContactLineSoft);
  border-bottom: 1px solid var(--ContactLineSoft);
}
#ContactFormSection .ContactDirectItem {
  position: relative;
  display: flex;
  min-height: 240px;
  flex-direction: column;
  padding: 30px;
  border-right: 1px solid var(--ContactLineSoft);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.45s ease, color 0.45s ease;
}
#ContactFormSection .ContactDirectItem:last-child {
  border-right: 0;
}
#ContactFormSection .ContactDirectItem > svg {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 19px;
  height: 19px;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ContactFormSection .ContactDirectItem[href]:hover, #ContactFormSection .ContactDirectItem[href]:focus-visible {
  background: var(--ContactPrimary);
  color: #090909;
  outline: none;
}
#ContactFormSection .ContactDirectItem[href]:hover .ContactDirectName, #ContactFormSection .ContactDirectItem[href]:focus-visible .ContactDirectName {
  color: rgba(0, 0, 0, 0.5);
}
#ContactFormSection .ContactDirectItem[href]:hover > svg, #ContactFormSection .ContactDirectItem[href]:focus-visible > svg {
  opacity: 1;
  transform: translate(0, 0);
}
#ContactFormSection .ContactDirectName {
  color: var(--ContactMuted);
  font-size: 13px;
  transition: color 0.35s ease;
}
#ContactFormSection .ContactDirectItem strong {
  display: block;
  max-width: 100%;
  margin-top: auto;
  padding-top: 45px;
  font-size: clamp(19px, 1.7vw, 30px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#ContactFormSection .ContactDirectAvailability {
  position: absolute;
  top: 31px;
  right: 31px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ContactPrimary);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.05);
}

/* =========================================================
   Services FAQ
========================================================= */
#ServicesFaqSection {
  --ServicesFaqBackground: #050505;
  --ServicesFaqPrimary: #f2f2ee;
  --ServicesFaqSecondary: #969692;
  --ServicesFaqMuted: #666662;
  --ServicesFaqLine: rgba(255, 255, 255, 0.11);
  --ServicesFaqLineSoft: rgba(255, 255, 255, 0.065);
}
#ServicesFaqSection.ContactPage {
  padding-top: 100px;
}
#ServicesFaqSection {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ServicesFaqBackground);
  color: var(--ServicesFaqPrimary);
}
#ServicesFaqSection .ServicesFaqContainer {
  padding-bottom: 0;
}
#ServicesFaqSection {
  /* =====================================================
     Intro
  ===================================================== */
}
#ServicesFaqSection .ServicesFaqIntro {
  display: block;
  text-align: center;
  padding-bottom: 42px;
}
#ServicesFaqSection .ServicesFaqHeading {
  margin: 0;
  color: var(--ServicesFaqPrimary);
  font-size: clamp(76px, 7vw, 132px);
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.85;
}
#ServicesFaqSection .ServicesFaqHeadingMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.1em;
}
#ServicesFaqSection .ServicesFaqHeadingText {
  display: block;
}
#ServicesFaqSection .ServicesFaqHeading em {
  color: var(--ServicesFaqSecondary);
  font-style: italic;
  font-weight: 400;
}
#ServicesFaqSection .ServicesFaqIntroduction {
  max-width: 420px;
  margin: clamp(30px, 3.5vw, 50px) 0 0;
  color: var(--ServicesFaqSecondary);
  font-size: 14px;
  line-height: 1.8;
}
#ServicesFaqSection {
  /* =====================================================
     Image
  ===================================================== */
}
#ServicesFaqSection .ServicesFaqMedia {
  width: 100%;
  margin: 0;
}
#ServicesFaqSection .ServicesFaqMediaViewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5;
  overflow: hidden;
  background: #101010;
}
#ServicesFaqSection .ServicesFaqImage {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1) brightness(0.68) contrast(1.05);
  transform: scale(1.055);
  transition: filter 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#ServicesFaqSection .ServicesFaqMediaViewport:hover .ServicesFaqImage {
  filter: grayscale(0) brightness(0.83) contrast(1.02);
  transform: scale(1.025);
}
#ServicesFaqSection .ServicesFaqMediaShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.03) 55%, rgba(0, 0, 0, 0.38));
  pointer-events: none;
}
#ServicesFaqSection {
  /* =====================================================
     FAQ List
  ===================================================== */
}
#ServicesFaqSection .ServicesFaqList {
  border-top: 1px solid var(--ServicesFaqLine);
}
#ServicesFaqSection .ServicesFaqItem {
  position: relative;
  border-bottom: 1px solid var(--ServicesFaqLineSoft);
  transition: background-color 0.45s ease;
}
#ServicesFaqSection .ServicesFaqItem::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--ServicesFaqPrimary);
  content: "";
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesFaqSection .ServicesFaqItem.IsOpen {
  background: #0b0b0b;
}
#ServicesFaqSection .ServicesFaqItem.IsOpen::before {
  transform: scaleY(1);
}
#ServicesFaqSection .ServicesFaqItem.IsOpen .ServicesFaqCategory {
  color: var(--ServicesFaqPrimary);
}
#ServicesFaqSection .ServicesFaqItem.IsOpen .ServicesFaqQuestionText {
  color: var(--ServicesFaqPrimary);
}
#ServicesFaqSection .ServicesFaqItem.IsOpen .ServicesFaqToggle {
  background: var(--ServicesFaqPrimary);
  border-color: var(--ServicesFaqPrimary);
  color: #080808;
}
#ServicesFaqSection .ServicesFaqItem.IsOpen .ServicesFaqToggleLine:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
}
#ServicesFaqSection {
  /* =====================================================
     Question Row
  ===================================================== */
}
#ServicesFaqSection .ServicesFaqQuestion {
  display: Flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: clamp(30px, 4vw, 70px);
  min-height: clamp(145px, 10vw, 190px);
  padding: 32px clamp(20px, 2vw, 34px);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
#ServicesFaqSection .ServicesFaqQuestion:hover .ServicesFaqCategory {
  color: var(--ServicesFaqSecondary);
}
#ServicesFaqSection .ServicesFaqQuestion:hover .ServicesFaqQuestionText {
  color: var(--ServicesFaqPrimary);
  transform: translateX(5px);
}
#ServicesFaqSection .ServicesFaqQuestion:hover .ServicesFaqToggle {
  border-color: rgba(255, 255, 255, 0.4);
}
#ServicesFaqSection .ServicesFaqQuestion:focus-visible {
  outline: 1px solid var(--ServicesFaqPrimary);
  outline-offset: -1px;
}
#ServicesFaqSection {
  /* =====================================================
     Category
  ===================================================== */
}
#ServicesFaqSection .ServicesFaqCategory {
  align-self: start;
  padding-top: 9px;
  color: var(--ServicesFaqMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.35s ease;
}
#ServicesFaqSection {
  /* =====================================================
     Question
  ===================================================== */
}
#ServicesFaqSection .ServicesFaqQuestionMain {
  min-width: 0;
  max-width: 90%;
  width: 90%;
}
#ServicesFaqSection .ServicesFaqQuestionText {
  display: block;
  color: #7e7e7a;
  font-size: clamp(30px, 2.5vw, 51px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.05;
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesFaqSection {
  /* =====================================================
     Toggle
  ===================================================== */
}
#ServicesFaqSection .ServicesFaqToggle {
  position: relative;
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--ServicesFaqPrimary);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
#ServicesFaqSection .ServicesFaqToggleLine {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesFaqSection .ServicesFaqToggleLine:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}
#ServicesFaqSection {
  /* =====================================================
     Answer
  ===================================================== */
}
#ServicesFaqSection .ServicesFaqAnswer {
  height: 0;
  overflow: hidden;
  opacity: 0;
  will-change: height, opacity;
}
#ServicesFaqSection .ServicesFaqAnswerInner {
  padding: 0 clamp(20px, 2vw, 34px) clamp(42px, 4vw, 62px);
}
#ServicesFaqSection .ServicesFaqAnswerContent {
  visibility: visible !important;
  max-width: 80%;
}
#ServicesFaqSection .ServicesFaqAnswerContent p {
  margin: 0;
  color: var(--ServicesFaqSecondary);
  font-size: 18px;
  line-height: 1.8;
}

/* =========================================================
   Projects Archive
========================================================= */
#ProjectsArchiveSection {
  --ProjectsArchiveBackground: #050505;
  --ProjectsArchivePrimary: #f2f2ee;
  --ProjectsArchiveSecondary: #92928e;
  --ProjectsArchiveMuted: #5c5c59;
  --ProjectsArchiveLine: rgba(255, 255, 255, 0.11);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ProjectsArchiveBackground);
  color: var(--ProjectsArchivePrimary);
  /* =====================================================
     Container
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveContainer {
  padding-top: clamp(90px, 9vw, 150px);
}
#ProjectsArchiveSection {
  /* =====================================================
     Header
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveHeader {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  align-items: end;
  gap: clamp(70px, 10vw, 180px);
  padding-bottom: 0px;
}
#ProjectsArchiveSection .ProjectsArchiveEyebrow {
  display: block;
  margin-bottom: 24px;
  color: var(--ProjectsArchiveMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#ProjectsArchiveSection .ProjectsArchiveHeading {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(72px, 7.5vw, 142px);
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.85;
}
#ProjectsArchiveSection .ProjectsArchiveHeading em {
  color: var(--ProjectsArchiveSecondary);
  font-style: italic;
  font-weight: 400;
}
#ProjectsArchiveSection .ProjectsArchiveHeadingMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.08em;
}
#ProjectsArchiveSection .ProjectsArchiveHeadingText {
  display: block;
}
#ProjectsArchiveSection {
  /* =====================================================
     Header Side
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveHeaderSide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
}
#ProjectsArchiveSection .ProjectsArchiveIntroduction {
  max-width: 390px;
  margin: 0;
  color: var(--ProjectsArchiveSecondary);
  font-size: 14px;
  line-height: 1.8;
}
#ProjectsArchiveSection .ProjectsArchiveCount {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
#ProjectsArchiveSection .ProjectsArchiveCount strong {
  color: var(--ProjectsArchivePrimary);
  font-size: clamp(58px, 5vw, 90px);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.75;
}
#ProjectsArchiveSection .ProjectsArchiveCount span {
  padding-bottom: 2px;
  color: var(--ProjectsArchiveMuted);
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#ProjectsArchiveSection {
  /* =====================================================
     Toolbar
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 24px 0;
  border-top: 1px solid var(--ProjectsArchiveLine);
  border-bottom: 1px solid var(--ProjectsArchiveLine);
}
#ProjectsArchiveSection .ProjectsArchiveFilters {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}
#ProjectsArchiveSection .ProjectsArchiveFilter {
  position: relative;
  padding: 0 0 8px;
  border: 0;
  background: transparent;
  color: var(--ProjectsArchiveMuted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
#ProjectsArchiveSection .ProjectsArchiveFilter::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--ProjectsArchivePrimary);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectsArchiveSection .ProjectsArchiveFilter:hover, #ProjectsArchiveSection .ProjectsArchiveFilter.IsActive {
  color: var(--ProjectsArchivePrimary);
}
#ProjectsArchiveSection .ProjectsArchiveFilter.IsActive::after {
  transform: scaleX(1);
}
#ProjectsArchiveSection .ProjectsArchiveToolbarCount {
  color: var(--ProjectsArchiveMuted);
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#ProjectsArchiveSection {
  /* =====================================================
     Grid
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 50px;
  padding-top: clamp(65px, 7vw, 105px);
}
#ProjectsArchiveSection {
  /* =====================================================
     Card
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveCard {
  min-width: 0;
  opacity: 1;
}
#ProjectsArchiveSection .ProjectsArchiveCard.IsHidden {
  display: none;
}
#ProjectsArchiveSection .ProjectsArchiveCard.IsMoreProject {
  display: none;
}
#ProjectsArchiveSection .ProjectsArchiveCard.IsMoreProject.IsVisible {
  display: block;
}
#ProjectsArchiveSection .ProjectsArchiveCardLink {
  display: block;
  color: inherit;
  text-decoration: none;
}
#ProjectsArchiveSection {
  /* =====================================================
     Media
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveMedia {
  position: relative;
  width: 100%;
  aspect-ratio: 1.46/1;
  margin: 0;
  overflow: hidden;
  background: #101010;
}
#ProjectsArchiveSection .ProjectsArchiveImage {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(0.85) brightness(0.77) contrast(1.05);
  transform: scale(1.025);
  transition: filter 0.75s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectsArchiveSection .ProjectsArchiveMediaOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.05) 55%, rgba(0, 0, 0, 0.72));
  pointer-events: none;
}
#ProjectsArchiveSection {
  /* =====================================================
     Logo
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveLogo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  max-width: 180px;
  min-height: 48px;
  align-items: center;
  color: rgba(255, 255, 255, 0.84);
}
#ProjectsArchiveSection .ProjectsArchiveLogo span {
  font-size: clamp(20px, 1.7vw, 30px);
  font-weight: 500;
  letter-spacing: -0.045em;
}
#ProjectsArchiveSection .ProjectsArchiveLogo img {
  display: block;
  width: auto;
  max-width: 220px;
  -o-object-fit: contain;
     object-fit: contain;
  margin: -55px -40px;
  transition: filter 0.6s ease;
}
#ProjectsArchiveSection {
  /* =====================================================
     Arrow
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveArrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #ffffff;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectsArchiveSection .ProjectsArchiveArrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ProjectsArchiveSection {
  /* =====================================================
     Card Content
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveCardContent {
  padding-top: 18px;
}
#ProjectsArchiveSection .ProjectsArchiveCardMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 18px;
  color: var(--ProjectsArchiveMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#ProjectsArchiveSection .ProjectsArchiveTitle {
  margin: 0px 0px 12px;
  color: var(--ProjectsArchivePrimary);
  font-size: clamp(35px, 3.1vw, 58px);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.98;
  transition: color 0.4s ease;
}
#ProjectsArchiveSection .ProjectDescription {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ProjectsArchiveLine);
  max-width: -moz-max-content;
  max-width: max-content;
  color: var(--TextSecondary);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 40px;
}
#ProjectsArchiveSection .ProjectsArchiveCardBottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  padding: 0 0 18px;
}
#ProjectsArchiveSection .ProjectsArchiveCardBottom p {
  max-width: 430px;
  margin: 0;
  color: var(--ProjectsArchiveSecondary);
  font-size: 11px;
  line-height: 1.6;
}
#ProjectsArchiveSection .ProjectsArchiveCardBottom > span {
  flex: 0 0 auto;
  color: var(--ProjectsArchiveMuted);
  font-size: 9px;
}
#ProjectsArchiveSection {
  /* =====================================================
     Hover
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveCardLink:hover .ProjectsArchiveImage {
  filter: grayscale(0) brightness(0.91) contrast(1);
  transform: scale(1.055);
}
#ProjectsArchiveSection .ProjectsArchiveCardLink:hover .ProjectsArchiveLogo img {
  filter: grayscale(0) brightness(1);
}
#ProjectsArchiveSection .ProjectsArchiveCardLink:hover .ProjectsArchiveArrow {
  background: var(--ProjectsArchivePrimary);
  color: #080808;
  transform: rotate(45deg);
}
#ProjectsArchiveSection {
  /* =====================================================
     More
  ===================================================== */
}
#ProjectsArchiveSection .ProjectsArchiveMore {
  display: flex;
  justify-content: center;
  padding-top: clamp(70px, 8vw, 120px);
}
#ProjectsArchiveSection .ProjectsArchiveMoreButton {
  display: inline-flex;
  min-width: 230px;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 8px 9px 8px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ProjectsArchivePrimary);
  color: #080808;
  cursor: pointer;
  font: inherit;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectsArchiveSection .ProjectsArchiveMoreButton:hover {
  transform: translateY(-3px);
}
#ProjectsArchiveSection .ProjectsArchiveMoreButton:hover .ProjectsArchiveMoreIcon {
  transform: rotate(180deg);
}
#ProjectsArchiveSection .ProjectsArchiveMoreButton.IsHidden {
  display: none;
}
#ProjectsArchiveSection .ProjectsArchiveMoreText {
  font-size: 10px;
  font-weight: 600;
}
#ProjectsArchiveSection .ProjectsArchiveMoreIcon {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #080808;
  color: #ffffff;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectsArchiveSection .ProjectsArchiveMoreIcon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   Case Studies Slider Additions
========================================================= */
#CaseStudiesSection {
  /* =====================================================
     Slider
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesSlider {
  position: relative;
  width: 100%;
}
#CaseStudiesSection .CaseStudiesSliderViewport {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
#CaseStudiesSection .CaseStudiesSliderViewport:focus-visible {
  outline: none;
}
#CaseStudiesSection .CaseStudiesSliderViewport::-webkit-scrollbar {
  display: none;
}
#CaseStudiesSection .CaseStudiesSliderViewport.IsDragging {
  cursor: grabbing;
}
#CaseStudiesSection .CaseStudiesSliderViewport.IsDragging .CaseStudiesCardLink {
  pointer-events: none;
}
#CaseStudiesSection {
  /*
   * Overrides only the layout mode of the
   * existing CaseStudiesGrid.
   */
}
#CaseStudiesSection .CaseStudiesGrid {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  grid-template-columns: none;
  gap: clamp(24px, 2.4vw, 44px);
}
#CaseStudiesSection .CaseStudiesCard {
  /*
   * Two cards visible on desktop.
   */
  width: calc((min(var(--ContainerWidth, 100vw), 100vw) - clamp(24px, 2.4vw, 44px)) / 2);
  width: calc((100vw - var(--CaseStudiesViewportSpace, 0px) - clamp(24px, 2.4vw, 44px)) / 2);
  flex: 0 0 calc((100vw - var(--CaseStudiesViewportSpace, 0px) - clamp(24px, 2.4vw, 44px)) / 2);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
#CaseStudiesSection {
  /* =====================================================
     Interface
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesSliderInterface {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
}
#CaseStudiesSection {
  /* =====================================================
     Progress
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesSliderProgress {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
#CaseStudiesSection .CaseStudiesSliderProgressBar {
  position: absolute;
  inset: 0;
  background: var(--TextPrimary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#CaseStudiesSection {
  /* =====================================================
     Floating left / right navigation
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesSliderNavigation {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 25;
  /*
   * This places the buttons through the
   * visual center of the case-study media.
   */
  height: clamp(260px, 26vw, 500px);
  pointer-events: none;
}
#CaseStudiesSection .CaseStudiesSliderButton {
  position: absolute;
  top: 50%;
  display: flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(5, 5, 5, 0.72);
  color: var(--TextPrimary);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  transform: translateY(-50%);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#CaseStudiesSection .CaseStudiesSliderButton svg {
  width: 18px;
  height: 18px;
}
#CaseStudiesSection .CaseStudiesSliderButton:hover, #CaseStudiesSection .CaseStudiesSliderButton:focus-visible {
  border-color: var(--TextPrimary);
  background: var(--TextPrimary);
  color: #080808;
  outline: none;
  transform: translateY(-50%) scale(1.08);
}
#CaseStudiesSection .CaseStudiesSliderButton:disabled {
  opacity: 0.22;
  pointer-events: none;
}
#CaseStudiesSection {
  /* ---------------------------------------------
     Previous
  --------------------------------------------- */
}
#CaseStudiesSection .CaseStudiesSliderButtonPrevious {
  left: 18px;
}
#CaseStudiesSection {
  /* ---------------------------------------------
     Next
  --------------------------------------------- */
}
#CaseStudiesSection .CaseStudiesSliderButtonNext {
  right: 18px;
}
#CaseStudiesSection {
  /* =====================================================
     Bottom progress / count
  ===================================================== */
}
#CaseStudiesSection .CaseStudiesSliderInterface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 35px;
  margin-top: clamp(35px, 4vw, 55px);
}
#CaseStudiesSection .CaseStudiesSliderProgress {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
#CaseStudiesSection .CaseStudiesSliderProgressBar {
  position: absolute;
  inset: 0;
  background: var(--TextPrimary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#CaseStudiesSection .CaseStudiesSliderCount {
  min-width: 58px;
  color: var(--TextSecondary);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-align: right;
}

/* =========================================================
   Case Studies Slider — Tablet
========================================================= */
@media (max-width: 992px) {
  #CaseStudiesSection .CaseStudiesCard {
    width: calc((100vw - var(--CaseStudiesViewportSpace, 0px) - 28px) / 2);
    flex-basis: calc((100vw - var(--CaseStudiesViewportSpace, 0px) - 28px) / 2);
  }
}
/* =========================================================
   Case Studies Slider — Mobile
========================================================= */
@media (max-width: 768px) {
  #CaseStudiesSection .CaseStudiesGrid {
    gap: 18px;
  }
  #CaseStudiesSection .CaseStudiesCard {
    /*
     * One full project on mobile.
     */
    width: calc(100vw - var(--CaseStudiesViewportSpace, 0px));
    flex-basis: calc(100vw - var(--CaseStudiesViewportSpace, 0px));
  }
  #CaseStudiesSection .CaseStudiesSliderInterface {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  #CaseStudiesSection .CaseStudiesSliderControls {
    justify-content: flex-end;
  }
}
@media (max-width: 576px) {
  #CaseStudiesSection .CaseStudiesSliderButton {
    width: 30px;
    height: 30px;
  }
  #CaseStudiesSection .CaseStudiesSliderButtonNext {
    right: 6px;
  }
  #CaseStudiesSection .CaseStudiesSliderButtonPrevious {
    left: 6px;
  }
}
/* =========================================================
   Services List
========================================================= */
#ServicesListSection {
  --ServicesListBackground: #050505;
  --ServicesListPrimary: #f2f2ee;
  --ServicesListSecondary: #999995;
  --ServicesListMuted: #5d5d59;
  --ServicesListLine: rgba(255, 255, 255, 0.12);
  --ServicesListLineSoft: rgba(255, 255, 255, 0.07);
  position: relative;
  width: 100%;
  overflow: visible;
  background: var(--ServicesListBackground);
  color: var(--ServicesListPrimary);
}
#ServicesListSection .ServicesListContainer {
  position: relative;
  padding-top: 70px;
  padding-bottom: clamp(115px, 12vw, 200px);
}
#ServicesListSection {
  /* =====================================================
     Sticky Suril Visual
  ===================================================== */
}
#ServicesListSection .ServicesListVisualColumn {
  position: relative;
  min-width: 0;
  align-self: stretch;
}
#ServicesListSection .ServicesListVisual {
  position: sticky;
  top: 105px;
  width: 100%;
  height: min(100svh - 145px, 740px);
  min-height: 500px;
  overflow: hidden;
  background: #0d0d0d;
  isolation: isolate;
}
#ServicesListSection {
  /* =====================================================
     Portrait
  ===================================================== */
}
#ServicesListSection .ServicesListPortrait {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #101010;
}
#ServicesListSection .ServicesListPortraitImage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /*
  * Portrait works better slightly higher
  * so the face remains visible above the CTA.
  */
  -o-object-position: center 22%;
     object-position: center 22%;
  filter: grayscale(1) brightness(0.64) contrast(1.08);
  transform: scale(1.045);
  transition: filter 0.75s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#ServicesListSection {
  /*
  * Colour reveal is now ONLY connected
  * to the portrait itself — not service rows.
  */
}
#ServicesListSection .ServicesListVisual:hover .ServicesListPortraitImage {
  filter: grayscale(0) brightness(0.79) contrast(1.04);
  transform: scale(1.025);
}
#ServicesListSection {
  /* =====================================================
     Image Shading
  ===================================================== */
}
#ServicesListSection .ServicesListPortraitShade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.04) 36%, rgba(0, 0, 0, 0.24) 58%, rgba(0, 0, 0, 0.94) 100%);
  pointer-events: none;
}
#ServicesListSection {
  /* =====================================================
     Oversized SRC Detail
  ===================================================== */
}
#ServicesListSection .ServicesListPortraitMark {
  position: absolute;
  top: -0.08em;
  right: -0.055em;
  z-index: 3;
  color: rgba(255, 255, 255, 0.055);
  font-size: clamp(130px, 12vw, 225px);
  font-weight: 500;
  letter-spacing: -0.11em;
  line-height: 0.8;
  pointer-events: none;
}
#ServicesListSection {
  /* =====================================================
     Top Information
  ===================================================== */
}
#ServicesListSection .ServicesListPortraitTop {
  position: absolute;
  top: 26px;
  right: 27px;
  left: 27px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
#ServicesListSection .ServicesListPortraitName {
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
}
#ServicesListSection .ServicesListPortraitRole {
  color: rgba(255, 255, 255, 0.58);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: right;
  text-transform: uppercase;
}
#ServicesListSection {
  /* =====================================================
     CTA
  ===================================================== */
}
#ServicesListSection .ServicesListPortraitCta {
  position: absolute;
  right: 27px;
  bottom: 27px;
  left: 27px;
  z-index: 6;
}
#ServicesListSection {
  /* =====================================================
     CTA Copy
  ===================================================== */
}
#ServicesListSection .ServicesListPortraitCtaCopy {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
#ServicesListSection .ServicesListPortraitCtaEyebrow {
  display: block;
  margin-bottom: 13px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#ServicesListSection .ServicesListPortraitCtaTitle {
  max-width: 390px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(32px, 2.8vw, 48px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}
#ServicesListSection .ServicesListPortraitCtaTitle em {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  font-weight: 400;
}
#ServicesListSection {
  /* =====================================================
     CTA Button
  ===================================================== */
}
#ServicesListSection .ServicesListPortraitButton {
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 25px;
  padding: 9px 9px 9px 23px;
  border-radius: 999px;
  background: #f2f2ee;
  color: #080808;
  text-decoration: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
}
#ServicesListSection .ServicesListPortraitButton:hover {
  transform: translateY(-3px);
  background: #ffffff;
}
#ServicesListSection .ServicesListPortraitButton:hover .ServicesListPortraitButtonIcon {
  transform: rotate(45deg);
}
#ServicesListSection .ServicesListPortraitButton:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 5px;
}
#ServicesListSection .ServicesListPortraitButtonText {
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 600;
  letter-spacing: 0.02em;
}
#ServicesListSection .ServicesListPortraitButtonIcon {
  display: flex;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #090909;
  color: #ffffff;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesListSection .ServicesListPortraitButtonIcon svg {
  width: 15px;
  height: 15px;
}
#ServicesListSection {
  /* =====================================================
     Header
  ===================================================== */
}
#ServicesListSection .ServicesListHeader {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  align-items: end;
  gap: clamp(70px, 10vw, 175px);
  padding-bottom: 50px;
}
#ServicesListSection .ServicesListHeading {
  max-width: 1100px;
  margin: 0;
  color: var(--ServicesListPrimary);
  font-size: clamp(76px, 7vw, 132px);
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.85;
}
#ServicesListSection .ServicesListHeadingMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.1em;
}
#ServicesListSection .ServicesListHeadingText {
  display: block;
}
#ServicesListSection .ServicesListHeading em {
  color: var(--ServicesListSecondary);
  font-style: italic;
  font-weight: 400;
}
#ServicesListSection .ServicesListIntroduction {
  max-width: 390px;
  margin: 0 0 8px;
  color: var(--ServicesListSecondary);
  font-size: 14px;
  line-height: 1.8;
}
#ServicesListSection {
  /* =====================================================
     Layout
  ===================================================== */
}
#ServicesListSection .ServicesListLayout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(370px, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: clamp(65px, 8vw, 145px);
  padding-top: 0;
}
#ServicesListSection {
  /* =====================================================
     Sticky Visual
  ===================================================== */
}
#ServicesListSection .ServicesListVisualColumn {
  position: relative;
  min-width: 0;
  align-self: stretch;
}
#ServicesListSection .ServicesListVisual {
  position: sticky;
  top: 105px;
  width: 100%;
  height: 85dvh;
  min-height: 500px;
  overflow: hidden;
  background: #101010;
  isolation: isolate;
}
#ServicesListSection .ServicesListVisualMedia {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#ServicesListSection .ServicesListImage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  filter: grayscale(1) brightness(0.63) contrast(1.08);
  transform: scale(1.08);
  transition: filter 0.65s ease;
  will-change: transform, opacity;
}
#ServicesListSection .ServicesListImage.IsCurrent {
  opacity: 1;
}
#ServicesListSection .ServicesListVisual.IsColourActive .ServicesListImage {
  filter: grayscale(0) brightness(0.82) contrast(1.03);
}
#ServicesListSection .ServicesListImageShade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.05) 42%, rgba(0, 0, 0, 0.86) 100%);
  pointer-events: none;
}
#ServicesListSection .ServicesListImageSweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20%;
  z-index: 4;
  width: 15%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-10deg);
}
#ServicesListSection {
  /* =====================================================
     Large Index
  ===================================================== */
}
#ServicesListSection .ServicesListVisualIndex {
  position: absolute;
  top: -0.08em;
  right: -0.04em;
  z-index: 5;
  color: rgba(255, 255, 255, 0.075);
  font-size: clamp(160px, 17vw, 320px);
  font-weight: 500;
  letter-spacing: -0.11em;
  line-height: 0.78;
  pointer-events: none;
}
#ServicesListSection {
  /* =====================================================
     Visual Footer
  ===================================================== */
}
#ServicesListSection .ServicesListVisualInformation {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
}
#ServicesListSection .ServicesListVisualCount {
  color: rgba(255, 255, 255, 0.55);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.13em;
}
#ServicesListSection .ServicesListVisualTitle {
  max-width: 260px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}
#ServicesListSection {
  /* =====================================================
     Services List
  ===================================================== */
}
#ServicesListSection .ServicesList {
  min-width: 0;
  border-top: 1px solid var(--ServicesListLineSoft);
}
#ServicesListSection .ServicesListItem {
  position: relative;
  border-bottom: 1px solid var(--ServicesListLineSoft);
}
#ServicesListSection .ServicesListItem::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--ServicesListPrimary);
  content: "";
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesListSection .ServicesListItem.IsActive::before {
  transform: scaleY(1);
}
#ServicesListSection .ServicesListItem.IsActive .ServicesListNumber {
  color: var(--ServicesListPrimary);
}
#ServicesListSection .ServicesListItem.IsActive .ServicesListServiceIcon {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--ServicesListPrimary);
  transform: scale(1);
}
#ServicesListSection .ServicesListItem.IsActive .ServicesListTitle {
  color: var(--ServicesListPrimary);
}
#ServicesListSection .ServicesListItem.IsActive .ServicesListCapabilities li {
  color: var(--ServicesListSecondary);
}
#ServicesListSection .ServicesListItem.IsActive .ServicesListCapabilities li::before {
  opacity: 0.7;
}
#ServicesListSection .ServicesListItem.IsActive .ServicesListAction {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--ServicesListPrimary);
  opacity: 1;
  transform: translateX(0);
}
#ServicesListSection {
  /* =====================================================
     Service Row
  ===================================================== */
}
#ServicesListSection .ServicesListLink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  min-height: clamp(180px, 12vw, 220px);
  padding: 34px 42px;
  color: inherit;
  text-decoration: none;
}
#ServicesListSection .ServicesListLink:focus-visible {
  outline: 1px solid var(--ServicesListPrimary);
  outline-offset: -1px;
}
#ServicesListSection {
  /* =====================================================
     Number
  ===================================================== */
}
#ServicesListSection .ServicesListNumber {
  align-self: start;
  display: none;
  padding-top: 5px;
  color: var(--ServicesListMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.13em;
  transition: color 0.35s ease;
}
#ServicesListSection {
  /* =====================================================
     Service Icon
  ===================================================== */
}
#ServicesListSection .ServicesListServiceIcon {
  display: flex;
  width: 110px;
  height: 110px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--ServicesListMuted);
  transform: scale(0.94);
  transition: color 0.4s ease, border-color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesListSection .ServicesListServiceIcon img {
  width: 72px;
  height: 72px;
  opacity: 0.6;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ServicesListSection {
  /* =====================================================
     Content
  ===================================================== */
}
#ServicesListSection .ServicesListContent {
  min-width: 0;
  width: 80%;
}
#ServicesListSection .ServicesListTitle {
  margin: 0 0 14px;
  color: #797976;
  font-size: clamp(34px, 2.8vw, 52px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
  transition: color 0.4s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesListSection .ServicesListTitle > span {
  display: block;
}
#ServicesListSection {
  /* =====================================================
     Capabilities
  ===================================================== */
}
#ServicesListSection .ServicesListCapabilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  max-width: 680px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
#ServicesListSection .ServicesListCapabilities li {
  position: relative;
  padding-left: 17px;
  color: #60605d;
  font-size: clamp(12px, 1.05vw, 14px);
  font-weight: 400;
  line-height: 1.5;
  transition: color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesListSection .ServicesListCapabilities li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0.35;
  transition: opacity 0.35s ease, width 0.35s ease;
}
#ServicesListSection {
  /* =====================================================
     Arrow
  ===================================================== */
}
#ServicesListSection .ServicesListAction {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--ServicesListMuted);
  opacity: 0.45;
  transform: translateX(-4px);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesListSection .ServicesListAction svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ServicesListSection {
  /* =====================================================
     Hover
  ===================================================== */
}
#ServicesListSection .ServicesListItem:hover .ServicesListServiceIcon {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--ServicesListPrimary);
  transform: scale(1);
}
#ServicesListSection .ServicesListItem:hover .ServicesListTitle {
  color: var(--ServicesListPrimary);
  transform: translateX(4px);
}
#ServicesListSection .ServicesListItem:hover .ServicesListCapabilities li {
  color: var(--ServicesListSecondary);
}
#ServicesListSection .ServicesListItem:hover .ServicesListCapabilities li::before {
  width: 10px;
  opacity: 0.75;
}
#ServicesListSection .ServicesListItem:hover .ServicesListAction {
  border-color: var(--ServicesListPrimary);
  background: var(--ServicesListPrimary);
  color: #080808;
  opacity: 1;
  transform: translateX(0);
}
#ServicesListSection .ServicesListItem:hover .ServicesListAction img {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* =========================================================
   Case Study Article
========================================================= */
#CaseStudyArticleSection {
  --CaseStudyBackground: #050505;
  --CaseStudyPrimary: #f2f2ee;
  --CaseStudySecondary: #999995;
  --CaseStudyMuted: #60605d;
  --CaseStudyLine: rgba(255, 255, 255, 0.11);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--CaseStudyBackground);
  color: var(--CaseStudyPrimary);
}
#CaseStudyArticleSection .CaseStudyArticleContainer {
  padding-top: 130px;
  padding-bottom: clamp(100px, 10vw, 170px);
}
#CaseStudyArticleSection {
  /* =====================================================
     Back
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleBackWrap {
  padding-bottom: 45px;
  border-bottom: 1px solid var(--CaseStudyLine);
}
#CaseStudyArticleSection .CaseStudyArticleBack {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--CaseStudySecondary);
  font-size: 10px;
  text-decoration: none;
  transition: color 0.35s ease;
}
#CaseStudyArticleSection .CaseStudyArticleBack:hover {
  color: var(--CaseStudyPrimary);
}
#CaseStudyArticleSection .CaseStudyArticleBack:hover .CaseStudyArticleBackIcon {
  transform: translateX(-4px);
}
#CaseStudyArticleSection .CaseStudyArticleBackIcon {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#CaseStudyArticleSection .CaseStudyArticleBackIcon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#CaseStudyArticleSection {
  /* =====================================================
     Header
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleHeader {
  padding: clamp(50px, 6vw, 90px) 0 clamp(50px, 6vw, 80px);
}
#CaseStudyArticleSection .CaseStudyArticleMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-bottom: clamp(35px, 4vw, 60px);
  color: var(--CaseStudyMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#CaseStudyArticleSection .CaseStudyArticleHeading {
  max-width: 1250px;
  margin: 0 0 clamp(45px, 5vw, 70px);
  color: var(--CaseStudyPrimary);
  font-size: clamp(84px, 9.5vw, 180px);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.81;
}
#CaseStudyArticleSection .CaseStudyArticleHeading em {
  color: var(--CaseStudySecondary);
  font-style: italic;
  font-weight: 400;
}
#CaseStudyArticleSection .CaseStudyArticleHeadingMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.08em;
}
#CaseStudyArticleSection .CaseStudyArticleHeadingText {
  display: block;
}
#CaseStudyArticleSection .CaseStudyArticleIntroduction {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
#CaseStudyArticleSection .CaseStudyArticleIntroduction p {
  max-width: 610px;
  margin: 0;
  color: var(--CaseStudySecondary);
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.65;
}
#CaseStudyArticleSection .CaseStudyArticleIntroduction > span {
  color: var(--CaseStudyMuted);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#CaseStudyArticleSection {
  /* =====================================================
     Images
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleHero,
#CaseStudyArticleSection .CaseStudyArticleFigure {
  margin: 0;
}
#CaseStudyArticleSection .CaseStudyArticleImageWrap {
  position: relative;
  overflow: hidden;
  background: #111111;
}
#CaseStudyArticleSection .CaseStudyArticleHero .CaseStudyArticleImageWrap {
  height: min(74svh, 820px);
}
#CaseStudyArticleSection .CaseStudyArticleImage {
  display: block;
  width: 100%;
  height: 108%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(0.2) brightness(0.82);
  transition: filter 0.7s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#CaseStudyArticleSection .CaseStudyArticleHero:hover .CaseStudyArticleImage,
#CaseStudyArticleSection .CaseStudyArticleFigure:hover .CaseStudyArticleImage {
  filter: grayscale(0) brightness(0.95);
  transform: scale(1.018);
}
#CaseStudyArticleSection figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  color: var(--CaseStudyMuted);
  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
#CaseStudyArticleSection {
  /* =====================================================
     Article Body
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleBody {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: clamp(90px, 10vw, 160px);
}
#CaseStudyArticleSection {
  /* =====================================================
     Lead
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleLead {
  max-width: 1030px;
  margin-bottom: clamp(60px, 7vw, 100px);
}
#CaseStudyArticleSection .CaseStudyArticleLead p {
  margin: 0;
  color: var(--CaseStudyPrimary);
  font-size: clamp(36px, 4.3vw, 72px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.08;
}
#CaseStudyArticleSection {
  /* =====================================================
     Normal Article Typography
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleText {
  max-width: 680px;
  margin: 0 auto clamp(90px, 10vw, 150px);
}
#CaseStudyArticleSection .CaseStudyArticleText p {
  margin: 0 0 26px;
  color: var(--CaseStudySecondary);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.8;
}
#CaseStudyArticleSection .CaseStudyArticleText p:last-child {
  margin-bottom: 0;
}
#CaseStudyArticleSection .CaseStudyArticleText h2 {
  margin: 0 0 38px;
  color: var(--CaseStudyPrimary);
  font-size: clamp(46px, 5vw, 82px);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.95;
}
#CaseStudyArticleSection .CaseStudyArticleText h2 em {
  color: var(--CaseStudySecondary);
  font-style: italic;
  font-weight: 400;
}
#CaseStudyArticleSection {
  /* =====================================================
     Facts
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleFacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 clamp(100px, 11vw, 165px);
  border-top: 1px solid var(--CaseStudyLine);
  border-bottom: 1px solid var(--CaseStudyLine);
}
#CaseStudyArticleSection .CaseStudyArticleFact {
  min-height: 125px;
  padding: 22px clamp(15px, 2vw, 28px) 24px 0;
  border-right: 1px solid var(--CaseStudyLine);
}
#CaseStudyArticleSection .CaseStudyArticleFact:not(:first-child) {
  padding-left: clamp(15px, 2vw, 28px);
}
#CaseStudyArticleSection .CaseStudyArticleFact:last-child {
  border-right: 0;
}
#CaseStudyArticleSection .CaseStudyArticleFact span {
  display: block;
  margin-bottom: 28px;
  color: var(--CaseStudyMuted);
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#CaseStudyArticleSection .CaseStudyArticleFact strong {
  color: var(--CaseStudyPrimary);
  font-size: 13px;
  font-weight: 400;
}
#CaseStudyArticleSection {
  /* =====================================================
     Article Figure
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleFigure {
  width: 82%;
  margin: 0 0 clamp(100px, 12vw, 180px);
}
#CaseStudyArticleSection .CaseStudyArticleFigure .CaseStudyArticleImageWrap {
  height: min(66svh, 680px);
}
#CaseStudyArticleSection .CaseStudyArticleFigureWide {
  width: 100%;
}
#CaseStudyArticleSection .CaseStudyArticleFigureWide .CaseStudyArticleImageWrap {
  height: min(70svh, 760px);
}
#CaseStudyArticleSection {
  /* =====================================================
     Scope
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleScope {
  margin: 0 0 clamp(100px, 12vw, 180px);
  padding-top: 24px;
  border-top: 1px solid var(--CaseStudyLine);
}
#CaseStudyArticleSection .CaseStudyArticleSmallLabel {
  display: block;
  margin-bottom: 38px;
  color: var(--CaseStudyMuted);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#CaseStudyArticleSection .CaseStudyArticleScopeList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}
#CaseStudyArticleSection .CaseStudyArticleScopeList span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #b0b0ac;
  font-size: 11px;
}
#CaseStudyArticleSection {
  /* =====================================================
     Quote
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleQuote {
  max-width: 1000px;
  margin: clamp(110px, 12vw, 190px) 0;
  padding: 0;
  border: 0;
}
#CaseStudyArticleSection .CaseStudyArticleQuote p {
  margin: 0;
  color: var(--CaseStudyPrimary);
  font-size: clamp(48px, 5.8vw, 102px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.94;
}
#CaseStudyArticleSection .CaseStudyArticleQuote em {
  color: var(--CaseStudySecondary);
  font-style: italic;
  font-weight: 400;
}
#CaseStudyArticleSection {
  /* =====================================================
     Footer
  ===================================================== */
}
#CaseStudyArticleSection .CaseStudyArticleFooter {
  display: flex;
  justify-content: flex-end;
  padding-top: clamp(55px, 7vw, 90px);
  border-top: 1px solid var(--CaseStudyLine);
}
#CaseStudyArticleSection .CaseStudyArticleAllProjects {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: var(--CaseStudyPrimary);
  font-size: 13px;
  text-decoration: none;
}
#CaseStudyArticleSection .CaseStudyArticleAllProjects svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#CaseStudyArticleSection .CaseStudyArticleAllProjects:hover svg {
  transform: translate(4px, -4px);
}

/* =========================================================
   Project Detail
========================================================= */
#ProjectDetailSection {
  --ProjectDetailBackground: #050505;
  --ProjectDetailPrimary: #f2f2ee;
  --ProjectDetailSecondary: #969692;
  --ProjectDetailMuted: #5f5f5b;
  --ProjectDetailLine: rgba(255, 255, 255, 0.11);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ProjectDetailBackground);
  color: var(--ProjectDetailPrimary);
  /* =====================================================
       Container
    ===================================================== */
}
#ProjectDetailSection .ProjectDetailContainer {
  padding-top: 40px;
  padding-bottom: clamp(100px, 10vw, 170px);
}
#ProjectDetailSection {
  /* =====================================================
       Top
    ===================================================== */
}
#ProjectDetailSection .ProjectDetailTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--ProjectDetailLine);
}
#ProjectDetailSection .ProjectDetailBack {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ProjectDetailSecondary);
  font-size: 10px;
  text-decoration: none;
  transition: color 0.35s ease;
}
#ProjectDetailSection .ProjectDetailBack:hover {
  color: var(--ProjectDetailPrimary);
}
#ProjectDetailSection .ProjectDetailBack:hover .ProjectDetailBackIcon {
  transform: translateX(-4px);
}
#ProjectDetailSection .ProjectDetailBackIcon {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectDetailSection .ProjectDetailBackIcon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ProjectDetailSection .ProjectDetailIndex {
  color: var(--ProjectDetailMuted);
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#ProjectDetailSection {
  /* =====================================================
       Header
    ===================================================== */
}
#ProjectDetailSection .ProjectDetailHeader {
  padding: 0 0 clamp(45px, 5vw, 70px);
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(45px, 5vw, 70px);
}
#ProjectDetailSection .ProjectDetailMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-bottom: clamp(32px, 4vw, 55px);
  color: var(--ProjectDetailMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#ProjectDetailSection .ProjectDetailHeading {
  max-width: 1300px;
  margin: 0 0 clamp(40px, 5vw, 65px);
  color: var(--ProjectDetailPrimary);
  font-size: clamp(82px, 9vw, 175px);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.81;
}
#ProjectDetailSection .ProjectDetailHeading em {
  color: var(--ProjectDetailSecondary);
  font-style: normal;
  line-height: 1.05;
  font-weight: 400;
}
#ProjectDetailSection .ProjectDetailHeadingMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.08em;
}
#ProjectDetailSection .ProjectDetailHeadingText {
  display: block;
}
#ProjectDetailSection .ProjectDetailIntro {
  max-width: 630px;
}
#ProjectDetailSection .ProjectDetailIntro p {
  margin: 0;
  color: var(--ProjectDetailSecondary);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.7;
}
#ProjectDetailSection {
  /* =====================================================
       Hero
    ===================================================== */
}
#ProjectDetailSection .ProjectDetailHero {
  margin: 0 0 clamp(50px, 6vw, 85px);
  position: relative;
  z-index: 5;
  margin: 0 0 clamp(50px, 6vw, 85px);
  transform-origin: 100% 0%;
  will-change: transform;
}
#ProjectDetailSection .ProjectDetailHeroViewport {
  height: 90vh;
  overflow: hidden;
  background: #101010;
}
#ProjectDetailSection .ProjectDetailHeroImage {
  display: block;
  width: 100%;
  height: 110%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(0.15) brightness(0.85);
  will-change: transform;
}
#ProjectDetailSection .ProjectDetailHero figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  color: var(--ProjectDetailMuted);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#ProjectDetailSection {
  /* =====================================================
       Facts
    ===================================================== */
}
#ProjectDetailSection .ProjectDetailFacts {
  position: relative;
  z-index: 6;
  background: var(--ProjectDetailBackground);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#ProjectDetailSection .ProjectDetailFacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* =====================================================
     Individual Fact
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailFacts .ProjectDetailFact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#ProjectDetailSection .ProjectDetailFacts {
  /* =====================================================
     Icon
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailFacts .ProjectDetailFactIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: rgba(242, 242, 238, 0.58);
  border: 1px solid rgba(242, 242, 238, 0.295);
  font-size: 19px;
  border-radius: 100%;
  /*
     * No circle / no heavy background.
     *
     * Keeps it editorial and premium.
     */
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectDetailSection .ProjectDetailFacts .ProjectDetailFactIcon i {
  margin-right: -2px;
  font-weight: 300;
}
#ProjectDetailSection .ProjectDetailFacts {
  /* =====================================================
     Value
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailFacts .ProjectDetailFact strong {
  color: #f2f2ee;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.4;
}
#ProjectDetailSection .ProjectDetailFacts {
  /* =====================================================
     Hover
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailFacts .ProjectDetailFact:hover .ProjectDetailFactIcon {
  color: #f2f2ee;
  transform: translateY(-2px);
}
#ProjectDetailSection .ProjectDetailFact {
  min-height: 120px;
  padding: 22px clamp(18px, 2vw, 28px) 24px;
  border-right: 1px solid var(--ProjectDetailLine);
}
#ProjectDetailSection .ProjectDetailFact:first-child {
  padding-left: 0;
}
#ProjectDetailSection .ProjectDetailFact:last-child {
  border-right: 0;
}
#ProjectDetailSection .ProjectDetailFact span {
  display: block;
  margin-bottom: 16px;
  color: var(--ProjectDetailMuted);
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
#ProjectDetailSection .ProjectDetailFact strong {
  color: var(--ProjectDetailPrimary);
  font-size: 13px;
  font-weight: 400;
}
#ProjectDetailSection {
  /* =====================================================
       WordPress Content Area
    ===================================================== */
}
#ProjectDetailSection .ProjectDetailContent {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}
#ProjectDetailSection .ProjectDetailContent > p {
  max-width: 680px;
  margin: 0 auto 27px;
  color: var(--ProjectDetailSecondary);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.85;
}
#ProjectDetailSection .ProjectDetailContent .ProjectDetailLead {
  max-width: 960px;
  margin-bottom: clamp(65px, 7vw, 105px);
  color: var(--ProjectDetailPrimary);
  font-size: clamp(35px, 4vw, 67px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.09;
}
#ProjectDetailSection .ProjectDetailContent h2 {
  max-width: 760px;
  margin: clamp(90px, 10vw, 150px) auto 40px;
  color: var(--ProjectDetailPrimary);
  font-size: clamp(46px, 5vw, 82px);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.95;
}
#ProjectDetailSection .ProjectDetailContent h2 em {
  color: var(--ProjectDetailSecondary);
  font-style: italic;
  font-weight: 400;
}
#ProjectDetailSection .ProjectDetailContent figure {
  width: 82%;
  margin: clamp(90px, 10vw, 150px) auto;
}
#ProjectDetailSection .ProjectDetailContent figure img {
  display: block;
  width: 100%;
  max-height: 720px;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(0.85) brightness(0.8);
  transition: filter 0.65s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectDetailSection .ProjectDetailContent figure:hover img {
  filter: grayscale(0) brightness(0.95);
}
#ProjectDetailSection .ProjectDetailContent figure figcaption {
  padding-top: 12px;
  color: var(--ProjectDetailMuted);
  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
#ProjectDetailSection .ProjectDetailContent .ProjectDetailWideFigure {
  width: 100%;
}
#ProjectDetailSection .ProjectDetailContent .ProjectDetailWideFigure img {
  max-height: 780px;
}
#ProjectDetailSection .ProjectDetailContent blockquote {
  max-width: 980px;
  margin: clamp(110px, 12vw, 180px) 0;
  padding: 0;
  border: 0;
}
#ProjectDetailSection .ProjectDetailContent blockquote p {
  margin: 0;
  color: var(--ProjectDetailPrimary);
  font-size: clamp(48px, 5.8vw, 100px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.94;
}
#ProjectDetailSection .ProjectDetailContent blockquote em {
  color: var(--ProjectDetailSecondary);
  font-style: italic;
  font-weight: 400;
}
#ProjectDetailSection {
  /* =====================================================
       Scope
    ===================================================== */
}
#ProjectDetailSection .ProjectDetailScope {
  margin: 40px 0;
  padding-top: 24px;
  border-top: 1px solid var(--ProjectDetailLine);
  max-width: 55%;
}
#ProjectDetailSection .ProjectDetailScope ul {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#ProjectDetailSection .ProjectDetailScope li {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #aaaaa6;
  font-size: 10px;
}
#ProjectDetailSection .ProjectDetailScopeLabel {
  display: block;
  margin-bottom: 16px;
  color: var(--ProjectDetailMuted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#ProjectDetailSection {
  /* =====================================================
       Footer
    ===================================================== */
}
#ProjectDetailSection .ProjectDetailFooter {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(100px, 11vw, 170px);
  padding-top: 32px;
  border-top: 1px solid var(--ProjectDetailLine);
}
#ProjectDetailSection .ProjectDetailBackToProjects {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--ProjectDetailPrimary);
  text-decoration: none;
}
#ProjectDetailSection .ProjectDetailBackToProjects > span:first-child {
  font-size: 12px;
}
#ProjectDetailSection .ProjectDetailBackToProjects:hover .ProjectDetailBackToProjectsIcon {
  background: var(--ProjectDetailPrimary);
  color: #080808;
  transform: rotate(45deg);
}
#ProjectDetailSection .ProjectDetailBackToProjectsIcon {
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectDetailSection .ProjectDetailBackToProjectsIcon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   Inner Hero
========================================================= */
#InnerHeroSection {
  --InnerHeroBackground: #050505;
  --InnerHeroPrimary: #f2f2ee;
  --InnerHeroSecondary: #8f8f8b;
  --InnerHeroLine: rgba(255, 255, 255, 0.12);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--InnerHeroBackground);
  color: var(--InnerHeroPrimary);
}
@supports (height: 100dvh) {
  #InnerHeroSection {
    min-height: 100dvh;
  }
}
#InnerHeroSection {
  /* =====================================================
     Desktop / Tablet Background
  ===================================================== */
}
#InnerHeroSection .InnerHeroBackground {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#InnerHeroSection .InnerHeroBackgroundViewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--InnerHeroBackground);
}
#InnerHeroSection .InnerHeroBackgroundImage {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 80%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: right center;
     object-position: right center;
  filter: grayscale(1) brightness(0.72) contrast(1.12);
  transform: scale(1.06);
  transform-origin: 70% 48%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.62) 30%, rgba(0, 0, 0, 0.88) 40%, #000 48%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.28) 18%, rgba(0, 0, 0, 0.62) 30%, rgba(0, 0, 0, 0.88) 40%, #000 48%, #000 100%);
  will-change: transform;
}
#InnerHeroSection .InnerHeroBackgroundShade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, #050505 0%, #050505 20%, rgba(5, 5, 5, 0.98) 28%, rgba(5, 5, 5, 0.9) 37%, rgba(5, 5, 5, 0.68) 46%, rgba(5, 5, 5, 0.4) 55%, rgba(5, 5, 5, 0.16) 64%, transparent 76%), linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, 0.72) 6%, rgba(5, 5, 5, 0.22) 18%, transparent 30%), linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, 0.64) 8%, rgba(5, 5, 5, 0.22) 20%, transparent 34%), radial-gradient(ellipse at 72% 48%, transparent 0%, transparent 32%, rgba(5, 5, 5, 0.06) 52%, rgba(5, 5, 5, 0.3) 80%, rgba(5, 5, 5, 0.6) 100%);
}
#InnerHeroSection::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 12%;
  right: 5%;
  width: 55%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 38%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}
#InnerHeroSection {
  /* =====================================================
     Container
  ===================================================== */
}
#InnerHeroSection .InnerHeroContainer {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 125px;
  padding-bottom: 30px;
}
@supports (height: 100dvh) {
  #InnerHeroSection .InnerHeroContainer {
    min-height: 100dvh;
  }
}
#InnerHeroSection {
  /* =====================================================
     Main
  ===================================================== */
}
#InnerHeroSection .InnerHeroMain {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  padding: clamp(60px, 6vw, 100px) 0 clamp(50px, 5vw, 80px);
}
#InnerHeroSection {
  /* =====================================================
     Mobile Visual
     Hidden on desktop
  ===================================================== */
}
#InnerHeroSection .InnerHeroMobileVisual {
  display: none;
  margin: 0;
}
#InnerHeroSection .InnerHeroMobilePicture {
  display: block;
  width: 100%;
  height: 100%;
}
#InnerHeroSection .InnerHeroMobileImage {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#InnerHeroSection {
  /* =====================================================
     Content
  ===================================================== */
}
#InnerHeroSection .InnerHeroContent {
  position: relative;
  z-index: 6;
  width: min(58%, 900px);
}
#InnerHeroSection .InnerHeroTitle {
  margin: 0;
  color: var(--InnerHeroPrimary);
  font-size: clamp(88px, 8vw, 150px);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 1;
}
#InnerHeroSection .InnerHeroTitleMask {
  display: block;
  overflow: hidden;
  padding-right: 0.08em;
  padding-bottom: 0.08em;
}
#InnerHeroSection .InnerHeroTitleText {
  display: block;
}
#InnerHeroSection .InnerHeroStatement {
  max-width: 680px;
  margin: 14px 0 0;
  color: #d1d1cd;
  font-size: clamp(28px, 2.55vw, 47px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.08;
}
#InnerHeroSection .InnerHeroStatement em {
  display: inline;
  color: var(--InnerHeroSecondary);
  font-style: normal;
  font-weight: 400;
}
#InnerHeroSection {
  /* =====================================================
     Bottom
  ===================================================== */
}
#InnerHeroSection .InnerHeroBottom {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 20px;
}
#InnerHeroSection .InnerHeroBottomLine {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--InnerHeroLine);
  transform: scaleX(1);
  transform-origin: left;
}
#InnerHeroSection .InnerHeroExplore {
  display: flex;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  color: var(--InnerHeroPrimary);
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#InnerHeroSection .InnerHeroExplore svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#InnerHeroSection .InnerHeroExplore:hover {
  background: var(--InnerHeroPrimary);
  color: #080808;
  transform: translateY(3px);
}

/* =========================================================
   Project Detail Hero
   ONLY THIS PART IS REVISED
========================================================= */
#ProjectDetailSection {
  /* =====================================================
     Hero Figure
  ===================================================== */
}
#ProjectDetailSection .ProjectDeatailTop {
  margin: 0 0 clamp(50px, 6vw, 85px);
  overflow: hidden;
}
#ProjectDetailSection .ProjectDetailHero {
  position: relative;
  z-index: 4;
  width: 100%;
  /*
   * IMPORTANT:
   * The cutout needs to leave the original cover
   * when GSAP moves it toward the title.
   */
  overflow: visible;
  isolation: isolate;
}
#ProjectDetailSection {
  /* =====================================================
     Static Background Viewport
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailHeroViewport {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 90vh;
  max-height: 900px;
  min-height: 620px;
  overflow: visible;
  background: #101010;
}
#ProjectDetailSection {
  /* =====================================================
     Static Cover Image

     This image NEVER moves down.
     Mango logo stays colored because we're not applying
     grayscale through CSS.
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailHeroImage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
  /*
   * Your artwork is already predominantly black & white
   * with the Mango logo colored.
   *
   * Do NOT use grayscale() here because that would
   * remove the logo color too.
   */
  filter: brightness(0.88) contrast(1.02);
  transform: scale(1.001);
  will-change: transform;
}
#ProjectDetailSection {
  /* =====================================================
     Subtle Hero Edge Treatment
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailHeroViewport::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 55%, rgba(0, 0, 0, 0.08) 100%);
  content: "";
  pointer-events: none;
}
#ProjectDetailSection {
  /* =====================================================
     Suril Udeshi Cutout

     INITIAL POSITION:
     Recreates the original combined cover.

     ON SCROLL:
     JavaScript transforms ONLY this element.
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailHeroCutout {
  position: absolute;
  /*
   * This initial placement puts Suril back over the
   * restaurant cover so the first screen looks like
   * your original complete artwork.
   */
  bottom: 0%;
  right: 14.5%;
  z-index: 6;
  display: block;
  width: auto;
  height: 90%;
  max-width: 50%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  /*
   * Uploaded ProjectCutout.png is already transparent.
   * No background, border or fake cutout shadow.
   */
  background: transparent;
  /*
   * Keep it natural.
   * No drop-shadow because that was making the
   * previous version look artificial.
   */
  filter: none;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 0%;
  will-change: transform;
}
#ProjectDetailSection {
  /* =====================================================
     Caption
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailHero figcaption {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  color: var(--ProjectDetailMuted);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#ProjectDetailSection {
  /* =====================================================
     Header Layering

     No sizing / typography changes.
     Only layering added for moving cutout.
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailHeader {
  position: relative;
  z-index: 3;
  padding: 0 0 clamp(45px, 5vw, 70px);
}
#ProjectDetailSection {
  /* =====================================================
     Heading stays above / beside moving Suril
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailHeading {
  position: relative;
  z-index: 3;
}
#ProjectDetailSection .ProjectDetailIntro {
  position: relative;
  z-index: 3;
}
#ProjectDetailSection {
  /* =====================================================
     Facts terminate Hero animation visually

     The moving cutout can travel beside the heading,
     but can't visually interfere with article content.
  ===================================================== */
}
#ProjectDetailSection .ProjectDetailFacts {
  position: relative;
  z-index: 10;
  background: var(--ProjectDetailBackground);
}

/* =========================================================
   Projects + Feedback
========================================================= */
#ProjectFeedbackSection {
  --ProjectFeedbackBackground: #050505;
  --ProjectFeedbackPrimary: #f2f2ee;
  --ProjectFeedbackSecondary: #989893;
  --ProjectFeedbackMuted: #63635f;
  --ProjectFeedbackLine: rgba(255, 255, 255, 0.1);
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56px;
  background: var(--ProjectFeedbackBackground);
  color: var(--ProjectFeedbackPrimary);
}
#ProjectFeedbackSection .AboutEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  color: #a2a29d;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
#ProjectFeedbackSection .AboutEyebrow::before {
  display: block;
  width: 30px;
  height: 1px;
  background: #a2a29d;
  content: "";
  opacity: 0.7;
}
#ProjectFeedbackSection {
  /* =====================================================
     Container
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackContainer {
  display: flex;
  flex-direction: column;
  height: calc(100svh - 74px);
  min-height: 620px;
  max-height: 860px;
  padding-top: clamp(22px, 2vw, 34px);
  padding-bottom: clamp(20px, 2vw, 30px);
}
#ProjectFeedbackSection {
  /* =====================================================
     Header
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackHeader {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  padding-bottom: clamp(14px, 1.4vw, 22px);
}
#ProjectFeedbackSection .ProjectFeedbackHeading {
  margin: 0;
  color: var(--ProjectFeedbackPrimary);
  font-size: clamp(58px, 5.1vw, 84px);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.9;
}
#ProjectFeedbackSection .ProjectFeedbackHeading em {
  color: var(--ProjectFeedbackSecondary);
  font-style: italic;
  font-weight: 400;
}
#ProjectFeedbackSection {
  /* =====================================================
     Navigation
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackNavigation {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}
#ProjectFeedbackSection .ProjectFeedbackCounter {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  letter-spacing: 0.12em;
}
#ProjectFeedbackSection .ProjectFeedbackCurrent {
  color: var(--ProjectFeedbackPrimary);
}
#ProjectFeedbackSection .ProjectFeedbackCounterSlash,
#ProjectFeedbackSection .ProjectFeedbackTotal {
  color: var(--ProjectFeedbackMuted);
}
#ProjectFeedbackSection .ProjectFeedbackControls {
  display: flex;
  gap: 8px;
}
#ProjectFeedbackSection .ProjectFeedbackControl {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: transparent;
  color: var(--ProjectFeedbackPrimary);
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#ProjectFeedbackSection .ProjectFeedbackControl svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ProjectFeedbackSection .ProjectFeedbackControl:hover {
  background: var(--ProjectFeedbackPrimary);
  color: #080808;
  transform: scale(1.04);
}
#ProjectFeedbackSection {
  /* =====================================================
     Stage
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackStage {
  position: relative;
  flex: 1;
  min-height: 0;
  padding-top: clamp(14px, 1.6vw, 24px);
}
#ProjectFeedbackSection {
  /* =====================================================
     Slide
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackSlide {
  position: absolute;
  inset: clamp(14px, 1.6vw, 24px) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(34px, 3.6vw, 62px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
#ProjectFeedbackSection .ProjectFeedbackSlide.IsActive {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
#ProjectFeedbackSection {
  /* =====================================================
     Visual
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackVisual {
  min-width: 0;
  min-height: 0;
}
#ProjectFeedbackSection .ProjectFeedbackImageViewport {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(390px, 56vh, 690px);
  overflow: hidden;
  background: #101010;
  isolation: isolate;
}
#ProjectFeedbackSection .ProjectFeedbackImage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1) brightness(0.72) contrast(1.04);
  transform: scale(1.015);
  transition: filter 0.7s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
#ProjectFeedbackSection .ProjectFeedbackImageOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 52%, rgba(0, 0, 0, 0.28));
  pointer-events: none;
}
#ProjectFeedbackSection .ProjectFeedbackImageViewport:hover .ProjectFeedbackImage {
  filter: grayscale(0) brightness(0.88) contrast(1);
  transform: scale(1.03);
}
#ProjectFeedbackSection .ProjectFeedbackImageIndex {
  position: absolute;
  right: -0.03em;
  bottom: -0.12em;
  z-index: 3;
  color: rgba(255, 255, 255, 0.055);
  font-size: clamp(130px, 11vw, 220px);
  font-weight: 500;
  letter-spacing: -0.1em;
  line-height: 0.8;
  pointer-events: none;
}
#ProjectFeedbackSection {
  /* =====================================================
     Information
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackInformation {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  gap: clamp(18px, 1.8vw, 28px);
  padding-top: 6px;
}
#ProjectFeedbackSection .ProjectFeedbackProject {
  flex: 0 0 auto;
}
#ProjectFeedbackSection .ProjectFeedbackTitleRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 8px;
}
#ProjectFeedbackSection .ProjectFeedbackTitle {
  margin: 0;
  color: var(--ProjectFeedbackPrimary);
  font-size: clamp(56px, 4vw, 78px);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.92;
}
#ProjectFeedbackSection .ProjectFeedbackYear {
  flex: 0 0 auto;
  padding-top: 8px;
  color: var(--ProjectFeedbackMuted);
  font-size: 9px;
  letter-spacing: 0.13em;
}
#ProjectFeedbackSection .ProjectFeedbackDescription {
  max-width: 540px;
  margin: 14px 0 0;
  color: var(--ProjectFeedbackSecondary);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.75;
}
#ProjectFeedbackSection {
  /* =====================================================
     Quote
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackQuote {
  position: relative;
  margin: 8px 0 0;
  padding: clamp(10px, 1.3vw, 16px) 0 0;
  overflow: visible;
}
#ProjectFeedbackSection .ProjectFeedbackQuote::before {
  content: "“";
  position: absolute;
  top: -0.12em;
  left: -0.04em;
  z-index: 0;
  color: rgba(255, 255, 255, 0.06);
  font-size: clamp(95px, 8vw, 150px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
#ProjectFeedbackSection .ProjectFeedbackQuote::after {
  content: "”";
  position: absolute;
  right: 0.28em;
  bottom: -0.7em;
  z-index: 0;
  color: rgba(255, 255, 255, 0.04);
  font-size: clamp(95px, 8vw, 150px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
#ProjectFeedbackSection .ProjectFeedbackQuote p {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin: 0;
  padding-left: 44px;
  color: #dfdfda;
  font-size: clamp(18px, 1.5vw, 25px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.45;
}
#ProjectFeedbackSection {
  /* =====================================================
     Progress
  ===================================================== */
}
#ProjectFeedbackSection .ProjectFeedbackSlideProgress {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: clamp(14px, 1.6vw, 24px);
}
#ProjectFeedbackSection .ProjectFeedbackProgressLine {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
#ProjectFeedbackSection .ProjectFeedbackProgressFill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--ProjectFeedbackPrimary);
  transform: scaleX(0.333333);
  transform-origin: left;
  will-change: transform;
}

/* =========================================================
   404 Page
========================================================= */
#ErrorPageSection {
  --ErrorBackground: #050505;
  --ErrorPrimary: #f2f2ee;
  --ErrorSecondary: #92928e;
  --ErrorMuted: #5d5d59;
  --ErrorLine: rgba(255, 255, 255, 0.12);
  --ErrorLineSoft: rgba(255, 255, 255, 0.07);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ErrorBackground);
  color: var(--ErrorPrimary);
}
@supports (height: 100dvh) {
  #ErrorPageSection {
    min-height: 100dvh;
  }
}
#ErrorPageSection {
  /* =====================================================
     Background
  ===================================================== */
}
#ErrorPageSection .ErrorPageBackground {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#ErrorPageSection {
  /* =====================================================
     Giant Moving 404
  ===================================================== */
}
#ErrorPageSection .ErrorPageNumberMarquee {
  position: absolute;
  top: 48%;
  left: 0;
  width: 100%;
  overflow: hidden;
  transform: translateY(-50%);
  pointer-events: none;
}
#ErrorPageSection .ErrorPageNumberTrack {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: clamp(80px, 9vw, 170px);
  will-change: transform;
}
#ErrorPageSection .ErrorPageNumberTrack span {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.022);
  font-size: clamp(330px, 41vw, 780px);
  font-weight: 500;
  letter-spacing: -0.11em;
  line-height: 0.72;
  white-space: nowrap;
}
#ErrorPageSection {
  /* =====================================================
     Glow
  ===================================================== */
}
#ErrorPageSection .ErrorPageGlow {
  position: absolute;
  top: 50%;
  left: 58%;
  width: clamp(450px, 60vw, 950px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 28%, rgba(255, 255, 255, 0.005) 49%, transparent 72%);
  filter: blur(22px);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
#ErrorPageSection {
  /* =====================================================
     Soft Texture
  ===================================================== */
}
#ErrorPageSection .ErrorPageNoise {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 0.5px, transparent 0.5px);
  background-size: 5px 5px;
  opacity: 0.025;
  mix-blend-mode: screen;
}
#ErrorPageSection {
  /* =====================================================
     Container
  ===================================================== */
}
#ErrorPageSection .ErrorPageContainer {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 120px;
  padding-bottom: 30px;
}
@supports (height: 100dvh) {
  #ErrorPageSection .ErrorPageContainer {
    min-height: 100dvh;
  }
}
#ErrorPageSection {
  /* =====================================================
     Topline
  ===================================================== */
}
#ErrorPageSection .ErrorPageTopline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 20px;
}
#ErrorPageSection .ErrorPageTopline::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--ErrorLine);
  content: "";
  transform-origin: left;
}
#ErrorPageSection .ErrorPageToplineLabel,
#ErrorPageSection .ErrorPageToplineStatus {
  color: var(--ErrorMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#ErrorPageSection .ErrorPageToplineStatus {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
#ErrorPageSection .ErrorPageStatusDot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ErrorSecondary);
  opacity: 0.65;
}
#ErrorPageSection {
  /* =====================================================
     Main
  ===================================================== */
}
#ErrorPageSection .ErrorPageMain {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  align-items: center;
  gap: clamp(70px, 9vw, 160px);
  padding: clamp(70px, 8vh, 120px) 0 clamp(60px, 7vh, 100px);
}
#ErrorPageSection {
  /* =====================================================
     Content
  ===================================================== */
}
#ErrorPageSection .ErrorPageContent {
  position: relative;
  z-index: 4;
  max-width: 1050px;
}
#ErrorPageSection {
  /* =====================================================
     Eyebrow
  ===================================================== */
}
#ErrorPageSection .ErrorPageEyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 27px;
  color: var(--ErrorMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#ErrorPageSection .ErrorPageEyebrowLine {
  display: block;
  width: 32px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
}
#ErrorPageSection {
  /* =====================================================
     Heading
  ===================================================== */
}
#ErrorPageSection .ErrorPageHeading {
  max-width: 1000px;
  margin: 0;
  color: var(--ErrorPrimary);
  font-size: clamp(80px, 7.7vw, 145px);
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 0.87;
}
#ErrorPageSection .ErrorPageHeading em {
  color: var(--ErrorSecondary);
  font-style: italic;
  font-weight: 400;
}
#ErrorPageSection .ErrorPageHeadingMask {
  display: block;
  overflow: hidden;
  padding-right: 0.09em;
  padding-bottom: 0.08em;
}
#ErrorPageSection .ErrorPageHeadingText {
  display: block;
  will-change: transform;
}
#ErrorPageSection {
  /* =====================================================
     Information
  ===================================================== */
}
#ErrorPageSection .ErrorPageInformation {
  display: grid;
  grid-template-columns: minmax(230px, 340px) minmax(250px, 340px);
  align-items: end;
  gap: clamp(40px, 5vw, 90px);
  margin-top: clamp(42px, 5vw, 72px);
}
#ErrorPageSection .ErrorPageDescription {
  max-width: 340px;
  margin: 0;
  color: var(--ErrorSecondary);
  font-size: 13px;
  line-height: 1.75;
}
#ErrorPageSection {
  /* =====================================================
     Actions
  ===================================================== */
}
#ErrorPageSection .ErrorPageActions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
#ErrorPageSection {
  /* =====================================================
     Primary Button
  ===================================================== */
}
#ErrorPageSection .ErrorPagePrimaryButton {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 7px 7px 22px;
  border-radius: 999px;
  background: var(--ErrorPrimary);
  color: #080808;
  text-decoration: none;
  transition: background-color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#ErrorPageSection .ErrorPagePrimaryButton:hover {
  background: #ffffff;
  transform: translateY(-3px);
}
#ErrorPageSection .ErrorPagePrimaryButton:hover .ErrorPagePrimaryButtonIcon {
  transform: rotate(45deg);
}
#ErrorPageSection .ErrorPagePrimaryButton:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 5px;
}
#ErrorPageSection .ErrorPagePrimaryButtonText {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#ErrorPageSection .ErrorPagePrimaryButtonIcon {
  display: flex;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #090909;
  color: #ffffff;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#ErrorPageSection .ErrorPagePrimaryButtonIcon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ErrorPageSection {
  /* =====================================================
     Secondary Link
  ===================================================== */
}
#ErrorPageSection .ErrorPageTextLink {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 10px;
  color: var(--ErrorSecondary);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.35s ease;
}
#ErrorPageSection .ErrorPageTextLink svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#ErrorPageSection .ErrorPageTextLink:hover {
  color: var(--ErrorPrimary);
}
#ErrorPageSection .ErrorPageTextLink:hover svg {
  transform: translate(3px, -3px);
}
#ErrorPageSection {
  /* =====================================================
     Portal
  ===================================================== */
}
#ErrorPageSection .ErrorPagePortal {
  position: relative;
  justify-self: end;
  width: clamp(280px, 26vw, 470px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  will-change: transform;
}
#ErrorPageSection {
  /* =====================================================
     Outer Ring
  ===================================================== */
}
#ErrorPageSection .ErrorPagePortalOuter {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  will-change: transform;
}
#ErrorPageSection {
  /* =====================================================
     Orbit Text
  ===================================================== */
}
#ErrorPageSection .ErrorPageOrbitText {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  fill: rgba(242, 242, 238, 0.38);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
#ErrorPageSection {
  /* =====================================================
     Orbit Dot
  ===================================================== */
}
#ErrorPageSection .ErrorPageOrbitDot {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ErrorPrimary);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.28);
  transform: translateY(-50%);
}
#ErrorPageSection {
  /* =====================================================
     Inner Circle
  ===================================================== */
}
#ErrorPageSection .ErrorPagePortalInner {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 54%;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
#ErrorPageSection .ErrorPagePortalIndex {
  position: absolute;
  top: 18%;
  color: rgba(255, 255, 255, 0.15);
  font-size: 8px;
  letter-spacing: 0.15em;
}
#ErrorPageSection .ErrorPagePortalMessage {
  color: rgba(242, 242, 238, 0.7);
  font-size: clamp(18px, 1.7vw, 28px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-align: center;
}
#ErrorPageSection {
  /* =====================================================
     Crosshair
  ===================================================== */
}
#ErrorPageSection .ErrorPagePortalHorizontal,
#ErrorPageSection .ErrorPagePortalVertical {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  background: rgba(255, 255, 255, 0.055);
}
#ErrorPageSection .ErrorPagePortalHorizontal {
  width: 120%;
  height: 1px;
  transform: translate(-50%, -50%);
}
#ErrorPageSection .ErrorPagePortalVertical {
  width: 1px;
  height: 120%;
  transform: translate(-50%, -50%);
}
#ErrorPageSection {
  /* =====================================================
     Bottom
  ===================================================== */
}
#ErrorPageSection .ErrorPageBottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 22px;
}
#ErrorPageSection .ErrorPageBottomLine {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ErrorLine);
  transform-origin: left;
}
#ErrorPageSection .ErrorPageBottomText {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--ErrorMuted);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
#ErrorPageSection .ErrorPageBottomText span + span {
  position: relative;
  padding-left: 19px;
}
#ErrorPageSection .ErrorPageBottomText span + span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
}
#ErrorPageSection .ErrorPageBottomAction {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--ErrorPrimary);
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#ErrorPageSection .ErrorPageBottomAction svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ErrorPageSection .ErrorPageBottomAction:hover {
  background: var(--ErrorPrimary);
  color: #080808;
  transform: translateX(-4px);
}

/* =========================================================
   Privacy Policy
========================================================= */
#PrivacyPolicySection {
  --PrivacyBackground: #050505;
  --PrivacyPrimary: #f2f2ee;
  --PrivacySecondary: #92928e;
  --PrivacyMuted: #62625e;
  --PrivacyLine: rgba(255, 255, 255, 0.12);
  --PrivacyLineSoft: rgba(255, 255, 255, 0.07);
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: visible;
  background: var(--PrivacyBackground);
  color: var(--PrivacyPrimary);
  /* =====================================================
     Background
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyBackground {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#PrivacyPolicySection .PrivacyPolicyBackgroundWord {
  position: absolute;
  top: 170px;
  right: -0.06em;
  color: rgba(255, 255, 255, 0.018);
  font-size: clamp(220px, 27vw, 520px);
  font-weight: 500;
  letter-spacing: -0.1em;
  line-height: 0.72;
  text-transform: uppercase;
  white-space: nowrap;
}
#PrivacyPolicySection .PrivacyPolicyGlow {
  position: absolute;
  top: 10%;
  right: -10%;
  width: 60vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 34%, transparent 70%);
  filter: blur(30px);
}
#PrivacyPolicySection {
  /* =====================================================
     Container
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContainer {
  position: relative;
  z-index: 3;
  padding-top: 135px;
  padding-bottom: clamp(100px, 10vw, 170px);
}
#PrivacyPolicySection {
  /* =====================================================
     Hero
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyHero {
  position: relative;
  padding-bottom: clamp(85px, 8vw, 135px);
}
#PrivacyPolicySection {
  /* =====================================================
     Topline
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyTopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--PrivacyLine);
}
#PrivacyPolicySection .PrivacyPolicyToplineLabel,
#PrivacyPolicySection .PrivacyPolicyToplineMeta {
  color: var(--PrivacyMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#PrivacyPolicySection .PrivacyPolicyToplineMeta {
  display: flex;
  align-items: center;
  gap: 7px;
}
#PrivacyPolicySection .PrivacyPolicyToplineMeta strong {
  color: var(--PrivacySecondary);
  font-weight: 500;
}
#PrivacyPolicySection {
  /* =====================================================
     Hero Grid
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  align-items: end;
  gap: clamp(70px, 10vw, 170px);
  padding-top: clamp(70px, 8vw, 125px);
}
#PrivacyPolicySection {
  /* =====================================================
     Eyebrow
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyEyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 25px;
  color: var(--PrivacyMuted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#PrivacyPolicySection .PrivacyPolicyEyebrowLine {
  width: 31px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
}
#PrivacyPolicySection {
  /* =====================================================
     Heading
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyHeading {
  max-width: 1050px;
  margin: 0;
  color: var(--PrivacyPrimary);
  font-size: clamp(92px, 9vw, 168px);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.82;
}
#PrivacyPolicySection .PrivacyPolicyHeading em {
  color: var(--PrivacySecondary);
  font-style: italic;
  font-weight: 400;
}
#PrivacyPolicySection .PrivacyPolicyHeadingMask {
  display: block;
  overflow: visible;
  padding-right: 0.1em;
  padding-bottom: 0.1em;
}
#PrivacyPolicySection .PrivacyPolicyHeadingText {
  display: block;
}
#PrivacyPolicySection {
  /* =====================================================
     Hero Aside
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyHeroAside {
  max-width: 390px;
  padding-bottom: 10px;
}
#PrivacyPolicySection .PrivacyPolicyHeroAside p {
  margin: 0;
  color: var(--PrivacySecondary);
  font-size: 13px;
  line-height: 1.8;
}
#PrivacyPolicySection {
  /* =====================================================
     Main Document Layout
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyLayout {
  display: grid;
  grid-template-columns: minmax(190px, 0.36fr) minmax(0, 1.64fr);
  align-items: start;
  gap: clamp(80px, 11vw, 185px);
  padding-top: 70px;
  border-top: 1px solid var(--PrivacyLine);
}
#PrivacyPolicySection {
  /* =====================================================
     Sticky Aside
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyAside {
  min-width: 0;
  position: sticky;
  top: 120px;
}
#PrivacyPolicySection .PrivacyPolicyAsideLabel {
  display: block;
  margin-bottom: 27px;
  color: var(--PrivacyMuted);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#PrivacyPolicySection {
  /* =====================================================
     Navigation
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyNavigation {
  display: flex;
  flex-direction: column;
}
#PrivacyPolicySection .PrivacyPolicyNavigationLink {
  position: relative;
  display: block;
  padding: 12px 0 12px 17px;
  border-bottom: 1px solid var(--PrivacyLineSoft);
  color: #656561;
  font-size: 10px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#PrivacyPolicySection .PrivacyPolicyNavigationLink::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
  transition: width 0.35s ease;
}
#PrivacyPolicySection .PrivacyPolicyNavigationLink:hover, #PrivacyPolicySection .PrivacyPolicyNavigationLink.IsActive {
  color: var(--PrivacyPrimary);
  transform: translateX(3px);
}
#PrivacyPolicySection .PrivacyPolicyNavigationLink:hover::before, #PrivacyPolicySection .PrivacyPolicyNavigationLink.IsActive::before {
  width: 9px;
}
#PrivacyPolicySection {
  /* =====================================================
     Aside Footer
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyAsideFooter {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 40px;
  padding-top: 21px;
  border-top: 1px solid var(--PrivacyLine);
}
#PrivacyPolicySection .PrivacyPolicyAsideFooter > span {
  color: var(--PrivacyMuted);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#PrivacyPolicySection .PrivacyPolicyAsideFooter a {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 7px;
  color: var(--PrivacySecondary);
  font-size: 11px;
  text-decoration: none;
}
#PrivacyPolicySection .PrivacyPolicyAsideFooter a svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#PrivacyPolicySection .PrivacyPolicyAsideFooter a:hover {
  color: var(--PrivacyPrimary);
}
#PrivacyPolicySection .PrivacyPolicyAsideFooter a:hover svg {
  transform: translate(3px, -3px);
}
#PrivacyPolicySection {
  /* =====================================================
     Policy Content
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent {
  width: 100%;
  max-width: 960px;
  justify-self: end;
  /* ===================================================
     First Paragraph
  =================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent > p:first-child {
  max-width: 850px;
  margin-top: 0;
  margin-bottom: 75px;
  color: #c1c1bd;
  font-family: inherit;
  font-size: clamp(24px, 2.1vw, 36px);
  letter-spacing: -0.035em;
  line-height: 1.25;
}
#PrivacyPolicySection .PrivacyPolicyContent {
  /* ===================================================
     Headings
  =================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent h2 {
  max-width: 800px;
  margin: 100px 0 30px;
  color: var(--PrivacyPrimary);
  font-size: clamp(35px, 3.2vw, 55px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1;
}
#PrivacyPolicySection .PrivacyPolicyContent h2:first-child {
  margin-top: 0;
}
#PrivacyPolicySection .PrivacyPolicyContent h3 {
  margin: 55px 0 20px;
  color: #d7d7d2;
  font-size: clamp(21px, 1.8vw, 29px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
#PrivacyPolicySection .PrivacyPolicyContent {
  /* ===================================================
     Paragraphs
  =================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent p {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--PrivacySecondary);
  font-size: 14px;
  line-height: 1.85;
}
#PrivacyPolicySection .PrivacyPolicyContent {
  /* ===================================================
     Links
  =================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent a {
  position: relative;
  color: var(--PrivacyPrimary);
  text-decoration: none;
}
#PrivacyPolicySection .PrivacyPolicyContent a::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  content: "";
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#PrivacyPolicySection .PrivacyPolicyContent a:hover::after {
  transform: scaleX(0);
}
#PrivacyPolicySection .PrivacyPolicyContent {
  /* ===================================================
     Lists
  =================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent ul,
#PrivacyPolicySection .PrivacyPolicyContent ol {
  max-width: 750px;
  margin: 28px 0 35px;
  padding: 0;
}
#PrivacyPolicySection .PrivacyPolicyContent ul {
  list-style: none;
}
#PrivacyPolicySection .PrivacyPolicyContent ul li {
  position: relative;
  margin-bottom: 13px;
  padding-left: 23px;
  color: var(--PrivacySecondary);
  font-size: 14px;
  line-height: 1.7;
}
#PrivacyPolicySection .PrivacyPolicyContent ul li::before {
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 9px;
  height: 1px;
  background: var(--PrivacyMuted);
  content: "";
}
#PrivacyPolicySection .PrivacyPolicyContent ol {
  padding-left: 20px;
}
#PrivacyPolicySection .PrivacyPolicyContent ol li {
  margin-bottom: 13px;
  padding-left: 6px;
  color: var(--PrivacySecondary);
  font-size: 14px;
  line-height: 1.7;
}
#PrivacyPolicySection .PrivacyPolicyContent {
  /* ===================================================
     Separators
  =================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent hr {
  width: 100%;
  margin: 75px 0;
  border: 0;
  border-top: 1px solid var(--PrivacyLineSoft);
}
#PrivacyPolicySection .PrivacyPolicyContent {
  /* ===================================================
     Strong
  =================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent strong {
  color: #cfcfca;
  font-weight: 500;
}
#PrivacyPolicySection .PrivacyPolicyContent {
  /* ===================================================
     WordPress Tables
  =================================================== */
}
#PrivacyPolicySection .PrivacyPolicyContent .wp-block-table {
  width: 100%;
  margin: 45px 0;
  overflow-x: auto;
}
#PrivacyPolicySection .PrivacyPolicyContent .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}
#PrivacyPolicySection .PrivacyPolicyContent .wp-block-table th,
#PrivacyPolicySection .PrivacyPolicyContent .wp-block-table td {
  padding: 17px 18px;
  border: 1px solid var(--PrivacyLineSoft);
  color: var(--PrivacySecondary);
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}
#PrivacyPolicySection .PrivacyPolicyContent .wp-block-table th {
  color: var(--PrivacyPrimary);
  font-weight: 500;
}
#PrivacyPolicySection {
  /* =====================================================
     Footer
  ===================================================== */
}
#PrivacyPolicySection .PrivacyPolicyFooter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 22px;
  margin-top: clamp(100px, 11vw, 170px);
}
#PrivacyPolicySection .PrivacyPolicyFooterLine {
  width: 100%;
  height: 1px;
  background: var(--PrivacyLine);
  transform-origin: left;
}
#PrivacyPolicySection .PrivacyPolicyFooterCopy {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--PrivacyMuted);
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#PrivacyPolicySection .PrivacyPolicyFooterCopy span + span {
  position: relative;
  padding-left: 16px;
}
#PrivacyPolicySection .PrivacyPolicyFooterCopy span + span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
}
#PrivacyPolicySection .PrivacyPolicyBackToTop {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--PrivacyPrimary);
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#PrivacyPolicySection .PrivacyPolicyBackToTop svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#PrivacyPolicySection .PrivacyPolicyBackToTop:hover {
  background: var(--PrivacyPrimary);
  color: #080808;
  transform: translateY(-4px);
}/*# sourceMappingURL=style.css.map */