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

:root {
  --black: #050505;
  --near-black: #090909;
  --white: #f6f6f3;

  --gold: #c8a85d;
  --gold-light: #f0d991;
  --gold-dark: #7b6128;

  --cyan: #00eaff;
  --purple: #8c43ff;
  --magenta: #ff2fd1;

  --page-lightness: 246;

  --header-height: 88px;

  --ease:
    cubic-bezier(0.22, 1, 0.36, 1);
}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:
    rgb(
      var(--page-lightness),
      var(--page-lightness),
      var(--page-lightness)
    );

  color: var(--black);

  transition:
    background-color 100ms linear;
}


img,
video {
  display: block;
  max-width: 100%;
}


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


button {
  font: inherit;
}


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

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: var(--header-height);

  padding: 0 4vw;

  display: flex;
  align-items: center;

  z-index: 100;

  mix-blend-mode: difference;

  color: white;
}


.header-logo {
  margin-right: auto;
}


.header-logo img {
  width: 46px;
  height: auto;
}


.desktop-nav {
  display: flex;
  align-items: center;

  gap: 1.8rem;

  margin-right: 2.5rem;
}


.desktop-nav a {
  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  opacity: 0.75;

  transition:
    opacity 200ms ease,
    text-shadow 200ms ease;
}


.desktop-nav a:hover {
  opacity: 1;
}


.active-nav-link {
  opacity: 1 !important;
}


.nav-divider {
  width: 1px;
  height: 18px;

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


.virtual-nav-link:hover {
  text-shadow:
    0 0 12px var(--cyan),
    0 0 18px var(--magenta);
}


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

.menu-button {
  position: relative;

  z-index: 200;

  width: 38px;
  height: 30px;

  padding: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 6px;

  border: 0;

  background: transparent;

  color: inherit;

  cursor: pointer;
}


.menu-button span {
  width: 100%;
  height: 1px;

  background: currentColor;

  transition:
    transform 300ms ease,
    opacity 300ms ease;
}


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


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


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


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

.menu-overlay {
  position: fixed;

  inset: 0;

  z-index: 90;

  padding: 10vw;

  display: flex;
  align-items: center;

  background: var(--near-black);

  color: white;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity 400ms ease,
    visibility 400ms ease;
}


.menu-overlay.open {
  visibility: visible;
  opacity: 1;
}


.menu-nav {
  width: 100%;

  display: flex;
  flex-direction: column;
}


.menu-nav a {
  display: flex;
  align-items: baseline;

  gap: 1.5rem;

  padding: 0.3rem 0;

  font-size:
    clamp(
      2.2rem,
      7vw,
      6rem
    );

  text-transform: uppercase;

  letter-spacing: -0.04em;

  transition:
    transform 250ms var(--ease),
    color 250ms ease,
    text-shadow 250ms ease;
}


.menu-nav a span {
  font-size: 0.65rem;

  color: var(--gold);

  letter-spacing: 0.12em;
}


.menu-nav a:hover {
  color: var(--gold);

  transform:
    translateX(1rem);
}


.menu-separator {
  width: 100%;
  height: 1px;

  margin: 2rem 0;

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


.menu-virtual-link:hover {
  color: white !important;

  text-shadow:
    0 0 12px var(--cyan),
    0 0 25px var(--magenta);
}


/* =========================================================
   GOLD HEADINGS
========================================================= */

.gold-heading {
  position: relative;

  display: inline-block;

  margin:
    0 0 2rem;

  color: var(--gold);

  background:
    linear-gradient(
      110deg,
      var(--gold-dark) 0%,
      var(--gold) 25%,
      var(--gold-light) 45%,
      #fff4c7 50%,
      var(--gold-light) 55%,
      var(--gold) 75%,
      var(--gold-dark) 100%
    );

  background-size: 250% 100%;

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

  -webkit-text-fill-color: transparent;

  animation:
    gold-shimmer
    8s linear
    infinite;
}


@keyframes gold-shimmer {

  0% {
    background-position: 160% 0;
  }

  40% {
    background-position: -60% 0;
  }

  100% {
    background-position: -60% 0;
  }

}


/* =========================================================
   GENERAL TYPE
========================================================= */

h1,
h2 {
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: -0.05em;

  line-height: 0.9;
}


h1 {
  font-size:
    clamp(
      3.5rem,
      8vw,
      8.5rem
    );
}


h2 {
  font-size:
    clamp(
      3rem,
      7vw,
      7rem
    );
}


p {
  line-height: 1.7;
}


.section-marker,
.eyebrow {
  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  opacity: 0.65;
}


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

.hero {
  position: relative;

  width: 100%;
  height: 100svh;

  min-height: 600px;

  overflow: hidden;

  background: white;
}


.hero-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.hero-video-mobile {
  display: none;
}


.hero-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.14)
    );
}


.hero-content {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  padding: 5vw;

  display: flex;
  flex-direction: column;

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

  text-align: center;
}


.hero-logo {
  width:
    min(
      440px,
      60vw
    );

  max-height: 30vh;

  object-fit: contain;

  margin-bottom: 2rem;
}


.hero-tagline {
  margin: 0;

  color: #111;

  font-size:
    clamp(
      0.75rem,
      1.2vw,
      1rem
    );

  text-transform: uppercase;

  letter-spacing: 0.22em;
}


.scroll-indicator {
  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 30px;

  transform:
    translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;

  color: #111;

  font-size: 0.65rem;

  text-transform: uppercase;

  letter-spacing: 0.18em;
}


.scroll-line {
  width: 1px;
  height: 40px;

  background:
    linear-gradient(
      to bottom,
      currentColor,
      transparent
    );
}


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

.intro-section {
  min-height: 95vh;

  padding: 12vw 8vw;

  display: grid;

  grid-template-columns:
    1fr
    5fr;

  gap: 6vw;
}


.intro-content {
  max-width: 1200px;
}


.intro-copy {
  max-width: 700px;

  font-size:
    clamp(
      1.1rem,
      2vw,
      1.5rem
    );
}


/* =========================================================
   HOMEPAGE FEATURES
========================================================= */

.feature-section {
  min-height: 100vh;

  padding: 10vw 8vw;

  display: grid;

  grid-template-columns:
    minmax(300px, 0.85fr)
    minmax(300px, 1fr);

  gap: 9vw;

  align-items: center;
}


.feature-reverse
.feature-image-link {
  order: 2;
}


.feature-reverse
.feature-copy {
  order: 1;
}


.feature-image-link {
  position: relative;

  width: 100%;

  overflow: hidden;

  border:
    1px solid
    rgba(200, 168, 93, 0.25);

  transition:
    transform 500ms var(--ease),
    border-color 500ms ease,
    box-shadow 500ms ease;
}


.feature-image-link:hover {
  transform:
    scale(1.025);

  border-color:
    rgba(230, 199, 116, 0.75);

  box-shadow:
    0 0 18px
    rgba(200, 168, 93, 0.2),

    0 0 50px
    rgba(200, 168, 93, 0.08);
}


.feature-image {
  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  transition:
    transform 700ms var(--ease);
}


.feature-image-link:hover
.feature-image {
  transform:
    scale(1.03);
}


.feature-image-overlay {
  position: absolute;

  left: 1.5rem;
  bottom: 1.5rem;

  padding:
    0.6rem
    0.8rem;

  background:
    rgba(0, 0, 0, 0.72);

  color: white;

  font-size: 0.65rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  opacity: 0;

  transform:
    translateY(8px);

  transition:
    opacity 300ms ease,
    transform 300ms ease;
}


.feature-image-link:hover
.feature-image-overlay {
  opacity: 1;

  transform:
    translateY(0);
}


.feature-copy {
  max-width: 560px;
}


.feature-copy p {
  max-width: 480px;
}


.text-link {
  display: inline-block;

  margin-top: 2rem;

  padding-bottom: 0.45rem;

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

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  transition:
    color 250ms ease,
    text-shadow 250ms ease;
}


.text-link:hover {
  color: var(--gold);

  text-shadow:
    0 0 12px
    rgba(200, 168, 93, 0.4);
}


/* =========================================================
   BB VIRTUAL HOMEPAGE
========================================================= */

.virtual-section {
  position: relative;

  min-height: 100vh;

  padding: 10vw 8vw;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(300px, 0.8fr)
    minmax(300px, 1fr);

  gap: 8vw;

  align-items: center;

  background: #05030a;

  color: white;
}


.virtual-light {
  position: absolute;

  width: 50vw;
  height: 50vw;

  border-radius: 50%;

  filter:
    blur(120px);

  opacity: 0.18;

  pointer-events: none;
}


.virtual-light-one {
  left: -15vw;
  top: 10%;

  background: var(--cyan);
}


.virtual-light-two {
  right: -15vw;
  bottom: -10%;

  background: var(--magenta);
}


.virtual-copy,
.virtual-image-link {
  position: relative;

  z-index: 2;
}


.virtual-eyebrow {
  color: var(--cyan);

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;
}


.virtual-heading {
  margin:
    0 0 2rem;

  background:
    linear-gradient(
      110deg,
      var(--cyan),
      white,
      var(--magenta),
      var(--purple),
      var(--cyan)
    );

  background-size: 280% 100%;

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

  -webkit-text-fill-color: transparent;

  animation:
    virtual-shimmer
    6s linear
    infinite;
}


@keyframes virtual-shimmer {

  0% {
    background-position: 180% 0;
  }

  100% {
    background-position: -100% 0;
  }

}


.virtual-link {
  display: inline-block;

  margin-top: 2rem;

  padding-bottom: 0.4rem;

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

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;
}


.virtual-image-link {
  position: relative;

  display: block;

  overflow: hidden;

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

  transition:
    transform 500ms var(--ease),
    box-shadow 500ms ease,
    border-color 500ms ease;
}


.virtual-image-link:hover {
  transform:
    scale(1.025);

  border-color:
    rgba(255, 47, 209, 0.9);

  box-shadow:
    0 0 18px
    rgba(255, 47, 209, 0.35),

    0 0 45px
    rgba(0, 234, 255, 0.15);
}


.virtual-image {
  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  transition:
    transform 700ms var(--ease);
}


.virtual-image-link:hover
.virtual-image {
  transform:
    scale(1.03);
}


.virtual-image-overlay {
  position: absolute;

  right: 1.5rem;
  bottom: 1.5rem;

  z-index: 3;

  padding:
    0.65rem
    0.9rem;

  border:
    1px solid
    rgba(255, 47, 209, 0.55);

  background:
    rgba(3, 2, 10, 0.82);

  color: white;

  font-size: 0.65rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  white-space: nowrap;

  opacity: 0;

  transform:
    translateY(8px);

  backdrop-filter:
    blur(10px);

  transition:
    opacity 300ms ease,
    transform 300ms ease;
}


.virtual-image-link:hover
.virtual-image-overlay {
  opacity: 1;

  transform:
    translateY(0);
}


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

.contact-section {
  min-height: 85vh;

  padding: 10vw 8vw;

  background: var(--near-black);

  color: white;

  display: flex;
  flex-direction: column;

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

  text-align: center;
}


.contact-button {
  display: inline-block;

  margin-top: 3rem;

  padding:
    1.15rem
    2rem;

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

  color: white;

  background: transparent;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

  transition:
    background 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease;
}


.contact-button:hover {
  background: var(--gold);

  color: black;

  box-shadow:
    0 0 28px
    rgba(200, 168, 93, 0.25);
}


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

.site-footer {
  padding:
    7vw
    8vw
    2.5rem;

  background: #030303;

  color: white;
}


.footer-main {
  display: grid;

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

  gap: 5vw;

  padding-bottom: 5rem;
}


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


.footer-logo {
  width: 70px;

  margin-bottom: 2rem;
}


.footer-brand p {
  opacity: 0.6;
}


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

  gap: 0.8rem;
}


.footer-column h3 {
  margin:
    0 0 0.7rem;

  color: var(--gold);

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}


.footer-column a {
  font-size: 0.85rem;

  opacity: 0.65;
}


.footer-column a:hover {
  color: var(--gold);

  opacity: 1;
}


.footer-bottom {
  padding-top: 2rem;

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

  display: flex;

  justify-content: space-between;

  gap: 2rem;

  font-size: 0.7rem;

  opacity: 0.45;
}


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

.projects-page {
  --page-lightness: 246;

  background: var(--white);

  color: var(--black);
}


.projects-intro {
  min-height: 72vh;

  padding:
    180px
    8vw
    100px;

  display: flex;
  flex-direction: column;

  justify-content: flex-end;
}


.projects-intro-copy {
  max-width: 620px;

  margin: 0;

  font-size:
    clamp(
      1.1rem,
      2vw,
      1.45rem
    );
}


.projects-list {
  padding:
    0
    8vw
    10vw;
}


.project-entry {
  border-top:
    1px solid
    rgba(0, 0, 0, 0.16);
}


.project-entry:last-child {
  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.16);
}


.project-summary {
  padding:
    4rem
    0;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 3rem;

  align-items: center;

  cursor: pointer;

  list-style: none;
}


.project-summary::-webkit-details-marker {
  display: none;
}


.project-number {
  margin:
    0
    0
    1rem;

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  opacity: 0.55;
}


.project-title {
  margin-bottom: 1.4rem;
}


.project-short-description {
  max-width: 720px;

  margin: 0;
}


.project-expand-icon {
  position: relative;

  width: 34px;
  height: 34px;
}


.project-expand-icon span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 26px;
  height: 1px;

  background: var(--gold);

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


.project-expand-icon span:nth-child(2) {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


.project-details[open]
.project-expand-icon span:nth-child(2) {
  opacity: 0;
}


.project-cover-wrap {
  overflow: hidden;

  border:
    1px solid
    rgba(200, 168, 93, 0.28);
}


.project-cover {
  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;
}


.project-expanded-content {
  padding:
    4rem
    0
    6rem;

  display: grid;

  grid-template-columns:
    1.15fr
    0.65fr;

  column-gap: 8vw;
  row-gap: 3rem;
}


.project-meta-row {
  display: grid;

  grid-template-columns:
    120px
    1fr;

  gap: 1rem;

  padding:
    0.95rem
    0;

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


.project-meta dt {
  color: var(--gold);

  font-size: 0.67rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;
}


.project-meta dd {
  margin: 0;
}


.project-actions {
  grid-column:
    1 / -1;

  display: flex;
  flex-wrap: wrap;

  gap: 1rem;
}


.project-button {
  border:
    1px solid var(--gold);

  background: transparent;

  padding:
    1rem
    1.4rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-size: 0.72rem;

  cursor: pointer;
}


.project-button:hover {
  background: var(--gold);

  color: black;
}


.project-video-container {
  grid-column:
    1 / -1;
}


.project-video-container[hidden] {
  display: none;
}


.project-video-frame {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  background: black;
}


.project-video-frame iframe {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}


.projects-contact {
  min-height: 70vh;

  padding:
    10vw
    8vw;

  display: flex;
  flex-direction: column;

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

  text-align: center;

  background: var(--near-black);

  color: white;
}


/* =========================================================
   ORIGINALS PAGE
========================================================= */

.originals-page {
  --page-lightness: 246;

  background: var(--white);

  color: var(--black);
}


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

.originals-hero {
  position: relative;

  min-height: 88vh;

  padding:
    180px
    8vw
    100px;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 78% 38%,
      rgba(200, 168, 93, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(255, 255, 255, 0.025),
      transparent 35%
    ),
    #0b0b0b;

  color: var(--white);
}


.originals-hero-inner {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 1500px;

  margin: 0 auto;

  display: grid;

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

  gap: 8vw;

  align-items: center;
}


.originals-hero-copy-block {
  max-width: 820px;
}


.originals-hero-copy {
  max-width: 760px;

  margin:
    0
    0
    1rem;

  font-size:
    clamp(
      1.4rem,
      2.5vw,
      2.2rem
    );

  line-height: 1.35;
}


.originals-hero-secondary {
  max-width: 680px;

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


.originals-hero .section-marker {
  color:
    rgba(255, 255, 255, 0.6);
}


.originals-hero .text-link {
  color: var(--white);
}


.originals-hero .text-link:hover {
  color: var(--gold);
}


.originals-hero-logo-wrap {
  position: relative;

  display: flex;

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

  min-height: 360px;
}


.originals-hero-logo-wrap::before {
  content: "";

  position: absolute;

  width: 70%;
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    rgba(200, 168, 93, 0.07);

  filter:
    blur(70px);

  pointer-events: none;
}


.originals-hero-logo {
  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      480px
    );

  max-height: 440px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 0 24px
      rgba(200, 168, 93, 0.12)
    );
}


/* =========================================================
   SERVICE CATEGORY
========================================================= */

.service-category {
  padding:
    9vw
    8vw
    11vw;

  background: var(--white);

  color: var(--black);
}


.service-category-dark {
  background: #101010;

  color: white;
}


.service-category-heading {
  max-width: 1000px;

  margin-bottom: 5rem;
}


.service-category-heading p:last-child {
  max-width: 620px;

  font-size: 1.1rem;
}


/* =========================================================
   SERVICE SELECTOR
========================================================= */

.service-selector {
  width: 100%;

  border:
    1px solid
    rgba(200, 168, 93, 0.28);

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

  box-shadow:
    0 0 40px
    rgba(200, 168, 93, 0.04);
}


.service-category-dark
.service-selector {
  background:
    rgba(255, 255, 255, 0.015);
}


.service-choice-grid {
  display: grid;

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

  align-items: stretch;
}


.service-choice {
  appearance: none;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;

  overflow: hidden;
}


.service-choice + .service-choice {
  border-left:
    1px solid
    rgba(200, 168, 93, 0.25);
}


.service-choice-image-wrap {
  width: 100%;

  overflow: hidden;

  aspect-ratio: 4 / 5;
}


.service-choice-image {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 650ms var(--ease),
    filter 650ms ease;
}


.service-choice:hover
.service-choice-image {
  transform:
    scale(1.035);

  filter:
    brightness(1.05);
}


.service-choice-copy {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding:
    2.5rem
    2.75rem
    3rem;

  border-top:
    1px solid
    rgba(200, 168, 93, 0.25);
}


.service-index {
  margin:
    0
    0
    1.5rem;

  color: var(--gold);

  font-size: 0.67rem;

  letter-spacing: 0.15em;
}


.service-choice h3 {
  margin:
    0
    0
    0.75rem;

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

  font-weight: 500;

  line-height: 0.95;

  text-transform: uppercase;

  letter-spacing: -0.05em;
}


.service-price {
  margin:
    0
    0
    1.5rem;

  color: var(--gold);

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.13em;
}


.service-description {
  max-width: 480px;

  opacity: 0.72;
}


.service-explore {
  display: flex;

  justify-content: space-between;

  margin-top: auto;

  padding-top: 1.25rem;

  border-top:
    1px solid
    rgba(127, 127, 127, 0.2);

  color: var(--gold);

  text-transform: uppercase;

  letter-spacing: 0.13em;

  font-size: 0.7rem;
}


/* =========================================================
   SERVICE DETAIL
========================================================= */

.service-detail-panel {
  display: none;

  height:
    min(
      80vh,
      900px
    );

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    var(--gold)
    transparent;
}


.service-detail-panel.is-active {
  display: block;
}


.service-selector.is-open
.service-choice-grid {
  display: none;
}


.service-detail-topbar {
  position: sticky;

  top: 0;

  z-index: 5;

  min-height: 70px;

  padding:
    0
    2.5rem;

  display: flex;

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

  border-bottom:
    1px solid
    rgba(200, 168, 93, 0.22);

  background:
    rgba(246, 246, 243, 0.96);
}


.service-category-dark
.service-detail-topbar {
  background:
    rgba(16, 16, 16, 0.96);
}


.service-detail-topbar span {
  color: var(--gold);

  font-size: 0.65rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.service-detail-back {
  border: 0;

  padding: 0;

  background: transparent;

  color: inherit;

  cursor: pointer;

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;
}


.service-detail-inner {
  padding:
    4rem
    4rem
    5rem;

  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.75fr);

  gap: 6vw;

  align-items: start;
}


.service-detail-content {
  max-width: 760px;
}


.service-detail-eyebrow {
  color: var(--gold);

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}


.service-detail-content
.gold-heading {
  font-size:
    clamp(
      3rem,
      6vw,
      6rem
    );
}


.service-detail-price {
  margin-top: -0.75rem;

  margin-bottom: 2.5rem;

  color: var(--gold);

  font-size: 0.78rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.service-detail-lead {
  max-width: 680px;

  margin-bottom: 4rem;

  font-size:
    clamp(
      1.25rem,
      2vw,
      1.75rem
    );

  line-height: 1.4;
}


.service-detail-section {
  padding:
    2rem
    0;

  border-top:
    1px solid
    rgba(127, 127, 127, 0.2);
}


.service-detail-section h4 {
  margin:
    0
    0
    1rem;

  color: var(--gold);

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.15em;
}


.service-list {
  margin:
    1.5rem
    0
    0;

  padding: 0;

  list-style: none;
}


.service-list li {
  padding:
    0.8rem
    0;

  border-bottom:
    1px solid
    rgba(127, 127, 127, 0.14);
}


.service-list li::before {
  content: "—";

  margin-right: 0.9rem;

  color: var(--gold);
}


.service-option {
  display: flex;

  justify-content: space-between;

  gap: 2rem;

  padding:
    1rem
    0;

  border-bottom:
    1px solid
    rgba(127, 127, 127, 0.14);
}


.service-option strong {
  color: var(--gold);

  font-weight: 500;
}


.service-detail-visual {
  position: sticky;

  top: 100px;
}


.service-detail-visual img {
  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  border:
    1px solid
    rgba(200, 168, 93, 0.42);
}


.service-detail-cta {
  margin-top: 3rem;

  padding-top: 3rem;

  border-top:
    1px solid
    rgba(200, 168, 93, 0.35);
}


.service-cta-button {
  display: inline-block;

  padding:
    1.1rem
    1.5rem;

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

  text-transform: uppercase;

  letter-spacing: 0.13em;

  font-size: 0.7rem;
}


.service-cta-button:hover {
  background: var(--gold);

  color: black;
}


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

.originals-section-heading {
  max-width: 1000px;

  margin-bottom: 5rem;
}


.originals-process {
  padding:
    10vw
    8vw;

  background: var(--white);

  color: var(--black);
}


.process-grid {
  display: grid;

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

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

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


.process-step {
  min-height: 330px;

  padding:
    2.5rem
    2rem;
}


.process-step + .process-step {
  border-left:
    1px solid
    rgba(0, 0, 0, 0.16);
}


.process-number {
  display: block;

  margin-bottom: 4rem;

  color: var(--gold);

  font-size: 0.68rem;

  letter-spacing: 0.15em;
}


.process-step h3 {
  margin:
    0
    0
    1.5rem;

  font-size:
    clamp(
      1.8rem,
      3vw,
      3rem
    );

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: -0.04em;
}


.process-step p {
  opacity: 0.72;
}


.process-timeline {
  max-width: 780px;

  margin:
    3rem
    0
    0;

  font-size: 0.9rem;

  opacity: 0.65;
}


/* =========================================================
   OWNERSHIP & DELIVERY
========================================================= */

.ownership-section {
  padding:
    10vw
    8vw;

  background: #111;

  color: white;
}


.ownership-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  border-top:
    1px solid
    rgba(200, 168, 93, 0.3);

  border-left:
    1px solid
    rgba(200, 168, 93, 0.3);
}


.ownership-item {
  min-height: 360px;

  padding:
    3rem;

  border-right:
    1px solid
    rgba(200, 168, 93, 0.3);

  border-bottom:
    1px solid
    rgba(200, 168, 93, 0.3);
}


.ownership-number {
  display: block;

  margin-bottom: 4rem;

  color: var(--gold);

  font-size: 0.67rem;

  letter-spacing: 0.15em;
}


.ownership-item h3 {
  margin:
    0
    0
    1.5rem;

  color: var(--gold);

  font-size:
    clamp(
      1.8rem,
      3vw,
      3.2rem
    );

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: -0.04em;
}


.ownership-item p {
  max-width: 620px;

  opacity: 0.72;
}


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

.originals-contact {
  min-height: 75vh;

  padding:
    10vw
    8vw;

  display: flex;
  flex-direction: column;

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

  background: var(--near-black);

  color: white;

  text-align: center;
}


/* =========================================================
   STORES PAGE
========================================================= */

.stores-page {
  --page-lightness: 246;

  background: var(--white);

  color: var(--black);
}


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

.stores-intro {
  min-height: 58vh;

  padding:
    180px
    8vw
    80px;

  display: flex;
  align-items: flex-end;

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(200, 168, 93, 0.07),
      transparent 30%
    ),
    var(--white);
}


.stores-intro-inner {
  width: 100%;

  max-width: 1100px;
}


.stores-intro-copy {
  max-width: 720px;

  margin: 0;

  font-size:
    clamp(
      1.15rem,
      2vw,
      1.6rem
    );
}


/* =========================================================
   STORE GRID
========================================================= */

.stores-grid-section {
  padding:
    0
    8vw
    9vw;
}


.stores-grid {
  display: grid;

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

  gap: 2rem;
}


.store-card {
  position: relative;

  display: block;

  aspect-ratio: 4 / 5;

  overflow: hidden;

  background: #111;

  border:
    1px solid
    rgba(200, 168, 93, 0.28);

  box-shadow:
    0 0 0
    rgba(200, 168, 93, 0);

  transition:
    transform 450ms var(--ease),
    border-color 450ms ease,
    box-shadow 450ms ease;
}


.store-card:hover {
  transform:
    translateY(-6px)
    scale(1.015);

  border-color:
    rgba(240, 217, 145, 0.78);

  box-shadow:
    0 0 20px
    rgba(200, 168, 93, 0.18),

    0 0 50px
    rgba(200, 168, 93, 0.08);
}


.store-card-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 700ms var(--ease),
    filter 500ms ease;
}


.store-card:hover
.store-card-image {
  transform:
    scale(1.045);

  filter:
    brightness(1.04);
}


.store-card-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.03) 30%,
      rgba(0, 0, 0, 0.18) 55%,
      rgba(0, 0, 0, 0.84) 100%
    );

  transition:
    background 400ms ease;
}


.store-card:hover
.store-card-shade {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.01) 25%,
      rgba(0, 0, 0, 0.14) 52%,
      rgba(0, 0, 0, 0.9) 100%
    );
}


.store-card-content {
  position: absolute;

  inset: 0;

  z-index: 3;

  padding: 1.6rem;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  color: white;
}


.store-card-index {
  font-size: 0.65rem;

  letter-spacing: 0.16em;

  color: var(--gold);
}


.store-card-bottom {
  display: flex;
  flex-direction: column;

  gap: 1rem;
}


.store-card h2 {
  margin: 0;

  font-size:
    clamp(
      2rem,
      3.4vw,
      3.8rem
    );

  line-height: 0.95;

  text-transform: uppercase;

  letter-spacing: -0.045em;
}


.store-card-link {
  width: 100%;

  padding-top: 1rem;

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

  color: var(--gold-light);

  font-size: 0.67rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  opacity: 0.82;

  transform:
    translateY(4px);

  transition:
    opacity 250ms ease,
    transform 250ms ease;
}


.store-card:hover
.store-card-link {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   STORES NOTICE
========================================================= */

.stores-notice {
  padding:
    0
    8vw
    10vw;

  background: var(--white);

  color: var(--black);
}


.stores-notice-inner {
  max-width: 820px;

  padding-top: 2rem;

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


.stores-notice-inner p:last-child {
  margin-bottom: 0;

  opacity: 0.64;

  font-size: 0.88rem;
}

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

.contact-page {
  --page-lightness: 246;

  background: var(--white);

  color: var(--black);
}


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

.contact-hero {
  min-height: 72vh;

  padding:
    180px
    8vw
    100px;

  display: flex;

  align-items: flex-end;

  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(200, 168, 93, 0.08),
      transparent 32%
    ),
    var(--white);
}


.contact-hero-inner {
  width: 100%;

  max-width: 1100px;
}


.contact-hero-copy {
  max-width: 760px;

  margin:
    0
    0
    1rem;

  font-size:
    clamp(
      1.4rem,
      2.5vw,
      2.2rem
    );

  line-height: 1.35;
}


.contact-hero-secondary {
  max-width: 620px;

  opacity: 0.62;
}


/* =========================================================
   EMAIL
========================================================= */

.contact-email-section {
  padding:
    9vw
    8vw;

  background: #101010;

  color: white;
}


.contact-email-grid {
  display: grid;

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

  gap: 8vw;

  align-items: start;
}


.contact-email-heading {
  max-width: 600px;
}


.contact-email-content {
  max-width: 800px;
}


.contact-email-content > p {
  max-width: 620px;

  margin-top: 0;

  opacity: 0.7;

  font-size:
    clamp(
      1rem,
      1.5vw,
      1.2rem
    );
}


.contact-email-link {
  margin-top: 3rem;

  padding:
    1.5rem
    0;

  display: flex;

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

  gap: 2rem;

  border-top:
    1px solid
    rgba(200, 168, 93, 0.4);

  border-bottom:
    1px solid
    rgba(200, 168, 93, 0.4);

  color: var(--gold-light);

  font-size:
    clamp(
      1.15rem,
      2.4vw,
      2rem
    );

  transition:
    color 250ms ease,
    padding-left 300ms var(--ease),
    padding-right 300ms var(--ease),
    text-shadow 250ms ease;
}


.contact-email-link:hover {
  padding-left: 0.75rem;
  padding-right: 0.75rem;

  color: white;

  text-shadow:
    0 0 18px
    rgba(200, 168, 93, 0.35);
}


/* =========================================================
   SOCIALS
========================================================= */

.socials-section {
  padding:
    10vw
    8vw;

  background: var(--white);

  color: var(--black);
}


.socials-heading {
  max-width: 950px;

  margin-bottom: 5rem;
}


.socials-heading p:last-child {
  max-width: 620px;
}


.social-link-grid {
  display: grid;

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

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

  border-left:
    1px solid
    rgba(0, 0, 0, 0.16);
}


.social-link {
  min-height: 170px;

  padding:
    2rem
    2.25rem;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  grid-template-rows:
    auto
    1fr;

  gap:
    1.5rem
    2rem;

  align-items: start;

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

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

  transition:
    background 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease;
}


.social-link:hover {
  background: #101010;

  color: white;

  box-shadow:
    inset 0 0 0 1px
    rgba(200, 168, 93, 0.45);
}


.social-index {
  grid-column: 1;

  color: var(--gold);

  font-size: 0.65rem;

  letter-spacing: 0.15em;
}


.social-name {
  grid-column:
    1 / 3;

  align-self: end;

  font-size:
    clamp(
      1.8rem,
      3.2vw,
      3.6rem
    );

  line-height: 0.95;

  text-transform: uppercase;

  letter-spacing: -0.045em;
}


.social-arrow {
  grid-column: 3;

  grid-row:
    1 / 3;

  align-self: center;

  color: var(--gold);

  font-size: 1.4rem;

  transition:
    transform 300ms var(--ease);
}


.social-link:hover
.social-arrow {
  transform:
    translate(
      4px,
      -4px
    );
}


.social-meta {
  grid-column:
    2 / 3;

  align-self: end;

  justify-self: end;

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  opacity: 0.55;
}


.social-link-wide {
  grid-column:
    1 / -1;
}

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

@media (max-width: 800px) {

  :root {
    --header-height: 72px;
  }


  .site-header {
    padding:
      0
      22px;
  }


  .desktop-nav {
    display: none;
  }


  .hero-video-desktop {
    display: none;
  }


  .hero-video-mobile {
    display: block;
  }


  .intro-section,
  .feature-section,
  .virtual-section {
    grid-template-columns: 1fr;
  }


  .feature-section {
    min-height: auto;

    padding:
      85px
      24px;
  }


  .feature-copy {
    order: 1 !important;
  }


  .feature-image-link {
    order: 2 !important;
  }


  .feature-image,
  .virtual-image {
    aspect-ratio: 16 / 9;
  }


  .feature-image-overlay {
    opacity: 1;

    transform: none;

    left: 1rem;
    bottom: 1rem;
  }


  .virtual-image-overlay {
    right: 1rem;
    bottom: 1rem;

    opacity: 1;

    transform: none;
  }


  .site-footer {
    padding:
      80px
      24px
      30px;
  }


  .footer-main {
    grid-template-columns:
      1fr
      1fr;
  }


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


  .footer-bottom {
    flex-direction: column;
  }


  .menu-overlay {
    padding:
      100px
      24px
      50px;
  }


  /* PROJECTS */

  .projects-intro {
    min-height: 60vh;

    padding:
      140px
      24px
      70px;
  }


  .projects-list {
    padding:
      0
      24px
      90px;
  }


  .project-expanded-content {
    grid-template-columns: 1fr;
  }


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


  .project-button {
    width: 100%;
  }


  /* ORIGINALS */

  .originals-hero {
    min-height: 100svh;

    padding:
      120px
      24px
      70px;

    align-items: center;
  }


  .originals-hero-inner {
    grid-template-columns: 1fr;

    gap: 3.5rem;
  }


  .originals-hero-logo-wrap {
    min-height: 0;
  }


  .originals-hero-logo {
    width:
      min(
        68vw,
        300px
      );

    max-height: 240px;
  }


  .service-category,
  .originals-process,
  .ownership-section {
    padding:
      90px
      24px;
  }


  .service-choice-grid {
    grid-template-columns: 1fr;
  }


  .service-choice + .service-choice {
    border-left: 0;

    border-top:
      1px solid
      rgba(200, 168, 93, 0.25);
  }


  .service-choice-image-wrap {
    aspect-ratio: 16 / 9;
  }


  .service-detail-panel {
    height: auto;

    overflow: visible;
  }


  .service-detail-inner {
    padding:
      2.5rem
      1.5rem
      4rem;

    grid-template-columns: 1fr;
  }


  .service-detail-visual {
    position: static;

    order: -1;
  }


  .service-detail-visual img {
    aspect-ratio: 16 / 9;
  }


  .process-grid {
    grid-template-columns: 1fr;
  }


  .process-step + .process-step {
    border-left: 0;

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


  .ownership-grid {
    grid-template-columns: 1fr;
  }


  /* STORES */

  .stores-intro {
    min-height: 48vh;

    padding:
      140px
      24px
      60px;
  }


  .stores-grid-section {
    padding:
      0
      24px
      80px;
  }


  .stores-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 14px;
  }


  .store-card-content {
    padding: 1rem;
  }


  .store-card h2 {
    font-size:
      clamp(
        1.35rem,
        6vw,
        2.2rem
      );
  }


  .store-card-link {
    font-size: 0.58rem;
  }


  .stores-notice {
    padding:
      0
      24px
      90px;
  }

  /* CONTACT */

.contact-hero {
  min-height: 62vh;

  padding:
    140px
    24px
    70px;
}


.contact-email-section,
.socials-section {
  padding:
    90px
    24px;
}


.contact-email-grid {
  grid-template-columns: 1fr;

  gap: 3rem;
}


.contact-email-link {
  font-size:
    clamp(
      1rem,
      5vw,
      1.4rem
    );

  word-break: break-word;
}


.socials-heading {
  margin-bottom: 3rem;
}


.social-link-grid {
  grid-template-columns: 1fr;
}


.social-link-wide {
  grid-column: auto;
}


.social-link {
  min-height: 140px;

  padding:
    1.5rem;
}

}


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

@media (max-width: 480px) {

  .stores-grid {
    grid-template-columns: 1fr;
  }


  .store-card {
    aspect-ratio: 4 / 5;
  }


  .store-card h2 {
    font-size:
      clamp(
        2rem,
        11vw,
        3rem
      );
  }

}


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

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

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;
  }

}
/* Service panel positioning and scroll guidance */
.service-selector {
  position: relative;
  scroll-margin-top: calc(var(--header-height) + 16px);
  overflow-anchor: none;
}

.service-scroll-cue {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border: 1px solid var(--gold);
  border-radius: 24px;
  background: var(--near-black);
  color: var(--gold-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.service-scroll-cue::after {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.service-scroll-cue:hover {
  background: #252015;
}

.service-scroll-cue:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

.service-scroll-cue[hidden] {
  display: none;
}

@media (min-width: 801px) {
  .service-detail-panel {
    height: min(80vh, 900px, calc(100svh - var(--header-height) - 32px));
    scrollbar-width: auto;
  }
}

@media (max-width: 800px) {
  .service-scroll-cue {
    display: none;
  }
  .service-detail-topbar {
    top: var(--header-height);
  }
}

/* Contact destinations remain visible below the fixed navigation. */
#email,
#get-in-touch {
  scroll-margin-top: calc(var(--header-height) + 24px);
}