@import url('https://fonts.googleapis.com/css2?family=Helvetica+Now+Display:wght@700&display=swap');

@font-face {
  font-family: 'Helvetica Now Display';
  font-weight: 700;
  font-style: normal;
  src: url('D:\STAR STUDIO\FONTS\HelveticaNowDisplay-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'HeliosExt';
  font-weight: 700;
  font-style: normal;
  src: url('D:\STAR STUDIO\FONTS\HeliosExt-Bold.woff2') format('woff2');
}

:root {
  --bg: #f5f4ef;
  --text: #111111;
  --muted: #858585;
  --line: #111111;
  --soft: #d8d5cb;
  --signal: #E93222;
  --signal-soft: rgba(233, 50, 34, 0.14);
  --footer-border: #c7c7c7;
  --footer-muted: #bdbdbd;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    var(--bg);
  background-size: 42px 42px;
  color: var(--text);
  font-family: 'Helvetica Now Display', Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: -0.035em;
}

a,
button {
  color: inherit;
}

a {
  text-decoration: none;
}

button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

::selection {
  background: var(--signal);
  color: #111111;
}

.star-studio-text {
  font-family: 'HeliosExt', 'Helvetica Now Display', Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #111111;
  color: var(--bg);
  animation: loaderExit 1s cubic-bezier(0.8, 0, 0.2, 1) forwards;
  animation-delay: 0.6s;
}

.page-loader span {
  font-size: clamp(34px, 8vw, 130px);
  font-weight: 800;
  letter-spacing: -0.1em;
  text-transform: uppercase;
  animation: loaderText 0.8s ease forwards;
}

.noise-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: 0.04;
  background-image:
    radial-gradient(#000 1px, transparent 1px),
    linear-gradient(120deg, transparent, rgba(0, 0, 0, 0.12), transparent);
  background-size: 4px 4px, 260px 260px;
  mix-blend-mode: multiply;
}

.cursor-dot,
.cursor-ring {
  pointer-events: none;
  position: fixed;
  z-index: 999;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--signal);
}

.cursor-ring {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(17, 17, 17, 0.45);
  transition:
    width 0.25s ease,
    height 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.cursor-ring.is-hovering {
  width: 74px;
  height: 74px;
  border-color: var(--signal);
  background: rgba(233, 50, 34, 0.08);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px clamp(18px, 4vw, 56px);
  color: white;
  mix-blend-mode: difference;
}

.mark {
  font-size: clamp(30px, 4.2vw, 72px);
  line-height: 0.8;
  font-weight: 400;
  letter-spacing: 0.34em;
}

.main-nav {
  display: flex;
  gap: 22px;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.site-header a {
  transition: opacity 0.25s ease;
}

.site-header a:hover {
  opacity: 0.48;
}

.page-section {
  position: relative;
}

.eyebrow,
.section-label {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: #111111;
  color: var(--bg);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.button-link.ghost {
  background: rgba(245, 244, 239, 0.7);
  color: #111111;
}

.button-link:hover {
  background: var(--signal);
  color: #111111;
  transform: translateY(-3px);
}

.home-cover {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(118px, 12vw, 170px) clamp(18px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 26%, var(--signal-soft), transparent 30%),
    rgba(245, 244, 239, 0.86);
}

.home-cover::before {
  content: "STAR";
  position: absolute;
  right: -0.06em;
  bottom: -0.22em;
  z-index: 0;
  color: rgba(17, 17, 17, 0.045);
  font-size: clamp(180px, 38vw, 720px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.16em;
  pointer-events: none;
}

.cover-topline {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-cover-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 220px 1fr 160px;
  gap: clamp(18px, 4vw, 56px);
  align-items: end;
  min-height: 64vh;
  padding: clamp(40px, 8vw, 120px) 0 48px;
}

.home-side-notes {
  display: grid;
  gap: 8px;
  align-self: start;
}

.home-side-notes span,
.cover-stamp span {
  display: block;
  width: fit-content;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.78);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-title {
  margin: 0;
  max-width: 1120px;
  font-size: clamp(58px, 10vw, 178px);
  line-height: 0.82;
  font-weight: 400;
  letter-spacing: -0.11em;
  text-transform: uppercase;
}

.home-intro {
  max-width: 760px;
  margin: 26px 0 0;
  font-size: clamp(22px, 3vw, 48px);
  line-height: 0.98;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.cover-stamp {
  position: relative;
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: clamp(110px, 12vw, 178px);
  height: clamp(110px, 12vw, 178px);
  border: 1px solid var(--line);
  border-radius: 50%;
  animation: slowSpin 18s linear infinite;
}

.cover-stamp strong {
  font-size: clamp(44px, 5vw, 86px);
  line-height: 0.78;
  letter-spacing: -0.1em;
}

.ticker,
.contact-marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #111111;
  color: var(--bg);
}

.ticker {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerMove 18s linear infinite;
}

.ticker-track span {
  padding: 12px 0;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.manifesto-section,
.services-section,
.home-feature,
.project-archive,
.editorial-spread {
  padding: clamp(52px, 8vw, 120px) clamp(18px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(28px, 6vw, 100px);
  align-items: start;
}

.manifesto-grid h2,
.feature-copy h2,
.spread-heading h2 {
  margin: 0;
  font-size: clamp(48px, 8vw, 138px);
  line-height: 0.84;
  font-weight: 400;
  letter-spacing: -0.1em;
  text-transform: uppercase;
}

.manifesto-copy p,
.feature-copy p {
  margin: 0 0 22px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.08;
}

.service-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.service-card {
  min-height: 340px;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.74);
  transition:
    background 0.25s ease,
    transform 0.35s ease;
}

.service-card:hover {
  background: var(--signal-soft);
}

.service-card span {
  display: block;
  margin-bottom: 90px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.service-card h3 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 48px);
  line-height: 0.88;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.service-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.1;
}

.home-feature {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 22px;
  align-items: stretch;
}

.feature-image {
  min-height: 70vh;
}

.feature-copy {
  display: grid;
  align-content: end;
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.74);
}

.works-intro {
  min-height: 78vh;
  display: grid;
  align-content: end;
  padding: clamp(118px, 12vw, 170px) clamp(18px, 4vw, 56px) 52px;
  border-bottom: 1px solid var(--line);
}

.works-intro h1 {
  margin: 0;
  font-size: clamp(92px, 20vw, 320px);
  line-height: 0.75;
  font-weight: 400;
  letter-spacing: -0.14em;
  text-transform: uppercase;
}

.works-intro p:not(.eyebrow) {
  max-width: 720px;
  margin: 24px 0 0 auto;
  font-size: clamp(22px, 3vw, 42px);
  line-height: 1;
}

.works-stage {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.74);
}

.work-slide {
  pointer-events: none;
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transform: scale(1.015);
  transition:
    opacity 0.55s ease,
    transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0.55s ease;
}

.work-slide.active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.image,
.feature-image,
.editorial-image,
.project-image,
.about-image,
.mood-item {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.15)),
    var(--soft);
  color: rgba(0, 0, 0, 0.42);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  will-change: transform, filter, clip-path;
}

.image {
  position: absolute;
}

.image::after,
.editorial-image::after,
.project-image::after,
.about-image::after,
.mood-item::after,
.feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 92, 26, 0);
  mix-blend-mode: multiply;
  transition: background 0.35s ease;
}

.image:hover::after,
.editorial-card:hover .editorial-image::after,
.project-image:hover::after,
.about-image:hover::after,
.mood-item:hover::after,
.feature-image:hover::after {
  background: rgba(233, 50, 34, 0.18);
}

.image-main {
  top: clamp(110px, 18vh, 180px);
  left: clamp(18px, 6vw, 96px);
  width: min(46vw, 720px);
  height: min(61vh, 620px);
  clip-path: inset(0 0 0 0);
}

.image-side {
  right: clamp(18px, 8vw, 120px);
  bottom: clamp(96px, 16vh, 160px);
  width: min(24vw, 360px);
  height: min(34vh, 340px);
}

.work-slide:hover .image-main {
  transform: translateY(-10px) scale(0.985);
  clip-path: inset(1.5% round 0);
  filter: contrast(1.08);
}

.work-slide:hover .image-side {
  transform: translateY(12px) scale(1.04);
  filter: contrast(1.1) grayscale(0.2);
}

.slide-title {
  position: absolute;
  bottom: clamp(46px, 8vh, 86px);
  left: clamp(18px, 6vw, 96px);
  z-index: 5;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: end;
  gap: 20px;
  max-width: 72vw;
}

.slide-title p {
  margin: 0 0 0.3em;
  color: var(--muted);
  font-size: 14px;
}

.slide-title h1 {
  margin: 0;
  font-size: clamp(36px, 6.3vw, 116px);
  line-height: 0.86;
  font-weight: 400;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.slide-meta {
  position: absolute;
  top: clamp(110px, 18vh, 180px);
  right: clamp(18px, 4vw, 56px);
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 360px;
}

.slide-meta span,
.project-specs span,
.external {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.72);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.slide-pullquote {
  position: absolute;
  right: clamp(18px, 5vw, 72px);
  bottom: clamp(180px, 23vh, 250px);
  z-index: 6;
  max-width: 360px;
  margin: 0;
  font-size: clamp(22px, 2.5vw, 42px);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.view-work {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(245, 244, 239, 0.78);
  font-size: 13px;
  opacity: 0;
  backdrop-filter: blur(14px);
  transform: translate(-50%, -50%) scale(0.9);
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.25s ease;
}

.work-slide:hover .view-work {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.view-work:hover {
  background: var(--signal);
  color: #111111;
}

.works-controls {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  bottom: clamp(28px, 6vh, 62px);
  z-index: 20;
  display: flex;
  gap: 12px;
}

.arrow {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(245, 244, 239, 0.75);
  font-size: 24px;
  backdrop-filter: blur(10px);
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.arrow:hover {
  background: #111111;
  color: #f5f4ef;
  transform: scale(0.92);
}

.works-index {
  position: absolute;
  top: 50%;
  right: clamp(18px, 4vw, 56px);
  z-index: 18;
  display: grid;
  gap: 7px;
  width: 220px;
  transform: translateY(-50%);
}

.index-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  color: rgba(0, 0, 0, 0.34);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.index-item:hover,
.index-item.active {
  color: #111111;
  transform: translateX(-6px);
}

.index-item span {
  color: var(--muted);
}

.spread-heading {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 6vw, 88px);
  align-items: end;
  margin-bottom: 34px;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.editorial-card {
  position: relative;
  display: block;
  min-height: 440px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.editorial-card:nth-child(1),
.editorial-card:nth-child(4),
.editorial-card:nth-child(7) {
  grid-column: span 5;
}

.editorial-card:nth-child(2),
.editorial-card:nth-child(5),
.editorial-card:nth-child(8) {
  grid-column: span 3;
  margin-top: 84px;
}

.editorial-card:nth-child(3),
.editorial-card:nth-child(6) {
  grid-column: span 4;
  margin-top: 34px;
}

.editorial-issue {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editorial-image {
  height: clamp(220px, 34vw, 460px);
  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.editorial-card:hover .editorial-image {
  transform: translateY(-10px) rotate(-1deg);
  filter: contrast(1.08);
}

.editorial-card h3 {
  margin: 14px 0 6px;
  font-size: clamp(24px, 3vw, 54px);
  line-height: 0.88;
  font-weight: 800;
  letter-spacing: -0.09em;
  text-transform: uppercase;
}

.project-year {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: -0.06em;
}

.editorial-card p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.05;
}

.editorial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
}

.meta-code,
.meta-category {
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.5);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.editorial-card:hover .meta-code,
.editorial-card:hover .meta-category {
  background: rgba(233, 50, 34, 0.08);
  border-color: var(--signal);
  color: #111111;
}

.archive-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 30px;
}

.archive-head h2 {
  margin: 0;
  font-size: clamp(46px, 8vw, 124px);
  line-height: 0.82;
  font-weight: 400;
  letter-spacing: -0.08em;
}

.archive-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 650px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.archive-actions span,
.archive-actions button {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.7);
}

.archive-actions button:hover {
  background: #111111;
  color: var(--bg);
}

.archive-table {
  border-top: 1px solid var(--line);
}

.archive-row {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1fr 0.4fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.22);
  font-size: clamp(16px, 1.7vw, 26px);
  line-height: 1;
  transition:
    padding-left 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.archive-row:hover {
  padding-left: 16px;
  background: var(--signal-soft);
  color: #000000;
}

.archive-title {
  font-weight: 800;
  letter-spacing: -0.08em;
}

.project-page,
.about-page,
.moodboard-page,
.contact-page {
  padding: clamp(120px, 12vw, 170px) clamp(18px, 4vw, 56px) clamp(36px, 6vw, 90px);
}

.project-cover {
  position: relative;
  min-height: 72vh;
  display: grid;
  align-content: end;
  padding-bottom: clamp(32px, 6vw, 74px);
  border-bottom: 1px solid var(--line);
}

.project-cover::before {
  content: "STAR";
  position: absolute;
  top: 6%;
  right: 0;
  color: rgba(17, 17, 17, 0.045);
  font-family: 'HeliosExt', 'Helvetica Now Display', Arial, Helvetica, sans-serif;
  font-size: clamp(160px, 25vw, 520px);
  line-height: 0.8;
  font-weight: 900;
  letter-spacing: -0.15em;
  pointer-events: none;
}

.project-cover-meta,
.project-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-cover-meta span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.72);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-cover h1 {
  position: relative;
  z-index: 1;
  margin: clamp(34px, 5vw, 72px) 0 12px;
  font-size: clamp(62px, 13vw, 238px);
  line-height: 0.76;
  font-weight: 400;
  letter-spacing: -0.12em;
  text-transform: uppercase;
}

.project-cover p {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 0 0 auto;
  font-size: clamp(22px, 3vw, 52px);
  line-height: 0.95;
}

.project-hero {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 6vw, 100px);
  min-height: 52vh;
  align-items: end;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}

.project-hero h2,
.about-hero h1,
.page-title h1,
.contact-hero h1 {
  margin: 0;
  font-size: clamp(48px, 8vw, 124px);
  line-height: 0.9;
  font-weight: 500;
  text-transform: uppercase;
}

.project-copy p,
.about-text p,
.about-hero p,
.page-title p,
.contact-hero p {
  margin: 0 0 22px;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.18;
}

.external {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 16px;
}

.image-stack {
  display: grid;
  gap: 22px;
  padding-top: 22px;
}

.project-image.large {
  height: 76vh;
}

.project-image.wide {
  height: 52vh;
}

.split-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.split-images .project-image {
  height: 58vh;
}

.about-hero {
  display: grid;
  align-content: end;
  max-width: 1180px;
  min-height: 50vh;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 50px;
}

.about-image {
  min-height: 78vh;
}

.about-text {
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--line);
  background: rgba(245, 244, 239, 0.74);
}

.dropcap::first-letter {
  float: left;
  margin: 0.03em 0.08em 0 0;
  font-size: 5.4em;
  line-height: 0.78;
  font-weight: 900;
  letter-spacing: -0.14em;
}

.principles-section {
  padding-top: clamp(52px, 8vw, 120px);
}

.principles-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.principle {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.24);
}

.principle span {
  color: var(--muted);
}

.principle h3 {
  margin: 0;
  font-size: clamp(34px, 6vw, 104px);
  line-height: 0.86;
  font-weight: 400;
  letter-spacing: -0.09em;
  text-transform: uppercase;
}

.page-title {
  max-width: 900px;
  margin-bottom: 50px;
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 22px;
}

.mood-item.tall {
  grid-row: span 2;
}

.mood-item.wide {
  grid-column: span 2;
}

.contact-page {
  display: grid;
  align-items: end;
  min-height: 100vh;
}

.contact-hero {
  max-width: 1100px;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.contact-links a {
  padding: 14px 18px;
  border: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.contact-links a:hover {
  background: var(--signal);
}

.contact-portfolio {
  margin-top: clamp(50px, 7vw, 90px);
  margin-bottom: clamp(50px, 7vw, 90px);
  display: grid;
  gap: 42px;
  max-width: 1080px;
}

.portfolio-showcase {
  display: flex;
  justify-content: center;
}

.portfolio-card {
  position: relative;
  max-width: 480px;
  transform: rotate(-2deg);
  transition: transform 0.4s ease;
}

.portfolio-card:hover {
  transform: rotate(0deg) scale(1.02);
}

.portfolio-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.portfolio-frame {
  position: relative;
  padding: 16px;
  background: #ffffff;
  border: 2px solid #151515;
  border-radius: 8px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 16px 48px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.portfolio-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-frame img {
  transform: scale(1.05);
}

.portfolio-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  background: #ff6b35;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

.portfolio-meta {
  padding: 24px 0 0;
  text-align: center;
}

.portfolio-meta h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #151515;
}

.portfolio-meta p {
  margin: 0 0 16px;
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--muted);
  line-height: 1.5;
}

.portfolio-cta {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #151515;
  background: #151515;
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease;
}

.portfolio-cta:hover {
  background: #ffffff;
  color: #151515;
}

.contact-marquee,
.contact-marquee * {
  font-family: "HeliosExt", Helvetica, Arial, sans-serif !important;
}

.site-footer {
  padding: 14px;
  background: #eeeeee;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(28px, 4vw, 54px);
  min-height: 64px;
  padding: 0 10px;
  border: 2px solid var(--footer-border);
  background: #f7f7f7;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.footer-inner p,
.footer-inner a {
  margin: 0;
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

.footer-brand,
.footer-social {
  color: var(--footer-muted);
  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

.footer-brand {
  margin-left: 4px;
  letter-spacing: -0.04em;
}

.footer-social {
  justify-self: end;
}

.footer-brand:hover,
.footer-social:hover {
  color: #111111;
}

.reveal {
  opacity: 0;
  transform: translateY(28px) rotate(0.35deg);
  filter: blur(8px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.9s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(0);
  filter: blur(0);
}

.scramble {
  display: inline-block;
}

.tilt-card {
  transform-style: preserve-3d;
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

@keyframes tickerMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes loaderExit {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

@keyframes loaderText {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  .site-header {
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    color: #111111;
    mix-blend-mode: normal;
  }

  .main-nav {
    flex-wrap: wrap;
    gap: 14px;
  }

  .cover-topline,
  .home-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-cover-grid,
  .manifesto-grid,
  .home-feature,
  .spread-heading,
  .archive-head,
  .archive-row,
  .project-hero,
  .about-grid,
  .split-images,
  .principle {
    grid-template-columns: 1fr;
  }

  .spread-heading {
    display: none;
    margin-bottom: 48px;
  }

  .spread-heading h2 {
    font-size: clamp(48px, 12vw, 92px);
  }

  .home-intro,
  .works-intro p:not(.eyebrow),
  .project-cover p {
    margin-left: 0;
  }

  .cover-stamp {
    justify-self: start;
  }

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

  .works-stage {
    display: none;
  }

  .works-controls,
  .works-index {
    display: none;
  }

  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .editorial-card,
  .editorial-card:nth-child(1),
  .editorial-card:nth-child(2),
  .editorial-card:nth-child(3),
  .editorial-card:nth-child(4),
  .editorial-card:nth-child(5),
  .editorial-card:nth-child(6),
  .editorial-card:nth-child(7),
  .editorial-card:nth-child(8) {
    grid-column: auto;
    min-height: auto;
    margin-top: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }

  .editorial-card:last-child {
    border-bottom: none;
  }

  .editorial-image {
    height: 240px;
  }

  .editorial-meta {
    flex-direction: column;
    gap: 6px;
  }

  .meta-code,
  .meta-category {
    width: 100%;
    display: block;
    text-align: left;
  }

  .archive-actions {
    justify-content: flex-start;
  }

  .project-image.large,
  .project-image.wide,
  .split-images .project-image,
  .about-image,
  .feature-image {
    height: 54vh;
    min-height: auto;
  }

  .mood-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .mood-item.tall,
  .mood-item.wide {
    grid-row: auto;
    grid-column: auto;
  }

  .editorial-spread {
    padding: clamp(48px, 8vw, 76px) clamp(18px, 4vw, 48px);
    border-bottom: none;
  }

  .footer-inner {
    grid-template-columns: minmax(240px, 1fr) auto auto;
    grid-template-rows: auto;
    gap: 16px 24px;
    padding: 20px;
    align-items: center;
  }

  .footer-left {
    grid-column: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    min-width: 0;
  }

  .footer-left > * {
    white-space: nowrap;
  }

  .footer-left .footer-scramble {
    margin: 0 8px;
  }

  .footer-designed {
    grid-column: 2;
    justify-self: center;
    align-self: center;
  }

  .footer-social {
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.site-header {
  align-items: center;
  padding: 18px clamp(18px, 4vw, 48px);
}

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 4.8vw, 72px);
  height: clamp(42px, 4.8vw, 72px);
  letter-spacing: 0;
}

.mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
  opacity: 0.96;
}

.main-nav {
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

.cover-stamp {
  display: none;
}

.cover-logo {
  position: relative;
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: clamp(120px, 16vw, 240px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(17, 17, 17, 0.4);
  border-radius: 50%;
  background: rgba(245, 244, 239, 0.34);
  backdrop-filter: blur(8px);
  animation: slowFloat 6s ease-in-out infinite;
}

.cover-logo::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
}

.cover-logo img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: invert(1);
}

.home-cover {
  min-height: 100svh;
  padding-bottom: 76px;
}

.home-cover-grid {
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) minmax(120px, 240px);
  align-items: center;
  min-height: calc(100svh - 240px);
  padding-bottom: 86px;
}

.home-title {
  max-width: 980px;
  font-size: clamp(48px, 8.8vw, 154px);
  line-height: 0.86;
  overflow-wrap: anywhere;
}

.home-intro {
  max-width: 700px;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1.03;
}

.home-actions {
  position: relative;
  z-index: 4;
  gap: 10px;
}

.button-link {
  min-height: 42px;
  padding: 11px 15px;
}

.ticker-track span {
  font-size: clamp(16px, 1.7vw, 25px);
}

.ticker {
  z-index: 3;
}

.manifesto-grid h2,
.feature-copy h2,
.spread-heading h2 {
  font-size: clamp(44px, 7vw, 118px);
  line-height: 0.88;
}

.service-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-card {
  min-height: 300px;
}

.service-card span {
  margin-bottom: clamp(42px, 7vw, 90px);
}

.home-feature {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.feature-copy {
  min-width: 0;
}

.works-intro {
  min-height: 64vh;
}

.works-stage {
  min-height: 760px;
}

.slide-title {
  max-width: min(72vw, 980px);
}

.slide-title h1 {
  font-size: clamp(34px, 5.7vw, 98px);
}

.slide-pullquote {
  bottom: clamp(170px, 20vh, 230px);
  max-width: min(360px, 28vw);
}

.works-index {
  top: 48%;
}

.image-main {
  width: min(43vw, 660px);
}

.image-side {
  width: min(22vw, 340px);
}

.project-page,
.about-page,
.moodboard-page,
.contact-page {
  padding-top: clamp(112px, 10vw, 150px);
}

.project-cover h1 {
  font-size: clamp(58px, 11vw, 206px);
  line-height: 0.82;
}

.project-cover p {
  max-width: min(720px, 72vw);
}

.project-hero h2,
.about-hero h1,
.page-title h1,
.contact-hero h1 {
  font-size: clamp(44px, 7.2vw, 72px);
  overflow-wrap: anywhere;
}

.contact-page {
  min-height: calc(100vh - 92px);
}

.contact-marquee {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  margin-inline: -56px;
}

.site-footer {
  position: sticky;
  bottom: 10px;
  z-index: 35;
  padding: 8px 12px;
  background: transparent;
  pointer-events: none;
}

.footer-inner {
  pointer-events: auto;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  border-radius: 0;
  background: rgba(247, 247, 247, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

.footer-inner p,
.footer-inner a {
  font-size: clamp(13px, 1.08vw, 18px);
  letter-spacing: -0.065em;
}

.footer-brand,
.footer-social {
  color: rgba(17, 17, 17, 0.34);
}

@keyframes slowFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

@media (max-width: 900px) {
  .site-header {
    position: absolute;
    align-items: flex-start;
    padding-top: 18px;
  }

  .mark img {
    filter: none;
  }

  .main-nav {
    border-color: rgba(17, 17, 17, 0.18);
    background: rgba(245, 244, 239, 0.58);
  }

  .home-cover {
    padding-bottom: 86px;
  }

  .home-cover-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 42px;
    padding-bottom: 96px;
  }

  .home-title {
    font-size: clamp(48px, 14vw, 86px);
    line-height: 0.9;
  }

  .home-intro {
    font-size: clamp(20px, 6vw, 32px);
  }

  .cover-logo {
    justify-self: start;
    width: 148px;
    margin-top: 24px;
  }

  .home-actions {
    margin-bottom: 20px;
  }

  .service-list,
  .home-feature {
    grid-template-columns: 1fr;
  }

  .works-stage {
    min-height: auto;
  }

  .slide-pullquote {
    max-width: 100%;
  }

  .footer-inner {
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 8px 16px;
    min-height: auto;
    padding: 12px;
    align-items: center;
  }

  .footer-left {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .footer-left > * {
    white-space: nowrap;
  }

  .footer-designed {
    justify-self: center;
    align-self: center;
  }

  .footer-social {
    justify-self: end;
    align-self: center;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .main-nav {
    gap: 12px;
    padding: 7px 9px;
    font-size: 13px;
  }

  .mark {
    width: 48px;
    height: 48px;
  }

  .button-link {
    width: 100%;
  }

  .footer-inner {
    display: none;
  }
}

.mark img,
.cover-logo img {
  filter: none;
}

.mark img {
  animation: logoRotate 18s linear infinite;
  transform-origin: center;
}

.cover-logo img {
  animation: logoRotate 22s linear infinite reverse;
  transform-origin: center;
}

.mark:hover img,
.cover-logo:hover img {
  animation-duration: 3.5s;
}

.site-header {
  mix-blend-mode: normal;
  color: #111111;
}

.main-nav {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.14)),
    rgba(242, 242, 242, 0.22);
  backdrop-filter: blur(18px) saturate(1.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.10),
    0 6px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}

.main-nav::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.88), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(233, 50, 34, 0.16), transparent 36%);
  opacity: 0.72;
  pointer-events: none;
}

.main-nav::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -35%;
  width: 70%;
  height: 240%;
  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.48),
    transparent
  );
  transform: rotate(16deg);
  animation: glassSheen 7s ease-in-out infinite;
  pointer-events: none;
}

.main-nav a {
  position: relative;
  z-index: 1;
  padding: 0 4px;
  color: rgba(17, 17, 17, 0.82);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.main-nav a:hover {
  color: #111111;
  opacity: 1;
}

.site-footer {
  background: transparent;
}

.footer-inner {
  gap: clamp(44px, 6.8vw, 110px);
  background: rgba(242, 242, 242, 0.76);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}

.footer-inner p,
.footer-inner a {
  letter-spacing: -0.055em;
}

.footer-inner {
  padding-left: clamp(14px, 2.2vw, 34px);
  padding-right: clamp(14px, 2.2vw, 34px);
}

@keyframes logoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes glassSheen {
  0% {
    transform: translateX(-30%) rotate(16deg);
    opacity: 0;
  }

  35% {
    opacity: 0.7;
  }

  65% {
    opacity: 0.25;
  }

  100% {
    transform: translateX(240%) rotate(16deg);
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .footer-inner {
    gap: 14px;
    background: rgba(242, 242, 242, 0.82);
  }

  .main-nav {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18)),
      rgba(242, 242, 242, 0.36);
  }
}

.cover-logo {
  overflow: visible;
  width: clamp(128px, 17vw, 250px);
  background: rgba(245, 244, 239, 0.34);
  animation: slowFloat 6s ease-in-out infinite;
  cursor: pointer;
}

.cover-logo img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: invert(1);
  animation: none;
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.35s ease;
}

.cover-logo::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
  transition:
    inset 0.45s ease,
    border-color 0.45s ease,
    transform 0.45s ease;
}

.cover-logo::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px dashed rgba(233, 50, 34, 0.0);
  border-radius: 50%;
  transform: rotate(0deg) scale(0.85);
  transition:
    border-color 0.35s ease,
    transform 0.55s ease;
}

.cover-logo:hover::before {
  inset: -28px;
  border-color: rgba(233, 50, 34, 0.45);
  transform: rotate(12deg);
}

.cover-logo:hover::after {
  border-color: rgba(233, 50, 34, 0.7);
  transform: rotate(180deg) scale(1.16);
}

.cover-logo:hover img {
  transform: rotate(-12deg) scale(1.08);
}

.cover-logo.is-pulsing {
  animation:
    logoPulse 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    slowFloat 6s ease-in-out infinite;
}

.cover-logo.is-pulsing::before {
  animation: logoRingBurst 0.7s ease forwards;
}

.cover-logo .logo-satellite {
  position: absolute;
  left: -24px;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17, 17, 17, 0.36);
  border-radius: 50%;
  background: rgba(242, 242, 242, 0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(-50%);
  pointer-events: none;
}

.cover-logo .logo-satellite::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E93222;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px rgba(233, 50, 34, 0.5);
}

.site-footer {
  background: transparent;
  padding: 8px 12px;
}

.footer-inner {
  position: relative;
  overflow: hidden;
  grid-template-columns: auto auto auto 1fr auto;
  gap: clamp(60px, 8vw, 150px);
  min-height: 46px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: #f2f2f2 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.footer-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #f2f2f2;
  pointer-events: none;
}

.footer-inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--footer-light-x, -20%);
  z-index: 1;
  width: 180px;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(233, 50, 34, 0.13),
      rgba(255, 255, 255, 0.75),
      transparent
    );
  transform: skewX(-18deg);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.footer-inner:hover::after {
  opacity: 1;
}

.footer-inner > * {
  position: relative;
  z-index: 2;
}

.footer-item,
.footer-brand,
.footer-social {
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.25s ease,
    color 0.25s ease,
    letter-spacing 0.25s ease;
}

.footer-item:hover,
.footer-brand:hover,
.footer-social:hover {
  color: #E93222;
  letter-spacing: -0.02em;
  transform: translateY(-2px);
  opacity: 1;
}

.footer-orb {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(17, 17, 17, 0.26);
  border-radius: 50%;
  background: #f2f2f2;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.footer-orb span {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E93222;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(233, 50, 34, 0.45);
}

.footer-orb::before,
.footer-orb::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(233, 50, 34, 0);
  border-radius: 50%;
  transition:
    inset 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
}

.footer-inner:hover .footer-orb {
  transform: rotate(180deg) scale(1.08);
  border-color: rgba(233, 50, 34, 0.5);
}

.footer-inner:hover .footer-orb::before {
  inset: -14px;
  border-color: rgba(233, 50, 34, 0.36);
}

.footer-inner:hover .footer-orb::after {
  inset: -22px;
  border-color: rgba(233, 50, 34, 0.16);
}

.footer-inner:hover {
  transform: translateY(-3px);
  box-shadow:
    0 32px 88px rgba(0, 0, 0, 0.22),
    0 14px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.footer-inner {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.footer-inner p,
.footer-inner a {
  font-size: clamp(13px, 1.05vw, 17px);
}

@keyframes logoPulse {
  0% {
    transform: translateY(0) scale(1);
  }

  40% {
    transform: translateY(-12px) scale(1.07);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes logoRingBurst {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@media (max-width: 900px) {
  .cover-logo img {
    filter: invert(1);
  }

  .cover-logo .logo-satellite {
    width: 42px;
    height: 42px;
    left: -18px;
  }

  .footer-inner {
    grid-template-columns: auto 1fr;
    gap: 14px 24px;
    background: #f2f2f2 !important;
  }

  .footer-orb {
    grid-row: span 4;
    align-self: center;
  }
}

@media (max-width: 520px) {
  .footer-inner {
    display: grid;
  }
}

.cover-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: clamp(128px, 17vw, 250px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(17, 17, 17, 0.4);
  border-radius: 50%;
  background: rgba(245, 244, 239, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: slowFloat 6s ease-in-out infinite;
  cursor: pointer;
  isolation: isolate;
  mix-blend-mode: normal;
}

.cover-logo::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
  opacity: 1;
  transition:
    inset 0.45s ease,
    border-color 0.45s ease,
    transform 0.45s ease;
}

.cover-logo::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px dashed rgba(233, 50, 34, 0);
  border-radius: 50%;
  transform: rotate(0deg) scale(0.85);
  transition:
    border-color 0.35s ease,
    transform 0.55s ease;
}

.cover-logo img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: invert(1);
  mix-blend-mode: difference;
  animation: logoBlendRotate 18s linear infinite;
  transform-origin: center;
  transition:
    filter 0.35s ease,
    opacity 0.35s ease;
}

.cover-logo .logo-blend-echo {
  position: absolute;
  z-index: 1;
  inset: 22%;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.08;
  mix-blend-mode: difference;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.cover-logo:hover .logo-blend-echo {
  opacity: 0.18;
  transform: scale(1.18);
}

.cover-logo:hover::before {
  inset: -28px;
  border-color: rgba(233, 50, 34, 0.45);
  transform: rotate(12deg);
}

.cover-logo:hover::after {
  border-color: rgba(233, 50, 34, 0.7);
  transform: rotate(180deg) scale(1.16);
}

.cover-logo:hover img {
  animation-duration: 3.5s;
}

.cover-logo.is-pulsing {
  animation:
    logoPulse 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    slowFloat 6s ease-in-out infinite;
}

.cover-logo.is-pulsing::before {
  animation: logoRingBurst 0.7s ease forwards;
}

.cover-logo .logo-satellite {
  position: absolute;
  left: -24px;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17, 17, 17, 0.36);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
  pointer-events: none;
}

.cover-logo .logo-satellite::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E93222;
  box-shadow: 0 0 18px rgba(233, 50, 34, 0.5);
  transform: translate(-50%, -50%);
}

.site-footer {
  background: transparent !important;
  padding: 8px 12px;
}

.footer-inner {
  gap: clamp(60px, 8vw, 150px);
  min-height: 46px;
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.09);
}

.footer-inner::before {
  background: transparent !important;
}

.footer-inner p,
.footer-inner a {
  color: #111111;
}

.footer-brand,
.footer-social {
  color: rgba(17, 17, 17, 0.38);
}

@keyframes logoBlendRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .cover-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    justify-self: start;
    width: 148px;
    margin-top: 24px;
    mix-blend-mode: normal !important;
    background: rgba(245, 244, 239, 0.34) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .cover-logo img {
    filter: invert(1);
    mix-blend-mode: normal !important;
  }

  .cover-logo .logo-satellite {
    display: none;
  }

  .cover-logo .logo-blend-echo {
    display: none;
  }

  .cover-logo::before {
    display: none;
  }

  .cover-logo::after {
    display: none;
  }

  .footer-inner {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #c7c7c7 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
}

:root {
  --signal: #E93222;
  --signal-soft: rgba(233, 50, 34, 0.22);
  --signal-strong: #ff1f0f;
}

.site-header {
  padding: 20px clamp(22px, 4vw, 56px);
}

.mark {
  width: clamp(46px, 5vw, 76px);
  height: clamp(46px, 5vw, 76px);
}

.main-nav {
  min-height: clamp(42px, 4.4vw, 56px);
  padding: 7px 14px;
  gap: clamp(16px, 2vw, 28px);
  border: 1px solid rgba(199, 199, 199, 0.8);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18)),
    rgba(255, 255, 255, 0.32);
}

.main-nav a {
  font-size: clamp(13px, 0.95vw, 15px);
}

.cover-logo {
  align-self: center;
  justify-self: end;
  width: clamp(138px, 18vw, 266px);
  background: transparent !important;
  border-color: rgba(17, 17, 17, 0.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: auto;
  mix-blend-mode: difference;
  z-index: 12;
  transform: translateY(-4vh);
}

.cover-logo img {
  width: 76%;
  height: 76%;
  filter: invert(1) contrast(1.15);
  mix-blend-mode: difference;
  opacity: 0.98;
}

.cover-logo .logo-blend-echo {
  display: none;
}

.cover-logo::before {
  border-color: rgba(255, 255, 255, 0.38);
}

.cover-logo::after {
  border-color: rgba(233, 50, 34, 0.0);
}

.cover-logo .logo-satellite {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(199, 199, 199, 0.9);
  mix-blend-mode: normal;
}

.cover-logo .logo-satellite::before {
  background: var(--signal-strong);
  box-shadow:
    0 0 18px rgba(233, 50, 34, 0.75),
    0 0 38px rgba(233, 50, 34, 0.36);
}

.home-cover-grid {
  grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) minmax(150px, 270px);
  gap: clamp(16px, 3vw, 48px);
}

.home-title {
  max-width: 1040px;
  font-size: clamp(52px, 9.4vw, 168px);
  position: relative;
  z-index: 5;
}

.button-link:hover,
.contact-links a:hover,
.view-work:hover {
  background: var(--signal-strong);
}

.archive-row:hover,
.service-card:hover {
  background: rgba(233, 50, 34, 0.24);
}

.image:hover::after,
.editorial-card:hover .editorial-image::after,
.project-image:hover::after,
.about-image:hover::after,
.mood-item:hover::after,
.feature-image:hover::after {
  background: rgba(233, 50, 34, 0.28);
}

.index-item:hover,
.index-item.active,
.footer-item:hover,
.footer-brand:hover,
.footer-social:hover {
  color: var(--signal-strong);
}

.site-footer {
  bottom: 12px;
  padding: 0 clamp(22px, 4vw, 56px);
}

.footer-inner {
  min-height: clamp(42px, 4.4vw, 56px);
  padding: 0 clamp(14px, 2vw, 26px);
  gap: clamp(42px, 6vw, 120px);
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.footer-orb {
  width: clamp(22px, 2vw, 28px);
  height: clamp(22px, 2vw, 28px);
}

.home-page > section:last-of-type,
.works-page > section:last-of-type {
  border-bottom: 0 !important;
}

.works-page .project-archive {
  border-bottom: 0 !important;
}

.home-feature {
  border-bottom: 0 !important;
}

.site-footer {
  margin-top: 0;
}

.works-intro {
  min-height: 58vh;
}

.works-stage {
  min-height: 740px;
}

.slide-title h1 {
  font-size: clamp(34px, 5.6vw, 96px);
}

.slide-pullquote {
  right: clamp(24px, 6vw, 92px);
}

.cover-logo:hover {
  mix-blend-mode: difference;
}

.cover-logo:hover img {
  filter: invert(1) contrast(1.35);
}

@media (max-width: 900px) {
  .site-header {
    padding: 18px clamp(18px, 5vw, 32px);
  }

  .main-nav {
    min-height: 42px;
    gap: 14px;
  }

  .cover-logo {
    justify-self: start;
    width: 150px;
    transform: none;
    mix-blend-mode: normal;
  }

  .cover-logo img {
    filter: none;
    mix-blend-mode: normal;
  }

  .home-cover-grid {
    grid-template-columns: 1fr;
  }

  .site-footer {
    padding: 0 clamp(18px, 5vw, 32px);
  }

  .footer-inner {
    min-height: auto;
    gap: 12px 24px;
  }
}

.site-header {
  padding: 16px clamp(22px, 4vw, 56px);
  mix-blend-mode: normal !important;
  color: #111111 !important;
}

.mark {
  width: clamp(38px, 4.2vw, 62px);
  height: clamp(38px, 4.2vw, 62px);
}

.mark img {
  filter: none !important;
}

.main-nav {
  min-height: clamp(34px, 3.2vw, 42px);
  padding: 5px 12px;
  gap: clamp(14px, 1.7vw, 24px);
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07);
}

.main-nav::before,
.main-nav::after {
  display: none !important;
}

.main-nav a {
  min-height: 24px;
  padding: 0 2px;
  color: #111111 !important;
  font-size: clamp(12px, 0.88vw, 14px);
  text-shadow: none;
}

.home-cover {
  isolation: isolate;
}

.home-cover-grid {
  position: relative;
}

.cover-logo {
  position: absolute !important;
  top: clamp(190px, 33vh, 360px) !important;
  left: clamp(190px, 25vw, 500px) !important;
  z-index: 18;
  justify-self: auto;
  align-self: auto;
  width: clamp(96px, 11vw, 180px);
  border: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: difference !important;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  animation: logoCrossFloat 5.5s ease-in-out infinite;
}

.cover-logo::before {
  inset: -12px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  opacity: 1;
  mix-blend-mode: difference;
}

.cover-logo::after {
  inset: -22px;
  border: 1px solid rgba(233, 50, 34, 0.0);
  border-radius: 50%;
}

.cover-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) contrast(1.25) !important;
  mix-blend-mode: difference !important;
  opacity: 1;
  animation: logoBlendRotate 18s linear infinite;
}

.cover-logo .logo-blend-echo {
  display: none !important;
}

.cover-logo .logo-satellite {
  left: -18px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #c7c7c7;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mix-blend-mode: normal;
}

.cover-logo .logo-satellite::before {
  width: 7px;
  height: 7px;
  background: var(--signal-strong);
}

.home-title {
  position: relative;
  z-index: 10;
}

.site-footer {
  bottom: 10px;
  padding: 0 clamp(22px, 4vw, 56px);
}

.footer-inner {
  min-height: clamp(34px, 3.2vw, 42px);
  padding: 0 clamp(12px, 1.7vw, 22px);
  gap: clamp(36px, 5.8vw, 110px);
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.footer-inner p,
.footer-inner a {
  font-size: clamp(12px, 0.95vw, 16px);
}

.footer-orb {
  width: clamp(18px, 1.7vw, 24px);
  height: clamp(18px, 1.7vw, 24px);
}

:root {
  --signal-soft: rgba(233, 50, 34, 0.26);
  --signal-strong: #ff1c0b;
}

.button-link:hover,
.contact-links a:hover,
.view-work:hover {
  background: var(--signal-strong);
}

@keyframes logoCrossFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-4deg);
  }

  50% {
    transform: translate(-50%, calc(-50% - 10px)) rotate(4deg);
  }
}

@media (max-width: 900px) {
  .site-header {
    padding: 14px clamp(18px, 5vw, 32px);
  }

  .mark {
    width: 44px;
    height: 44px;
  }

  .main-nav {
    min-height: 36px;
    padding: 5px 10px;
    gap: 13px;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #c7c7c7 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .cover-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    justify-self: start;
    width: 118px;
    margin-top: 20px;
    transform: none;
    mix-blend-mode: normal !important;
    animation: slowFloat 6s ease-in-out infinite;
  }

  .cover-logo img {
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .footer-inner {
    min-height: auto;
    padding: 10px 12px;
    gap: 10px 20px;
  }
}

.site-header {
  mix-blend-mode: normal !important;
  isolation: auto;
}

.mark {
  position: relative;
  z-index: 44;
  mix-blend-mode: difference;
}

.mark img {
  filter: invert(1) contrast(1.12) !important;
  mix-blend-mode: difference;
  opacity: 0.98;
}

.main-nav {
  mix-blend-mode: normal;
  isolation: isolate;
}

.cover-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: clamp(128px, 17vw, 250px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(17, 17, 17, 0.4) !important;
  border-radius: 50%;
  background: rgba(245, 244, 239, 0.34) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
  z-index: 18;
  cursor: grab;
  transform: none !important;
  animation: slowFloat 6s ease-in-out infinite;
  touch-action: none;
  user-select: none;
}

.cover-logo:active {
  cursor: grabbing;
}

.cover-logo img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 1;
  animation: logoBlendRotate 18s linear infinite;
  transform-origin: center;
  pointer-events: none;
}

.cover-logo .logo-blend-echo {
  display: none !important;
}

.cover-logo::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
  opacity: 1;
  mix-blend-mode: normal;
  transition:
    inset 0.45s ease,
    border-color 0.45s ease,
    transform 0.45s ease;
}

.cover-logo::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px dashed rgba(233, 50, 34, 0);
  border-radius: 50%;
  transform: rotate(0deg) scale(0.85);
  transition:
    border-color 0.35s ease,
    transform 0.55s ease;
}

.cover-logo .logo-satellite {
  left: -24px;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17, 17, 17, 0.36);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
  mix-blend-mode: normal;
  pointer-events: none;
}

.cover-logo .logo-satellite::before {
  width: 9px;
  height: 9px;
  background: #E93222;
  box-shadow:
    0 0 18px rgba(233, 50, 34, 0.75),
    0 0 38px rgba(233, 50, 34, 0.36);
}

.cover-logo:hover::before {
  inset: -28px;
  border-color: rgba(233, 50, 34, 0.45);
  transform: rotate(12deg);
}

.cover-logo:hover::after {
  border-color: rgba(233, 50, 34, 0.7);
  transform: rotate(180deg) scale(1.16);
}

.cover-logo:hover img {
  animation-duration: 3.5s;
}

.cover-logo.is-dragged {
  position: absolute !important;
  top: var(--logo-y) !important;
  left: var(--logo-x) !important;
  right: auto !important;
  justify-self: auto;
  align-self: auto;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  animation: none;
}

.cover-logo.is-dragging {
  z-index: 60;
  transition: none !important;
}

.cover-logo.is-dragging img {
  animation-duration: 2.4s;
}

.cover-logo::marker {
  display: none;
}

.cover-logo.is-dragging::after {
  border-color: rgba(233, 50, 34, 0.85);
}

@media (max-width: 900px) {
  .mark {
    mix-blend-mode: normal;
  }

  .mark img {
    filter: none !important;
    mix-blend-mode: normal;
  }

  .cover-logo,
  .cover-logo.is-dragged {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    justify-self: start;
    width: 148px;
    margin-top: 24px;
    transform: none !important;
    animation: slowFloat 6s ease-in-out infinite;
  }

  .cover-logo img {
    filter: invert(1) !important;
  }
}

.site-header {
  mix-blend-mode: difference !important;
  color: #ffffff !important;
  padding: 16px clamp(22px, 4vw, 56px);
}

.mark {
  width: clamp(42px, 4.8vw, 72px);
  height: clamp(42px, 4.8vw, 72px);
  mix-blend-mode: normal !important;
}

.mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 0.96;
  animation: navLogoRotate 18s linear infinite;
  transform-origin: center;
}

.mark:hover img {
  animation-duration: 3.5s;
}

.main-nav {
  min-height: clamp(36px, 3.4vw, 44px);
  padding: 5px 13px;
  gap: clamp(14px, 1.8vw, 26px);
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.09);
  mix-blend-mode: normal !important;
  isolation: isolate;
}

.main-nav::before,
.main-nav::after {
  display: none !important;
}

.main-nav a {
  min-height: 24px;
  padding: 0 2px;
  color: #111111 !important;
  font-size: clamp(12px, 0.9vw, 14px);
  text-shadow: none !important;
  opacity: 1;
}

.footer-inner {
  min-height: clamp(36px, 3.4vw, 44px);
}

.reveal {
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease !important;
}

.button-link,
.contact-links a,
.archive-row,
.editorial-image,
.service-card,
.tilt-card {
  transition-duration: 0.22s !important;
}

@keyframes navLogoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .site-header {
    mix-blend-mode: normal !important;
    color: #111111 !important;
  }

  .mark img {
    filter: none !important;
  }

  .main-nav {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #c7c7c7 !important;
    backdrop-filter: blur(10px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  }
}

.site-header .mark {
  width: clamp(42px, 4.8vw, 72px);
  height: clamp(42px, 4.8vw, 72px);
  mix-blend-mode: normal !important;
}

.site-header .mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 0.96;
  animation: navLogoRotate 18s linear infinite;
  transform-origin: center;
}

.site-header .mark:hover img {
  animation-duration: 3.5s;
}

.site-header {
  padding: 16px clamp(22px, 4vw, 56px);
  mix-blend-mode: normal !important;
  color: #111111 !important;
}

.main-nav {
  min-height: clamp(34px, 3.2vw, 42px);
  padding: 5px 12px;
  gap: clamp(14px, 1.7vw, 24px);
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07);
  mix-blend-mode: normal !important;
  isolation: isolate;
}

.main-nav::before,
.main-nav::after {
  display: none !important;
}

.main-nav a {
  min-height: 24px;
  padding: 0 2px;
  color: #111111 !important;
  font-size: clamp(12px, 0.88vw, 14px);
  text-shadow: none !important;
  opacity: 1;
}

.home-page .cover-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  align-self: start;
  justify-self: end;
  display: grid;
  place-items: center;
  width: clamp(128px, 17vw, 250px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(17, 17, 17, 0.4) !important;
  border-radius: 50%;
  background: rgba(245, 244, 239, 0.34) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  mix-blend-mode: normal !important;
  isolation: isolate;
  z-index: 18;
  cursor: grab;
  transform: none !important;
  animation: slowFloat 6s ease-in-out infinite;
  touch-action: none;
  user-select: none;
}

.home-page .cover-logo:active {
  cursor: grabbing;
}

.home-page .cover-logo img {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 1;
  animation: logoBlendRotate 18s linear infinite;
  transform-origin: center;
  pointer-events: none;
}

.home-page .cover-logo .logo-blend-echo {
  display: none !important;
}

.home-page .cover-logo::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
  opacity: 1;
  mix-blend-mode: normal;
  transition:
    inset 0.45s ease,
    border-color 0.45s ease,
    transform 0.45s ease;
}

.home-page .cover-logo::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px dashed rgba(233, 50, 34, 0);
  border-radius: 50%;
  transform: rotate(0deg) scale(0.85);
  transition:
    border-color 0.35s ease,
    transform 0.55s ease;
}

.home-page .cover-logo .logo-satellite {
  left: -24px;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17, 17, 17, 0.36);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
  mix-blend-mode: normal;
  pointer-events: none;
}

.home-page .cover-logo .logo-satellite::before {
  width: 9px;
  height: 9px;
  background: #E93222;
  box-shadow:
    0 0 18px rgba(233, 50, 34, 0.75),
    0 0 38px rgba(233, 50, 34, 0.36);
}

.home-page .cover-logo:hover::before {
  inset: -28px;
  border-color: rgba(233, 50, 34, 0.45);
  transform: rotate(12deg);
}

.home-page .cover-logo:hover::after {
  border-color: rgba(233, 50, 34, 0.7);
  transform: rotate(180deg) scale(1.16);
}

.home-page .cover-logo:hover img {
  animation-duration: 3.5s;
}

.home-page .cover-logo.is-dragged {
  position: absolute !important;
  top: var(--logo-y) !important;
  left: var(--logo-x) !important;
  right: auto !important;
  justify-self: auto;
  align-self: auto;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  animation: none;
}

.home-page .cover-logo.is-dragging {
  z-index: 60;
  transition: none !important;
}

.home-page .cover-logo.is-dragging img {
  animation-duration: 2.4s;
}

.reveal {
  transition:
    opacity 0.68s ease,
    transform 0.68s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.68s ease !important;
}

@media (max-width: 900px) {
  .site-header {
    padding: 14px clamp(18px, 5vw, 32px);
    mix-blend-mode: normal !important;
    color: #111111 !important;
  }

  .site-header .mark {
    width: 44px;
    height: 44px;
  }

  .site-header .mark img {
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .main-nav {
    min-height: 36px;
    padding: 5px 10px;
    gap: 13px;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #c7c7c7 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .home-page .cover-logo,
  .home-page .cover-logo.is-dragged {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    justify-self: start;
    width: 148px;
    margin-top: 24px;
    transform: none !important;
    animation: slowFloat 6s ease-in-out infinite;
  }

  .home-page .cover-logo img {
    filter: invert(1) !important;
    mix-blend-mode: normal !important;
  }
}

@keyframes navLogoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.site-header {
  mix-blend-mode: difference !important;
  color: #ffffff !important;
  isolation: auto !important;
}

.site-header .mark {
  width: clamp(42px, 4.8vw, 72px);
  height: clamp(42px, 4.8vw, 72px);
  mix-blend-mode: normal !important;
  isolation: auto !important;
}

.site-header .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 0.96;
  animation: navLogoRotate 18s linear infinite !important;
  transform-origin: center;
}

.site-header .mark:hover img {
  animation-duration: 3.5s !important;
}

.site-header .main-nav {
  mix-blend-mode: normal !important;
  isolation: isolate !important;
  color: #111111 !important;
}

@media (max-width: 900px) {
  .site-header {
    mix-blend-mode: difference !important;
    color: #ffffff !important;
  }

  .site-header .mark img {
    filter: invert(1) !important;
    mix-blend-mode: normal !important;
    animation: navLogoRotate 18s linear infinite !important;
  }

  .site-header .main-nav {
    mix-blend-mode: normal !important;
    color: #111111 !important;
  }
}

@keyframes navLogoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.site-header {
  mix-blend-mode: normal !important;
  color: #111111 !important;
  isolation: auto !important;
  padding: 16px clamp(22px, 4vw, 56px);
  pointer-events: none;
}

.site-header .mark {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 4.8vw, 72px);
  height: clamp(42px, 4.8vw, 72px);
  mix-blend-mode: difference !important;
  isolation: auto !important;
  z-index: 50;
}

.site-header .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 0.96;
  animation: navLogoRotate 18s linear infinite !important;
  transform-origin: center;
}

.site-header .mark:hover img {
  animation-duration: 3.5s !important;
}

.site-header .main-nav {
  pointer-events: auto;
  position: relative;
  z-index: 49;
  display: flex;
  align-items: center;
  min-height: clamp(34px, 3.2vw, 42px);
  padding: 5px 12px;
  gap: clamp(14px, 1.7vw, 24px);
  border: 1px solid #c7c7c7 !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07);
  mix-blend-mode: normal !important;
  isolation: isolate !important;
  color: #111111 !important;
  overflow: hidden;
}

.site-header .main-nav::before,
.site-header .main-nav::after {
  display: none !important;
}

.site-header .main-nav a {
  position: relative;
  z-index: 2;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  color: #111111 !important;
  font-size: clamp(12px, 0.88vw, 14px);
  text-shadow: none !important;
  opacity: 1;
  mix-blend-mode: normal !important;
}

.site-header .main-nav a:hover {
  color: #E93222 !important;
  opacity: 1;
}

.footer-inner {
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

@media (max-width: 900px) {
  .site-header {
    mix-blend-mode: normal !important;
    color: #111111 !important;
    padding: 14px clamp(18px, 5vw, 32px);
    pointer-events: none;
  }

  .site-header .mark {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    mix-blend-mode: difference !important;
  }

  .site-header .mark img {
    filter: invert(1) !important;
    animation: navLogoRotate 18s linear infinite !important;
  }

  .site-header .main-nav {
    pointer-events: auto;
    min-height: 36px;
    padding: 5px 10px;
    gap: 13px;
    border: 1px solid #c7c7c7 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    mix-blend-mode: normal !important;
    color: #111111 !important;
  }
}

@keyframes navLogoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.site-header {
  mix-blend-mode: normal !important;
  color: #111111 !important;
  isolation: isolate !important;
  pointer-events: none;
}

.site-header .mark {
  pointer-events: auto;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

.site-header .mark img {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1;
  animation: navLogoRotate 18s linear infinite !important;
  transform-origin: center;
  transition:
    filter 0.22s ease,
    mix-blend-mode 0.22s ease,
    opacity 0.22s ease,
    transform 0.22s ease;
}

.site-header .mark:hover,
.site-header .mark:focus-visible,
.site-header .mark:active {
  mix-blend-mode: difference !important;
}

.site-header .mark:hover img,
.site-header .mark:focus-visible img,
.site-header .mark:active img,
.site-header .mark.is-active img {
  filter: invert(1) contrast(1.15) !important;
  mix-blend-mode: difference !important;
  animation-duration: 3.5s !important;
}

.site-header .main-nav {
  pointer-events: auto;
  position: relative;
  z-index: 60;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
  overflow: hidden;

  border: 1px solid #c7c7c7 !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  background-image: none !important;

  backdrop-filter: blur(10px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  transform: translateZ(0);
}

.site-header .main-nav::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.site-header .main-nav::after {
  display: none !important;
}

.site-header .main-nav a {
  position: relative;
  z-index: 2;
  color: #111111 !important;
  mix-blend-mode: normal !important;
  opacity: 1;
}

.site-header .main-nav a:hover {
  color: #E93222 !important;
}

@media (max-width: 900px) {
  .site-header {
    mix-blend-mode: normal !important;
    color: #111111 !important;
  }

  .site-header .mark {
    mix-blend-mode: normal !important;
  }

  .site-header .mark img {
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .site-header .mark:hover img,
  .site-header .mark:focus-visible img,
  .site-header .mark:active img,
  .site-header .mark.is-active img {
    filter: invert(1) contrast(1.15) !important;
    mix-blend-mode: difference !important;
  }

  .site-header .main-nav {
    border: 1px solid #c7c7c7 !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    background-image: none !important;
    backdrop-filter: blur(10px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
  }
}

@keyframes navLogoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.site-header {
  mix-blend-mode: normal !important;
  color: #111111 !important;
  isolation: auto !important;
}

.site-header .mark {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 4.8vw, 72px);
  height: clamp(42px, 4.8vw, 72px);
  mix-blend-mode: difference !important;
  isolation: auto !important;
  z-index: 70;
}

.site-header .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 0.96;
  animation: navLogoRotate 18s linear infinite !important;
  transform-origin: center;
  transition:
    opacity 0.25s ease,
    filter 0.25s ease;
}

.site-header .mark:hover img,
.site-header .mark:focus-visible img,
.site-header .mark:active img {
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  animation-duration: 3.5s !important;
  opacity: 1;
}

.site-header .main-nav {
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

.site-header .mark.is-active img {
  filter: invert(1) !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 900px) {
  .site-header {
    mix-blend-mode: normal !important;
    color: #111111 !important;
  }

  .site-header .mark {
    mix-blend-mode: difference !important;
  }

  .site-header .mark img {
    filter: invert(1) !important;
    mix-blend-mode: normal !important;
    animation: navLogoRotate 18s linear infinite !important;
  }
}

@keyframes navLogoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px clamp(22px, 4vw, 56px);
  background: transparent !important;
  color: inherit !important;
  mix-blend-mode: normal !important;
  isolation: auto !important;
  pointer-events: none;
}

.site-header .mark {
  pointer-events: auto;
  position: relative;
  z-index: 82;

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

  width: clamp(42px, 4.8vw, 72px);
  height: clamp(42px, 4.8vw, 72px);

  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  mix-blend-mode: difference !important;
  isolation: auto !important;
}

.site-header .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;

  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 0.96;

  animation: navLogoRotate 18s linear infinite !important;
  transform-origin: center;
}

.site-header .mark:hover img,
.site-header .mark:focus-visible img,
.site-header .mark:active img {
  animation-duration: 3.5s !important;
  opacity: 1;
}

.site-header .main-nav {
  pointer-events: auto;
  position: relative;
  z-index: 81;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.7vw, 24px);

  min-height: clamp(34px, 3.2vw, 42px);
  padding: 5px 12px;

  border: 1px solid #c7c7c7 !important;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.5) !important;
  background-image: none !important;

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

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07);

  color: #111111 !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
  overflow: hidden;
}

.site-header .main-nav::before,
.site-header .main-nav::after {
  display: none !important;
  content: none !important;
}

.site-header .main-nav a {
  pointer-events: auto;
  position: relative;
  z-index: 2;

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

  min-height: 24px;
  padding: 0 2px;

  color: #111111 !important;
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1;
  text-shadow: none !important;
  opacity: 1;

  mix-blend-mode: normal !important;
  transition:
    color 0.22s ease,
    transform 0.22s ease;
}

.site-header .main-nav a:hover {
  color: #E93222 !important;
  transform: translateY(-1px);
}

.footer-inner {
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

@media (max-width: 900px) {
  .site-header {
    align-items: flex-start;
    padding: 14px clamp(18px, 5vw, 32px);
    pointer-events: none;
  }

  .site-header .mark {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    mix-blend-mode: difference !important;
  }

  .site-header .mark img {
    filter: invert(1) !important;
    animation: navLogoRotate 18s linear infinite !important;
  }

  .site-header .main-nav {
    pointer-events: auto;
    min-height: 36px;
    padding: 5px 10px;
    gap: 13px;
    border: 1px solid #c7c7c7 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #111111 !important;
    mix-blend-mode: normal !important;
  }
}

@keyframes navLogoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

body .site-header {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  mix-blend-mode: normal !important;
  isolation: auto !important;
  pointer-events: none !important;
}

body .site-header > .mark {
  pointer-events: auto !important;
  position: fixed !important;
  top: 16px !important;
  left: clamp(22px, 4vw, 56px) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 120 !important;

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

  width: clamp(42px, 4.8vw, 72px) !important;
  height: clamp(42px, 4.8vw, 72px) !important;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  opacity: 1 !important;
  transform: none !important;
  mix-blend-mode: difference !important;
  isolation: auto !important;
}

body .site-header > .mark::before,
body .site-header > .mark::after {
  display: none !important;
  content: none !important;
}

body .site-header > .mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;

  filter: invert(1) !important;
  mix-blend-mode: normal !important;
  opacity: 0.96 !important;

  animation: v22LogoRotate 18s linear infinite !important;
  transform-origin: center center !important;
}

body .site-header > .mark:hover img,
body .site-header > .mark:focus-visible img,
body .site-header > .mark:active img {
  animation-duration: 3.5s !important;
  opacity: 1 !important;
}

body .site-header > .main-nav {
  pointer-events: auto !important;
  position: fixed !important;
  top: 18px !important;
  right: clamp(22px, 4vw, 56px) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 119 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(14px, 1.7vw, 24px) !important;

  min-height: 40px !important;
  padding: 5px 13px !important;

  border: 1px solid #c7c7c7 !important;
  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.5) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  background-image: none !important;

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

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07) !important;

  color: #111111 !important;
  opacity: 1 !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

body .site-header > .main-nav::before,
body .site-header > .main-nav::after {
  display: none !important;
  content: none !important;
}

body .site-header > .main-nav a {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;

  display: inline-flex !important;
  align-items: center !important;

  min-height: 24px !important;
  padding: 0 2px !important;

  color: #111111 !important;
  font-size: clamp(12px, 0.88vw, 14px) !important;
  line-height: 1 !important;
  text-shadow: none !important;
  opacity: 1 !important;

  filter: none !important;
  mix-blend-mode: normal !important;

  transition:
    color 0.22s ease,
    transform 0.22s ease !important;
}

body .site-header > .main-nav a:hover {
  color: #E93222 !important;
  transform: translateY(-1px) !important;
}

body .footer-inner {
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

@media (max-width: 900px) {
  body .site-header > .mark {
    top: 14px !important;
    left: clamp(18px, 5vw, 32px) !important;
    width: 44px !important;
    height: 44px !important;
    mix-blend-mode: difference !important;
  }

  body .site-header > .mark img {
    filter: invert(1) !important;
    animation: v22LogoRotate 18s linear infinite !important;
  }

  body .site-header > .main-nav {
    top: 16px !important;
    right: clamp(18px, 5vw, 32px) !important;
    min-height: 36px !important;
    padding: 5px 10px !important;
    gap: 13px !important;
    border: 1px solid #c7c7c7 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
}

@media (max-width: 560px) {
  body .site-header > .main-nav {
    top: 68px !important;
    left: clamp(18px, 5vw, 32px) !important;
    right: auto !important;
  }
}

@keyframes v22LogoRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

body {
  min-width: 320px;
}

.home-title,
.works-intro h1,
.project-cover h1,
.project-hero h2,
.about-hero h1,
.page-title h1,
.contact-hero h1,
.manifesto-grid h2,
.feature-copy h2,
.spread-heading h2,
.principle h3 {
  overflow-wrap: anywhere;
}

@media (min-width: 1280px) {
  .home-cover-grid {
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    gap: clamp(32px, 4vw, 68px);
  }

  .home-title {
    max-width: 1100px;
  }

  .home-intro {
    max-width: 760px;
  }

  .service-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .editorial-grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .project-page,
  .about-page,
  .moodboard-page,
  .contact-page {
    max-width: 1800px;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body .site-header > .mark {
    width: 56px !important;
    height: 56px !important;
  }

  body .site-header > .main-nav {
    min-height: 38px !important;
    padding: 5px 12px !important;
  }

  .home-cover {
    min-height: 94svh;
  }

  .home-cover-grid {
    grid-template-columns: 160px minmax(0, 1fr) 190px;
    gap: 28px;
    min-height: calc(94svh - 220px);
  }

  .home-side-notes {
    align-self: center;
  }

  .home-title {
    font-size: clamp(58px, 9vw, 124px);
    line-height: 0.88;
  }

  .home-intro {
    font-size: clamp(22px, 2.7vw, 34px);
    max-width: 640px;
  }

  .home-page .cover-logo {
    width: clamp(130px, 15vw, 190px);
  }

  .manifesto-grid {
    grid-template-columns: 1fr 0.78fr;
    gap: 54px;
  }

  .manifesto-grid h2,
  .feature-copy h2,
  .spread-heading h2 {
    font-size: clamp(54px, 7vw, 96px);
  }

  .service-card {
    min-height: 280px;
  }

  .works-intro {
    min-height: 58vh;
  }

  .works-intro h1 {
    font-size: clamp(110px, 18vw, 230px);
  }

  .works-stage {
    min-height: 680px;
  }

  .image-main {
    width: min(45vw, 560px);
    height: min(58vh, 520px);
  }

  .image-side {
    width: min(24vw, 300px);
    height: min(32vh, 300px);
  }

  .slide-title h1 {
    font-size: clamp(42px, 5.6vw, 76px);
  }

  .slide-pullquote {
    max-width: 300px;
    font-size: clamp(22px, 2.4vw, 32px);
  }

  .works-index {
    width: 190px;
  }

  .project-cover h1 {
    font-size: clamp(74px, 11vw, 160px);
  }

  .project-hero {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .footer-inner {
    gap: clamp(32px, 5vw, 86px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body .site-header > .mark {
    top: 18px !important;
    left: 28px !important;
    width: 54px !important;
    height: 54px !important;
  }

  body .site-header > .main-nav {
    top: 22px !important;
    right: 28px !important;
    min-height: 38px !important;
    padding: 6px 12px !important;
    gap: 16px !important;
  }

  body .site-header > .main-nav a {
    font-size: 13px !important;
  }

  .home-cover {
    min-height: auto;
    padding: 126px 28px 88px;
  }

  .cover-topline {
    gap: 12px;
  }

  .home-cover-grid {
    grid-template-columns: 1fr 170px;
    grid-template-areas:
      "title logo"
      "notes logo";
    gap: 32px;
    min-height: auto;
    padding: 64px 0 90px;
  }

  .home-side-notes {
    grid-area: notes;
    display: flex;
    flex-wrap: wrap;
    align-self: end;
  }

  .home-cover-grid > div:nth-child(2) {
    grid-area: title;
  }

  .home-page .cover-logo {
    grid-area: logo;
    align-self: start;
    justify-self: end;
    width: 150px;
  }

  .home-title {
    font-size: clamp(64px, 11vw, 112px);
    line-height: 0.9;
  }

  .home-intro {
    max-width: 620px;
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.02;
  }

  .home-actions {
    gap: 10px;
  }

  .manifesto-section,
  .services-section,
  .home-feature,
  .editorial-spread,
  .project-archive {
    padding: 76px 28px;
  }

  .manifesto-grid,
  .home-feature,
  .spread-heading,
  .archive-head,
  .project-hero,
  .about-grid,
  .split-images {
    grid-template-columns: 1fr;
  }

  .manifesto-grid h2,
  .feature-copy h2,
  .spread-heading h2 {
    font-size: clamp(58px, 10vw, 110px);
  }

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

  .service-card {
    min-height: 260px;
  }

  .feature-image {
    min-height: 48vh;
  }

  .feature-copy {
    min-height: 45vh;
  }

  .works-intro {
    min-height: 55vh;
    padding: 138px 28px 56px;
  }

  .works-intro h1 {
    font-size: clamp(118px, 22vw, 210px);
  }

  .works-intro p:not(.eyebrow) {
    margin-left: 0;
    max-width: 680px;
  }

  .works-stage {
    height: auto;
    min-height: auto;
    overflow: visible;
    padding: 70px 28px 30px;
  }

  .work-slide,
  .work-slide.active {
    position: relative;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: grid;
    grid-template-columns: 1fr 0.6fr;
    gap: 16px;
    padding: 0 0 70px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.16);
  }

  .work-slide:not(:first-child) {
    margin-top: 56px;
  }

  .image,
  .image-main,
  .image-side {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
  }

  .image-main {
    height: 48vh;
  }

  .image-side {
    height: 30vh;
    align-self: end;
  }

  .slide-title {
    position: relative;
    grid-column: 1 / -1;
    left: auto;
    bottom: auto;
    max-width: none;
    margin-top: 8px;
  }

  .slide-title h1 {
    font-size: clamp(52px, 8vw, 86px);
  }

  .slide-meta,
  .slide-pullquote,
  .view-work {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    margin: 0;
  }

  .slide-pullquote {
    max-width: 560px;
    font-size: clamp(28px, 4.6vw, 42px);
  }

  .view-work {
    width: fit-content;
    height: auto;
    border-radius: 999px;
    padding: 12px 18px;
    opacity: 1;
    transform: none;
  }

  .works-controls,
  .works-index {
    display: none !important;
  }

  .editorial-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .editorial-card,
  .editorial-card:nth-child(1),
  .editorial-card:nth-child(2),
  .editorial-card:nth-child(3),
  .editorial-card:nth-child(4),
  .editorial-card:nth-child(5),
  .editorial-card:nth-child(6),
  .editorial-card:nth-child(7),
  .editorial-card:nth-child(8) {
    grid-column: span 3;
    min-height: auto;
    margin-top: 0;
  }

  .archive-row {
    grid-template-columns: 1fr 0.7fr;
    gap: 8px 18px;
    padding: 18px 0;
  }

  .project-page,
  .about-page,
  .moodboard-page,
  .contact-page {
    padding: 130px 28px 64px;
  }

  .project-cover {
    min-height: 58vh;
  }

  .project-cover h1 {
    font-size: clamp(76px, 14vw, 150px);
  }

  .project-cover p {
    margin-left: 0;
    max-width: 660px;
  }

  .project-image.large,
  .project-image.wide,
  .split-images .project-image,
  .about-image {
    height: 48vh;
  }

  .mood-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 280px;
  }

  .mood-item.tall {
    grid-row: span 2;
  }

  .mood-item.wide {
    grid-column: span 2;
  }

  .contact-page {
    min-height: 78vh;
  }

  .footer-inner {
    grid-template-columns: auto auto 1fr auto;
    gap: 24px !important;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 14px;
  }

  .footer-orb {
    display: none;
  }
}

@media (max-width: 767px) {
  body {
    background-size: 34px 34px;
  }

  .cursor-dot,
  .cursor-ring,
  .page-loader {
    display: none !important;
  }

  body .site-header > .mark {
    top: 14px !important;
    left: 18px !important;
    width: 42px !important;
    height: 42px !important;
  }

  body .site-header > .main-nav {
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    min-height: 36px !important;
    padding: 5px 10px !important;
    gap: 12px !important;
  }

  body .site-header > .main-nav a {
    font-size: 12px !important;
  }

  body .site-header > .main-nav a[href$="moodboard.html"] {
    display: none !important;
  }

  .home-cover {
    min-height: auto;
    padding: 98px 18px 70px;
  }

  .cover-topline {
    display: none;
  }

  .home-cover::before {
    font-size: clamp(160px, 58vw, 310px);
    bottom: -0.14em;
  }

  .home-cover-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: auto;
    padding: 40px 0 74px;
  }

  .home-side-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    order: 2;
  }

  .home-side-notes span {
    padding: 7px 9px;
    font-size: 10px;
  }

  .home-page .cover-logo,
  .home-page .cover-logo.is-dragged {
    order: 3;
    justify-self: start;
    width: 112px;
    margin: 10px 0 0 8px;
    pointer-events: none;
  }

  .home-page .cover-logo .logo-satellite {
    width: 34px;
    height: 34px;
    left: -14px;
  }

  .home-title {
    font-size: clamp(48px, 15vw, 78px);
    line-height: 0.9;
    letter-spacing: -0.09em;
  }

  .home-intro {
    margin-top: 20px;
    font-size: clamp(20px, 6vw, 30px);
    line-height: 1.02;
  }

  .home-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 24px;
  }

  .button-link {
    width: 100%;
    min-height: 42px;
  }

  .ticker-track span {
    font-size: 15px;
    padding: 9px 0;
  }

  .manifesto-section,
  .services-section,
  .home-feature,
  .editorial-spread,
  .project-archive {
    padding: 56px 18px;
  }

  .section-label,
  .eyebrow {
    font-size: 11px;
    margin-bottom: 14px;
  }

  .manifesto-grid,
  .home-feature,
  .spread-heading,
  .archive-head,
  .project-hero,
  .about-grid,
  .split-images {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .manifesto-grid h2,
  .feature-copy h2,
  .spread-heading h2,
  .project-hero h2,
  .about-hero h1,
  .page-title h1,
  .contact-hero h1 {
    font-size: clamp(42px, 13vw, 70px);
    line-height: 0.9;
  }

  .manifesto-copy p,
  .feature-copy p,
  .project-copy p,
  .about-text p,
  .about-hero p,
  .page-title p,
  .contact-hero p {
    font-size: 18px;
    line-height: 1.15;
  }

  .service-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service-card {
    min-height: auto;
    padding: 16px;
  }

  .service-card span {
    margin-bottom: 42px;
  }

  .service-card h3 {
    font-size: 34px;
  }

  .feature-image {
    height: 42vh;
    min-height: 300px;
  }

  .feature-copy {
    min-height: auto;
    padding: 18px;
  }

  .works-intro {
    min-height: auto;
    padding: 112px 18px 46px;
  }

  .works-intro h1 {
    font-size: clamp(82px, 25vw, 132px);
  }

  .works-intro p:not(.eyebrow) {
    margin-left: 0;
    font-size: 22px;
  }

  .works-stage {
    height: auto;
    min-height: auto;
    overflow: visible;
    padding: 0 18px 34px;
    border-bottom: 0;
  }

  .work-slide,
  .work-slide.active {
    position: relative;
    visibility: visible;
    opacity: 1;
    display: block;
    pointer-events: auto;
    transform: none;
    padding: 0 0 46px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.16);
  }

  .work-slide:not(:first-child) {
    margin-top: 38px;
  }

  .image,
  .image-main,
  .image-side {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    margin: 0;
  }

  .image-main {
    height: 42vh;
    min-height: 300px;
  }

  .image-side {
    display: none;
  }

  .slide-title {
    position: relative;
    left: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    max-width: none;
    margin-top: 14px;
  }

  .slide-title h1 {
    font-size: clamp(34px, 11vw, 58px);
    line-height: 0.9;
  }

  .slide-meta {
    position: relative;
    inset: auto;
    margin: 16px 0 0;
  }

  .slide-pullquote {
    position: relative;
    inset: auto;
    max-width: none;
    margin: 14px 0 0;
    font-size: 24px;
  }

  .view-work {
    position: relative;
    inset: auto;
    display: inline-flex;
    width: auto;
    height: auto;
    margin-top: 18px;
    padding: 11px 16px;
    border-radius: 999px;
    opacity: 1;
    transform: none;
  }

  .works-controls,
  .works-index {
    display: none !important;
  }

  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .editorial-card,
  .editorial-card:nth-child(1),
  .editorial-card:nth-child(2),
  .editorial-card:nth-child(3),
  .editorial-card:nth-child(4),
  .editorial-card:nth-child(5),
  .editorial-card:nth-child(6),
  .editorial-card:nth-child(7),
  .editorial-card:nth-child(8) {
    grid-column: auto;
    min-height: auto;
    margin-top: 0;
  }

  .editorial-image {
    height: 38vh;
    min-height: 280px;
  }

  .archive-actions {
    justify-content: flex-start;
  }

  .archive-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
    font-size: 18px;
  }

  .project-page,
  .about-page,
  .moodboard-page,
  .contact-page {
    padding: 104px 18px 56px;
  }

  .project-cover {
    min-height: auto;
    padding: 72px 0 46px;
  }

  .project-cover::before {
    display: none;
  }

  .project-cover h1 {
    font-size: clamp(54px, 17vw, 94px);
    line-height: 0.84;
  }

  .project-cover p {
    margin-left: 0;
    max-width: none;
    font-size: 24px;
  }

  .project-cover-meta,
  .project-specs,
  .slide-meta {
    gap: 6px;
  }

  .project-cover-meta span,
  .project-specs span,
  .slide-meta span,
  .external {
    padding: 7px 9px;
    font-size: 10px;
  }

  .project-hero {
    min-height: auto;
    padding: 42px 0;
  }

  .project-image.large,
  .project-image.wide,
  .split-images .project-image,
  .about-image {
    height: 42vh;
    min-height: 300px;
  }

  .about-hero {
    min-height: auto;
  }

  .about-grid {
    margin-top: 36px;
  }

  .about-text {
    padding: 18px;
  }

  .dropcap::first-letter {
    font-size: 4em;
  }

  .principle {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 22px 0;
  }

  .principle h3 {
    font-size: clamp(38px, 12vw, 64px);
  }

  .mood-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 280px;
    gap: 14px;
  }

  .mood-item.tall,
  .mood-item.wide {
    grid-row: auto;
    grid-column: auto;
  }

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

  .contact-links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .contact-marquee {
    margin-top: 8px;
    margin-inline: -18px;
  }

  .site-footer {
    position: relative;
    bottom: auto;
    padding: 0 18px 18px;
    margin-top: 28px;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px !important;
    min-height: auto;
    padding: 12px;
  }

  .footer-orb {
    display: none;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 15px;
  }

  .reveal {
    filter: none;
    transform: translateY(18px);
  }

  .tilt-card {
    transform: none !important;
  }
}

@media (max-width: 479px) {
  body .site-header > .mark {
    width: 38px !important;
    height: 38px !important;
  }

  body .site-header > .main-nav {
    top: 12px !important;
    right: 12px !important;
    gap: 10px !important;
    padding: 5px 9px !important;
  }

  body .site-header > .main-nav a {
    font-size: 11.5px !important;
  }

  .home-cover,
  .works-intro,
  .project-page,
  .about-page,
  .moodboard-page,
  .contact-page {
    padding-left: 14px;
    padding-right: 14px;
  }

  .home-title {
    font-size: clamp(44px, 15.6vw, 66px);
  }

  .home-intro {
    font-size: 20px;
  }

  .manifesto-section,
  .services-section,
  .home-feature,
  .editorial-spread,
  .project-archive {
    padding-left: 14px;
    padding-right: 14px;
  }

  .works-stage {
    padding-left: 14px;
    padding-right: 14px;
  }

  .image-main,
  .feature-image,
  .editorial-image,
  .project-image.large,
  .project-image.wide,
  .split-images .project-image,
  .about-image {
    min-height: 260px;
  }

  .footer-inner {
    display: none;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .home-cover {
    padding-top: 86px;
  }

  .home-cover-grid {
    padding-top: 22px;
  }

  .home-page .cover-logo {
    display: none;
  }

  .works-intro {
    min-height: auto;
  }

  .image-main {
    height: 78vh;
  }
}

.site-footer {
  width: 100%;
}

.footer-inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
}

.footer-inner > * {
  flex: 0 0 auto;
}

.footer-inner p,
.footer-inner a {
  font-size: clamp(12px, 0.92vw, 16px) !important;
  line-height: 1;
}

.footer-orb {
  flex: 0 0 auto;
}

@media (min-width: 1280px) {
  .footer-inner {
    gap: clamp(46px, 6vw, 120px) !important;
    min-height: 42px;
    padding: 0 clamp(16px, 2vw, 28px);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    gap: clamp(28px, 4.8vw, 72px) !important;
    min-height: 40px;
    padding: 0 18px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: clamp(11px, 1vw, 14px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer {
    position: sticky;
    bottom: 10px;
    z-index: 35;
    padding: 0 28px 10px;
    margin-top: 36px;
  }

  .footer-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px !important;
    min-height: 38px;
    padding: 0 14px;
    overflow: hidden;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 11.5px !important;
    letter-spacing: -0.04em;
  }

  .footer-orb {
    display: inline-flex !important;
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 767px) {
  body .site-header > .mark {
    top: 14px !important;
    left: 14px !important;
    width: 36px !important;
    height: 36px !important;
  }

  body .site-header > .main-nav {
    top: 14px !important;
    right: 14px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 4px 9px !important;
    gap: 9px !important;
    align-items: center !important;
  }

  body .site-header > .main-nav a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body .site-header > .main-nav a[href$="moodboard.html"] {
    display: inline-flex !important;
  }

  .site-footer {
    position: sticky;
    bottom: 8px;
    z-index: 35;
    padding: 0 14px 8px;
    margin-top: 30px;
    background: transparent !important;
  }

  .footer-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 18px !important;
    min-height: 34px;
    padding: 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .footer-inner::-webkit-scrollbar {
    display: none;
  }

  .footer-inner p,
  .footer-inner a {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px !important;
    letter-spacing: -0.035em;
    line-height: 1;
    white-space: nowrap;
  }

  .footer-orb {
    display: inline-flex !important;
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px !important;
  }

  .footer-orb span {
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 479px) {
  body .site-header > .mark {
    top: 12px !important;
    left: 12px !important;
    width: 34px !important;
    height: 34px !important;
  }

  body .site-header > .main-nav {
    top: 12px !important;
    right: 12px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 8px !important;
    gap: 7px !important;
  }

  body .site-header > .main-nav a {
    font-size: 10px !important;
    min-height: 24px !important;
  }

  .footer-inner {
    display: flex !important;
    gap: 16px !important;
    min-height: 32px;
    padding: 0 10px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 9.8px !important;
  }

  .footer-orb {
    flex-basis: 14px;
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 390px) {
  body .site-header > .main-nav {
    max-width: calc(100vw - 64px);
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    justify-content: flex-start !important;
  }

  body .site-header > .main-nav::-webkit-scrollbar {
    display: none;
  }

  body .site-header > .main-nav a {
    flex: 0 0 auto;
  }
}

.site-footer {
  position: sticky;
  bottom: 10px;
  z-index: 35;
  width: 100%;
  padding: 0 clamp(22px, 4vw, 56px) 10px;
  margin-top: 0;
  background: transparent !important;
  pointer-events: none;
}

.footer-inner {
  pointer-events: auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: clamp(22px, 4.5vw, 80px) !important;

  min-height: 38px;
  padding: 0 clamp(14px, 2vw, 24px);

  border: 1px solid #c7c7c7 !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.5) !important;

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

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07);

  overflow: hidden;
}

.footer-inner::before,
.footer-inner::after,
.footer-orb,
.footer-orb::before,
.footer-orb::after,
.footer-orb span {
  display: none !important;
  content: none !important;
}

.footer-inner:hover {
  transform: none !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07) !important;
}

.footer-inner p,
.footer-inner a {
  position: relative;
  z-index: 1;

  margin: 0;
  color: #111111 !important;

  font-size: clamp(11px, 0.78vw, 14px) !important;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em !important;
  white-space: nowrap;

  text-decoration: none;
  opacity: 1;
  transform: none !important;
  transition: color 0.2s ease;
}

.footer-brand,
.footer-social {
  color: rgba(17, 17, 17, 0.46) !important;
}

.footer-brand:hover,
.footer-social:hover {
  color: #E93222 !important;
  letter-spacing: -0.035em !important;
  transform: none !important;
}

.footer-item:hover,
.footer-inner p:hover {
  color: #111111 !important;
  letter-spacing: -0.035em !important;
  transform: none !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    gap: clamp(18px, 3.5vw, 52px) !important;
    min-height: 36px;
    padding: 0 16px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: clamp(10px, 0.9vw, 12px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer {
    position: sticky;
    bottom: 10px;
    padding: 0 28px 10px;
    margin-top: 34px;
  }

  .footer-inner {
    gap: 18px !important;
    min-height: 34px;
    padding: 0 12px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 10.5px !important;
    font-weight: 700;
  }
}

@media (max-width: 767px) {
  .site-footer {
    position: relative;
    bottom: auto;
    padding: 0 14px 16px;
    margin-top: 28px;
  }

  .footer-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 14px !important;
    min-height: 32px;
    padding: 0 10px;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .footer-inner::-webkit-scrollbar {
    display: none;
  }

  .footer-inner p,
  .footer-inner a {
    flex: 0 0 auto;
    font-size: 9.8px !important;
    font-weight: 700;
    letter-spacing: -0.025em !important;
  }
}

@media (max-width: 479px) {
  .site-footer {
    padding: 0 12px 14px;
  }

  .footer-inner {
    display: flex !important;
    gap: 12px !important;
    min-height: 30px;
    padding: 0 9px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 9.2px !important;
  }
}

.site-footer {
  position: sticky !important;
  bottom: 10px !important;
  z-index: 35;
  padding: 0 clamp(22px, 4vw, 56px) 10px !important;
  margin-top: 0;
  background: transparent !important;
  pointer-events: none;
}

.footer-inner {
  pointer-events: auto;
  min-height: 34px;
  padding: 0 clamp(12px, 1.6vw, 20px);
  gap: clamp(16px, 3.6vw, 62px) !important;
}

.footer-inner p,
.footer-inner a {
  font-size: clamp(9px, 0.64vw, 11.5px) !important;
  font-weight: 700;
  letter-spacing: -0.025em !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    padding: 0 clamp(22px, 4vw, 56px) 10px !important;
  }

  .footer-inner {
    min-height: 32px;
    gap: clamp(14px, 3vw, 42px) !important;
    padding: 0 14px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: clamp(8.5px, 0.78vw, 10.5px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    padding: 0 28px 10px !important;
    margin-top: 34px;
  }

  .footer-inner {
    min-height: 31px;
    gap: 14px !important;
    padding: 0 11px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 9.2px !important;
  }
}

@media (max-width: 767px) {
  .site-footer {
    position: sticky !important;
    bottom: 8px !important;
    z-index: 35;
    padding: 0 14px 8px !important;
    margin-top: 28px;
    background: transparent !important;
  }

  .footer-inner {
    min-height: 29px;
    padding: 0 9px;
    gap: 11px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 8.4px !important;
    letter-spacing: -0.015em !important;
  }
}

@media (max-width: 479px) {
  .site-footer {
    position: sticky !important;
    bottom: 8px !important;
    padding: 0 10px 8px !important;
  }

  .footer-inner {
    min-height: 28px;
    gap: 10px !important;
    padding: 0 8px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 7.8px !important;
  }
}

.site-footer {
  position: sticky !important;
  bottom: 10px !important;
  z-index: 35;
  width: 100%;
  padding: 0 clamp(22px, 4vw, 56px) 10px !important;
  margin-top: 0;
  background: transparent !important;
  pointer-events: none;
}

.footer-inner {
  pointer-events: auto;
  display: grid !important;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  align-items: center;
  column-gap: clamp(16px, 3vw, 54px) !important;

  min-height: 34px;
  padding: 0 clamp(14px, 2vw, 24px);

  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07);

  overflow: hidden;
}

.footer-inner p,
.footer-inner a {
  margin: 0;
  color: #111111 !important;
  font-size: clamp(9px, 0.64vw, 11.5px) !important;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em !important;
  white-space: nowrap;
  text-decoration: none;
}

.footer-inner p:nth-of-type(1) {
  justify-self: start;
}

.footer-inner p:nth-of-type(2) {
  justify-self: center;
}

.footer-inner p:nth-of-type(3) {
  justify-self: center;
}

.footer-social {
  justify-self: end;
  color: #111111 !important;
}

.footer-brand {
  color: #111111 !important;
}

.footer-orb {
  display: inline-flex !important;
  position: relative;
  justify-self: start;
  align-items: center;
  justify-content: center;
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 auto;
  border: 1px solid #c7c7c7;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0;
  cursor: default;
}

.footer-orb span {
  display: block !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E93222;
  box-shadow: 0 0 14px rgba(233, 50, 34, 0.55);
}

.footer-orb::before,
.footer-orb::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    padding: 0 clamp(22px, 4vw, 56px) 10px !important;
  }

  .footer-inner {
    position: relative;
    display: grid !important;
    grid-template-columns: auto 1fr 1fr 1fr 1fr;
    column-gap: clamp(18px, 3.5vw, 52px) !important;
    min-height: 34px;
    padding: 0 16px;
    overflow: hidden;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
  }

  .footer-inner::after {
    content: "";
    display: block !important;
    position: absolute;
    top: 0;
    left: var(--footer-light-x, -20%);
    z-index: 1;
    width: 160px;
    height: 100%;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(233, 50, 34, 0.08),
        rgba(255, 255, 255, 0.78),
        transparent
      );
    transform: skewX(-18deg);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .footer-inner:hover::after {
    opacity: 1;
  }

  .footer-inner:hover {
    transform: translateY(-3px) !important;
    box-shadow:
      0 28px 74px rgba(0, 0, 0, 0.20),
      0 12px 30px rgba(0, 0, 0, 0.11) !important;
  }

  .footer-inner > * {
    position: relative;
    z-index: 2;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: clamp(8.5px, 0.78vw, 10.5px) !important;
    transition:
      color 0.24s ease,
      transform 0.24s ease,
      letter-spacing 0.24s ease;
  }

  .footer-inner p:hover,
  .footer-inner a:hover {
    color: #E93222 !important;
    transform: translateY(-2px) !important;
    letter-spacing: -0.015em !important;
  }

  .footer-orb {
    width: 18px !important;
    height: 18px !important;
    transition:
      transform 0.3s ease,
      border-color 0.3s ease;
  }

  .footer-orb::before,
  .footer-orb::after {
    content: "";
    display: block !important;
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(233, 50, 34, 0);
    border-radius: 50%;
    transition:
      inset 0.3s ease,
      border-color 0.3s ease;
  }

  .footer-inner:hover .footer-orb {
    transform: rotate(180deg) scale(1.08);
    border-color: rgba(233, 50, 34, 0.5);
  }

  .footer-inner:hover .footer-orb::before {
    inset: -13px;
    border-color: rgba(233, 50, 34, 0.36);
  }

  .footer-inner:hover .footer-orb::after {
    inset: -20px;
    border-color: rgba(233, 50, 34, 0.16);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page-loader {
    display: grid !important;
  }

  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    padding: 0 28px 10px !important;
    margin-top: 34px;
  }

  .footer-inner {
    display: grid !important;
    grid-template-columns: auto 1fr 1fr 1fr 1fr;
    column-gap: 18px !important;
    min-height: 32px;
    padding: 0 12px;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 9.2px !important;
    font-weight: 800;
  }

  .footer-orb {
    display: inline-flex !important;
    width: 17px !important;
    height: 17px !important;
  }

  .footer-orb span {
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 767px) {
  .page-loader {
    display: grid !important;
  }

  .site-footer {
    position: sticky !important;
    bottom: 8px !important;
    z-index: 35;
    padding: 0 14px 8px !important;
    margin-top: 28px;
    background: transparent !important;
  }

  .footer-inner {
    display: grid !important;
    grid-template-columns: auto max-content max-content max-content max-content;
    justify-content: space-between;
    align-items: center;
    column-gap: 10px !important;

    min-height: 30px;
    padding: 0 9px;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .footer-inner::-webkit-scrollbar {
    display: none;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 8px !important;
    font-weight: 800;
    letter-spacing: -0.018em !important;
  }

  .footer-orb {
    display: inline-flex !important;
    width: 15px !important;
    height: 15px !important;
  }

  .footer-orb span {
    width: 4.5px;
    height: 4.5px;
  }
}

@media (max-width: 479px) {
  .page-loader {
    display: grid !important;
  }

  .site-footer {
    position: sticky !important;
    bottom: 8px !important;
    padding: 0 10px 8px !important;
  }

  .footer-inner {
    display: grid !important;
    grid-template-columns: auto max-content max-content max-content max-content;
    justify-content: space-between;
    min-height: 28px;
    padding: 0 7px;
    column-gap: 8px !important;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 7.1px !important;
  }

  .footer-orb {
    width: 13px !important;
    height: 13px !important;
  }

  .footer-orb span {
    width: 4px;
    height: 4px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    z-index: 35 !important;
    padding: 0 clamp(22px, 4vw, 56px) 10px !important;
    margin-top: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  .footer-inner {
    pointer-events: auto !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;

    gap: clamp(28px, 4.8vw, 72px) !important;
    min-height: 36px !important;
    padding: 0 18px !important;

    border: 1px solid #c7c7c7 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.10),
      0 7px 18px rgba(0, 0, 0, 0.07) !important;

    overflow: hidden !important;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease !important;
  }

  .footer-inner::before {
    display: none !important;
    content: none !important;
  }

  .footer-inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: var(--footer-light-x, -20%) !important;
    z-index: 1 !important;
    width: 160px !important;
    height: 100% !important;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(233, 50, 34, 0.08),
        rgba(255, 255, 255, 0.78),
        transparent
      ) !important;
    transform: skewX(-18deg) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
  }

  .footer-inner:hover::after {
    opacity: 1 !important;
  }

  .footer-inner:hover {
    transform: translateY(-3px) !important;
    box-shadow:
      0 28px 74px rgba(0, 0, 0, 0.20),
      0 12px 30px rgba(0, 0, 0, 0.11) !important;
  }

  .footer-inner > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .footer-inner p,
  .footer-inner a {
    margin: 0 !important;
    font-size: clamp(10px, 0.9vw, 12px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    color: #111111 !important;
    transition:
      color 0.24s ease,
      transform 0.24s ease,
      letter-spacing 0.24s ease !important;
  }

  .footer-brand,
  .footer-social {
    color: rgba(17, 17, 17, 0.46) !important;
  }

  .footer-inner p:hover,
  .footer-inner a:hover {
    color: #E93222 !important;
    transform: translateY(-2px) !important;
    letter-spacing: -0.015em !important;
  }

  .footer-orb {
    display: inline-flex !important;
    position: relative !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;

    padding: 0 !important;
    border: 1px solid #c7c7c7 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    transition:
      transform 0.3s ease,
      border-color 0.3s ease !important;
  }

  .footer-orb span {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #E93222 !important;
    box-shadow: 0 0 14px rgba(233, 50, 34, 0.55) !important;
  }

  .footer-orb::before,
  .footer-orb::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -8px !important;
    border: 1px solid rgba(233, 50, 34, 0) !important;
    border-radius: 50% !important;
    transition:
      inset 0.3s ease,
      border-color 0.3s ease !important;
  }

  .footer-inner:hover .footer-orb {
    transform: rotate(180deg) scale(1.08) !important;
    border-color: rgba(233, 50, 34, 0.5) !important;
  }

  .footer-inner:hover .footer-orb::before {
    inset: -13px !important;
    border-color: rgba(233, 50, 34, 0.36) !important;
  }

  .footer-inner:hover .footer-orb::after {
    inset: -20px !important;
    border-color: rgba(233, 50, 34, 0.16) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    z-index: 35 !important;
    padding: 0 28px 10px !important;
    margin-top: 34px !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  .footer-inner {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;

    gap: 14px !important;
    min-height: 31px !important;
    padding: 0 11px !important;

    border: 1px solid #c7c7c7 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.10),
      0 7px 18px rgba(0, 0, 0, 0.07) !important;

    overflow: hidden !important;
    transform: none !important;
  }

  .footer-inner::before,
  .footer-inner::after,
  .footer-orb,
  .footer-orb::before,
  .footer-orb::after,
  .footer-orb span {
    display: none !important;
    content: none !important;
  }

  .footer-inner:hover {
    transform: none !important;
  }

  .footer-inner p,
  .footer-inner a {
    margin: 0 !important;
    flex: 0 1 auto !important;
    color: #111111 !important;
    font-size: 9.2px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .footer-brand,
  .footer-social {
    color: rgba(17, 17, 17, 0.46) !important;
  }
}

@media (max-width: 767px) {
  .site-footer {
    position: sticky !important;
    bottom: 8px !important;
    z-index: 35 !important;
    padding: 0 14px 8px !important;
    margin-top: 28px !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  .footer-inner {
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;

    gap: 11px !important;
    min-height: 29px !important;
    padding: 0 9px !important;

    border: 1px solid #c7c7c7 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.10),
      0 7px 18px rgba(0, 0, 0, 0.07) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
  }

  .footer-inner::-webkit-scrollbar {
    display: none !important;
  }

  .footer-inner::before,
  .footer-inner::after,
  .footer-orb,
  .footer-orb::before,
  .footer-orb::after,
  .footer-orb span {
    display: none !important;
    content: none !important;
  }

  .footer-inner p,
  .footer-inner a {
    margin: 0 !important;
    flex: 0 0 auto !important;
    color: #111111 !important;
    font-size: 8.4px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  .footer-brand,
  .footer-social {
    color: rgba(17, 17, 17, 0.46) !important;
  }
}

@media (max-width: 479px) {
  .site-footer {
    position: sticky !important;
    bottom: 8px !important;
    padding: 0 10px 8px !important;
  }

  .footer-inner {
    min-height: 28px !important;
    gap: 10px !important;
    padding: 0 8px !important;
  }

  .footer-inner p,
  .footer-inner a {
    font-size: 7.8px !important;
  }
}

@media (max-width: 767px) {
  body .site-header > .mark {
    top: 14px !important;
    left: 14px !important;
    width: 36px !important;
    height: 36px !important;
  }

  body .site-header > .main-nav {
    top: 14px !important;
    right: 14px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 4px 9px !important;
    gap: 9px !important;
    align-items: center !important;
  }

  body .site-header > .main-nav a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  body .site-header > .main-nav a[href$="moodboard.html"] {
    display: inline-flex !important;
  }
}

@media (max-width: 479px) {
  body .site-header > .mark {
    top: 12px !important;
    left: 12px !important;
    width: 34px !important;
    height: 34px !important;
  }

  body .site-header > .main-nav {
    top: 12px !important;
    right: 12px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 8px !important;
    gap: 7px !important;
  }

  body .site-header > .main-nav a {
    font-size: 10px !important;
    min-height: 24px !important;
  }
}

@media (min-width: 1280px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    z-index: 35 !important;
    padding: 0 clamp(22px, 4vw, 56px) 10px !important;
    margin-top: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  .footer-inner {
    pointer-events: auto !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;

    gap: clamp(46px, 6vw, 120px) !important;
    min-height: 42px !important;
    padding: 0 clamp(16px, 2vw, 28px) !important;

    border: 1px solid #c7c7c7 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow:
      0 16px 42px rgba(0, 0, 0, 0.10),
      0 7px 18px rgba(0, 0, 0, 0.07) !important;

    overflow: hidden !important;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease !important;
  }

  .footer-inner::before {
    display: none !important;
    content: none !important;
  }

  .footer-inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: var(--footer-light-x, -20%) !important;
    z-index: 1 !important;
    width: 180px !important;
    height: 100% !important;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(233, 50, 34, 0.08),
        rgba(255, 255, 255, 0.78),
        transparent
      ) !important;
    transform: skewX(-18deg) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
  }

  .footer-inner:hover::after {
    opacity: 1 !important;
  }

  .footer-inner:hover {
    transform: translateY(-3px) !important;
    box-shadow:
      0 28px 74px rgba(0, 0, 0, 0.20),
      0 12px 30px rgba(0, 0, 0, 0.11) !important;
  }

  .footer-inner > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .footer-inner p,
  .footer-inner a {
    margin: 0 !important;
    font-size: clamp(11px, 0.8vw, 14px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    color: #111111 !important;
    transition:
      color 0.24s ease,
      transform 0.24s ease,
      letter-spacing 0.24s ease !important;
  }

  .footer-brand,
  .footer-social {
    color: rgba(17, 17, 17, 0.46) !important;
  }

  .footer-inner p:hover,
  .footer-inner a:hover {
    color: #E93222 !important;
    transform: translateY(-2px) !important;
    letter-spacing: -0.015em !important;
  }

  .footer-orb {
    display: inline-flex !important;
    position: relative !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;

    width: 19px !important;
    height: 19px !important;

    padding: 0 !important;
    border: 1px solid #c7c7c7 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    transition:
      transform 0.3s ease,
      border-color 0.3s ease !important;
  }

  .footer-orb span {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #E93222 !important;
    box-shadow: 0 0 14px rgba(233, 50, 34, 0.55) !important;
  }

  .footer-orb::before,
  .footer-orb::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -8px !important;
    border: 1px solid rgba(233, 50, 34, 0) !important;
    border-radius: 50% !important;
    transition:
      inset 0.3s ease,
      border-color 0.3s ease !important;
  }

  .footer-inner:hover .footer-orb {
    transform: rotate(180deg) scale(1.08) !important;
    border-color: rgba(233, 50, 34, 0.5) !important;
  }

  .footer-inner:hover .footer-orb::before {
    inset: -14px !important;
    border-color: rgba(233, 50, 34, 0.36) !important;
  }

  .footer-inner:hover .footer-orb::after {
    inset: -22px !important;
    border-color: rgba(233, 50, 34, 0.16) !important;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-nav-height: 36px;
    --mobile-nav-top: 14px;
    --mobile-nav-side: 14px;
  }

  body .site-header > .mark {
    top: var(--mobile-nav-top) !important;
    left: var(--mobile-nav-side) !important;
    width: var(--mobile-nav-height) !important;
    height: var(--mobile-nav-height) !important;
    min-width: var(--mobile-nav-height) !important;
    min-height: var(--mobile-nav-height) !important;
    max-width: var(--mobile-nav-height) !important;
    max-height: var(--mobile-nav-height) !important;
  }

  body .site-header > .main-nav {
    top: var(--mobile-nav-top) !important;
    right: var(--mobile-nav-side) !important;
    height: var(--mobile-nav-height) !important;
    min-height: var(--mobile-nav-height) !important;
    max-height: var(--mobile-nav-height) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .site-header > .main-nav a {
    height: calc(var(--mobile-nav-height) - 10px) !important;
    min-height: calc(var(--mobile-nav-height) - 10px) !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

@media (max-width: 479px) {
  :root {
    --mobile-nav-height: 34px;
    --mobile-nav-top: 12px;
    --mobile-nav-side: 12px;
  }

  body .site-header > .mark {
    width: var(--mobile-nav-height) !important;
    height: var(--mobile-nav-height) !important;
  }

  body .site-header > .main-nav {
    height: var(--mobile-nav-height) !important;
    min-height: var(--mobile-nav-height) !important;
    max-height: var(--mobile-nav-height) !important;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    z-index: 35 !important;
    padding: 0 clamp(22px, 4vw, 56px) 10px !important;
    margin-top: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  .footer-inner {
    pointer-events: auto !important;
    position: relative !important;

    display: grid !important;
    grid-template-columns: auto auto auto 1fr auto !important;
    align-items: center !important;

    gap: clamp(44px, 6.8vw, 110px) !important;
    min-height: 46px !important;
    padding: 0 clamp(14px, 2.2vw, 34px) !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 0 !important;

    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;

    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.18),
      0 12px 28px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    overflow: hidden !important;

    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease !important;
  }

  .footer-inner::before {
    display: none !important;
    content: none !important;
  }

  .footer-inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: var(--footer-light-x, -20%) !important;
    z-index: 1 !important;
    width: 180px !important;
    height: 100% !important;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(233, 50, 34, 0.08),
        rgba(255, 255, 255, 0.78),
        transparent
      ) !important;
    transform: skewX(-18deg) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
  }

  .footer-inner:hover::after {
    opacity: 1 !important;
  }

  .footer-inner:hover {
    transform: translateY(-3px) !important;
    box-shadow:
      0 32px 88px rgba(0, 0, 0, 0.22),
      0 14px 32px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  .footer-inner > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .footer-inner p,
  .footer-inner a {
    margin: 0 !important;
    color: #111111 !important;

    font-size: clamp(13px, 1.08vw, 18px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.065em !important;
    white-space: nowrap !important;

    text-decoration: none !important;
    opacity: 1 !important;

    transition:
      transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.25s ease,
      color 0.25s ease,
      letter-spacing 0.25s ease !important;
  }

  .footer-brand,
  .footer-social {
    color: rgba(17, 17, 17, 0.34) !important;
  }

  .footer-social {
    justify-self: end !important;
  }

  .footer-inner p:hover,
  .footer-inner a:hover,
  .footer-brand:hover,
  .footer-social:hover {
    color: #E93222 !important;
    letter-spacing: -0.02em !important;
    transform: translateY(-2px) !important;
    opacity: 1 !important;
  }

  .footer-orb {
    display: inline-flex !important;
    position: relative !important;

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

    width: 24px !important;
    height: 24px !important;

    padding: 0 !important;
    border: 1px solid rgba(17, 17, 17, 0.26) !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    transition:
      transform 0.3s ease,
      border-color 0.3s ease !important;
  }

  .footer-orb span {
    display: block !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;
    background: #E93222 !important;

    box-shadow: 0 0 16px rgba(233, 50, 34, 0.45) !important;
    transform: translate(-50%, -50%) !important;
  }

  .footer-orb::before,
  .footer-orb::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -8px !important;

    border: 1px solid rgba(233, 50, 34, 0) !important;
    border-radius: 50% !important;

    transition:
      inset 0.3s ease,
      border-color 0.3s ease,
      opacity 0.3s ease !important;
  }

  .footer-inner:hover .footer-orb {
    transform: rotate(180deg) scale(1.08) !important;
    border-color: rgba(233, 50, 34, 0.5) !important;
  }

  .footer-inner:hover .footer-orb::before {
    inset: -14px !important;
    border-color: rgba(233, 50, 34, 0.36) !important;
  }

  .footer-inner:hover .footer-orb::after {
    inset: -22px !important;
    border-color: rgba(233, 50, 34, 0.16) !important;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
    z-index: 35 !important;
    padding: 0 clamp(22px, 4vw, 56px) 10px !important;
    margin-top: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  .footer-inner {
    pointer-events: auto !important;
    position: relative !important;
    overflow: hidden !important;

    display: grid !important;
    grid-template-columns: auto auto auto 1fr auto !important;
    align-items: center !important;

    gap: clamp(44px, 6.8vw, 110px) !important;
    min-height: 46px !important;
    padding: 0 clamp(14px, 2.2vw, 34px) !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 0 !important;

    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;

    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.18),
      0 12px 28px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;

    transform: translateY(0) !important;
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease !important;
  }

  .footer-inner::before {
    display: none !important;
    content: none !important;
  }

  .footer-inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: var(--footer-light-x, -20%) !important;
    z-index: 1 !important;
    width: 180px !important;
    height: 100% !important;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(233, 50, 34, 0.08),
        rgba(255, 255, 255, 0.78),
        transparent
      ) !important;
    transform: skewX(-18deg) !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
  }

  .footer-inner:hover::after {
    opacity: 1 !important;
  }

  .footer-inner:hover {
    transform: translateY(-3px) !important;
    box-shadow:
      0 32px 88px rgba(0, 0, 0, 0.22),
      0 14px 32px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  }

  .footer-inner > * {
    position: relative !important;
    z-index: 2 !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-item,
  .footer-brand,
  .footer-social {
    margin: 0 !important;
    color: #111111 !important;

    font-size: clamp(13px, 1.08vw, 18px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.065em !important;
    white-space: nowrap !important;

    text-decoration: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;

    transition:
      transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.25s ease,
      color 0.25s ease,
      letter-spacing 0.25s ease !important;
  }

  .footer-brand,
  .footer-social {
    color: rgba(17, 17, 17, 0.34) !important;
  }

  .footer-social {
    justify-self: end !important;
  }

  .footer-item:hover,
  .footer-brand:hover,
  .footer-social:hover,
  .footer-scramble:hover {
    color: #E93222 !important;
    letter-spacing: -0.02em !important;
    transform: translateY(-2px) !important;
    opacity: 1 !important;
  }

  .footer-orb {
    display: inline-flex !important;
    position: relative !important;

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

    width: 24px !important;
    height: 24px !important;

    padding: 0 !important;
    border: 1px solid rgba(17, 17, 17, 0.26) !important;
    border-radius: 50% !important;

    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    cursor: pointer !important;

    transition:
      transform 0.3s ease,
      border-color 0.3s ease !important;
  }

  .footer-orb span {
    display: block !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;
    background: #E93222 !important;

    box-shadow: 0 0 16px rgba(233, 50, 34, 0.45) !important;
    transform: translate(-50%, -50%) !important;
  }

  .footer-orb::before,
  .footer-orb::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -8px !important;

    border: 1px solid rgba(233, 50, 34, 0) !important;
    border-radius: 50% !important;

    transition:
      inset 0.3s ease,
      border-color 0.3s ease,
      opacity 0.3s ease !important;
  }

  .footer-inner:hover .footer-orb {
    transform: rotate(180deg) scale(1.08) !important;
    border-color: rgba(233, 50, 34, 0.5) !important;
  }

  .footer-inner:hover .footer-orb::before {
    inset: -14px !important;
    border-color: rgba(233, 50, 34, 0.36) !important;
  }

  .footer-inner:hover .footer-orb::after {
    inset: -22px !important;
    border-color: rgba(233, 50, 34, 0.16) !important;
  }
}

@media (max-width: 1023px) {
  .footer-scramble {
    color: inherit !important;
  }
}

@media (min-width: 1024px) {
  .footer-inner {
    justify-content: start !important;
    grid-template-columns: auto auto auto auto auto !important;
    gap: clamp(34px, 5vw, 86px) !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-item,
  .footer-brand,
  .footer-social {
    font-size: clamp(11px, 0.82vw, 14px) !important;
    letter-spacing: -0.052em !important;
  }

  .footer-social {
    justify-self: start !important;
  }

  .footer-item:hover,
  .footer-brand:hover,
  .footer-social:hover,
  .footer-scramble:hover {
    letter-spacing: -0.018em !important;
  }
}

@media (min-width: 1280px) {
  .footer-inner {
    gap: clamp(40px, 5.4vw, 96px) !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-item,
  .footer-brand,
  .footer-social {
    font-size: clamp(11px, 0.78vw, 13.5px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    gap: clamp(28px, 4vw, 64px) !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-item,
  .footer-brand,
  .footer-social {
    font-size: clamp(10px, 0.82vw, 12px) !important;
  }
}

@media (min-width: 1024px) {
  .footer-inner {
    grid-template-columns: auto auto auto 1fr auto !important;
    justify-content: initial !important;
    gap: clamp(34px, 5vw, 86px) !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-item,
  .footer-brand,
  .footer-social {
    font-size: clamp(12px, 0.92vw, 15px) !important;
    letter-spacing: -0.055em !important;
  }

  .footer-social {
    justify-self: end !important;
  }

  .footer-inner:hover {
    transform: none !important;
  }

  .footer-item:hover,
  .footer-brand:hover,
  .footer-social:hover,
  .footer-scramble:hover {
    transform: translateY(-1px) !important;
    letter-spacing: -0.02em !important;
  }
}

@media (min-width: 1280px) {
  .footer-inner {
    gap: clamp(40px, 5.4vw, 96px) !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-item,
  .footer-brand,
  .footer-social {
    font-size: clamp(12px, 0.88vw, 15px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    gap: clamp(28px, 4vw, 64px) !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-item,
  .footer-brand,
  .footer-social {
    font-size: clamp(11px, 0.9vw, 13px) !important;
  }
}

@media (max-width: 1023px) {
  .footer-inner:hover {
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  .footer-inner {
    grid-template-columns: auto auto 1fr auto 1fr auto !important;
  }

  .footer-orb {
    grid-column: 1 !important;
  }

  .footer-inner > p:nth-of-type(1) {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(2) {
    grid-column: 3 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(3) {
    grid-column: 4 !important;
    justify-self: center !important;
    text-align: center !important;
  }

  .footer-social {
    grid-column: 6 !important;
    justify-self: end !important;
    text-align: right !important;
  }
}

@media (max-width: 1023px) {
  .footer-inner > p:nth-of-type(3) {
    text-align: center !important;
  }
}

@media (min-width: 1024px) {
  .footer-inner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto auto auto 1fr auto !important;
    align-items: center !important;
    column-gap: clamp(28px, 3.8vw, 62px) !important;
  }

  .footer-orb {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(1) {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(2) {
    grid-column: 3 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(3) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    justify-self: center !important;
    white-space: nowrap !important;
  }

  .footer-inner > p:nth-of-type(3):hover {
    transform: translate(-50%, calc(-50% - 1px)) !important;
  }

  .footer-social {
    grid-column: 5 !important;
    justify-self: end !important;
    text-align: right !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    column-gap: clamp(22px, 3vw, 48px) !important;
  }
}

@media (min-width: 768px) {
  .footer-inner {
    position: relative !important;
  }

  .footer-inner > p:nth-of-type(3) {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;

    width: max-content !important;
    margin: 0 !important;

    justify-self: unset !important;
    align-self: unset !important;
    text-align: center !important;
    white-space: nowrap !important;

    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
  }

  .footer-inner > p:nth-of-type(3):hover {
    transform: translate(-50%, calc(-50% - 1px)) !important;
  }

  .footer-social {
    margin-left: auto !important;
    justify-self: end !important;
  }
}

@media (max-width: 767px) {
  .footer-inner > p:nth-of-type(3) {
    position: static !important;
    transform: none !important;
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .site-footer {
    position: sticky !important;
    bottom: 10px !important;
  }

  .footer-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .footer-orb,
  .footer-inner > p:nth-of-type(1),
  .footer-inner > p:nth-of-type(2) {
    flex: 0 0 auto !important;
  }

  .footer-designed,
  .footer-inner > p:nth-of-type(3) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;

    width: max-content !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: unset !important;
    align-self: unset !important;
    text-align: center !important;
    white-space: nowrap !important;

    transform: translate(-50%, -50%) !important;
    z-index: 20 !important;
  }

  .footer-designed:hover,
  .footer-inner > p:nth-of-type(3):hover {
    transform: translate(-50%, -50%) !important;
  }

  .footer-social {
    margin-left: auto !important;
    justify-self: unset !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 767px) {
  .footer-designed,
  .footer-inner > p:nth-of-type(3) {
    position: static !important;
    transform: none !important;
    width: auto !important;
  }
}

@media (min-width: 768px) {
  .footer-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .footer-orb,
  .footer-inner > p:nth-of-type(1),
  .footer-inner > p:nth-of-type(2) {
    flex: 0 0 auto !important;
  }

  .footer-designed,
  .footer-inner > p:nth-of-type(3) {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    z-index: 20 !important;
  }

  .footer-designed:hover,
  .footer-inner > p:nth-of-type(3):hover {
    transform: translate(-50%, -50%) !important;
  }

  .footer-social {
    position: absolute !important;
    right: clamp(14px, 2.2vw, 34px) !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    justify-self: unset !important;
    text-align: right !important;
    z-index: 21 !important;
  }

  .footer-social:hover {
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 767px) {
  .footer-social {
    position: static !important;
    transform: none !important;
    margin-left: 0 !important;
  }
}

@media (min-width: 768px) {
  .footer-social {
    position: absolute !important;
    right: clamp(14px, 2.2vw, 34px) !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: right !important;
    vertical-align: middle !important;
  }

  .footer-social:hover {
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 767px) {
  .footer-social {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

@media (min-width: 768px) {
  .footer-inner {
    position: relative !important;
    align-items: center !important;
  }

  .footer-social {
    position: absolute !important;
    right: clamp(14px, 2.2vw, 34px) !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;

    height: 100% !important;
    min-height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    text-align: right !important;
    vertical-align: middle !important;

    transform: none !important;
  }

  .footer-social:hover,
  .footer-social.footer-scramble:hover {
    transform: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer-social {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .footer-social {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer .footer-inner {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
    align-items: center !important;
    gap: 0 20px !important;
    padding: 14px 18px !important;
  }

  .site-footer .footer-left {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    grid-column: 1 !important;
  }

  .site-footer .footer-left > * {
    white-space: nowrap !important;
  }

  .site-footer .footer-left .footer-scramble {
    margin: 0 auto !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .site-footer .footer-left .footer-legal-links {
    margin-left: auto !important;
  }

  .site-footer .footer-designed {
    position: static !important;
    transform: none !important;
    justify-self: center !important;
    align-self: center !important;
    grid-column: 2 !important;
    width: auto !important;
  }

  .site-footer .footer-social {
    position: static !important;
    transform: none !important;
    justify-self: end !important;
    align-self: center !important;
    grid-column: 3 !important;
    margin-left: 0 !important;
  }
}

.legal-page {
  padding: clamp(120px, 12vw, 170px) clamp(18px, 4vw, 56px) clamp(36px, 6vw, 90px);
}

.legal-hero {
  display: grid;
  align-content: end;
  min-height: 52vh;
  padding-bottom: clamp(34px, 5vw, 74px);
  border-bottom: 1px solid var(--line);
}

.legal-hero h1 {
  margin: 0;
  font-size: clamp(58px, 12vw, 210px);
  line-height: 0.78;
  font-weight: 500;
  letter-spacing: -0.12em;
  text-transform: uppercase;
}

.legal-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 24px 0 0 auto;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1;
}

.legal-content {
  max-width: 1180px;
  margin-left: auto;
  padding-top: 28px;
}

.legal-block {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(26px, 4vw, 56px) 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.18);
}

.legal-block > span {
  color: #E93222;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.legal-block h2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 4vw, 64px);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.legal-block p {
  max-width: 820px;
  margin: 0 0 12px;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.25;
}

.legal-table {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 0.7fr;
  margin-top: 18px;
  border-top: 1px solid #111111;
  border-left: 1px solid #111111;
}

.legal-table div {
  padding: 10px;
  border-right: 1px solid #111111;
  border-bottom: 1px solid #111111;
  font-size: 13px;
  line-height: 1.2;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-legal-links a,
.footer-legal-links button,
.legal-mobile-bottom a,
.legal-mobile-bottom button {
  border: 0;
  background: transparent;
  color: rgba(17, 17, 17, 0.46) !important;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.footer-legal-links a:hover,
.footer-legal-links button:hover,
.legal-mobile-bottom a:hover,
.legal-mobile-bottom button:hover {
  color: #E93222 !important;
}

.legal-mobile-bottom {
  display: none;
}

@media (min-width: 1024px) {
  .footer-legal-links {
    position: absolute;
    right: clamp(92px, 10vw, 190px);
    top: 0;
    bottom: 0;
    height: 100%;
    align-items: center;
    z-index: 22;
  }

  .footer-legal-links a,
  .footer-legal-links button {
    font-size: clamp(9px, 0.62vw, 11px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
  }
}

@media (max-width: 1023px) {
  .footer-legal-links {
    display: none !important;
  }

  .legal-mobile-bottom {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 18px 14px 28px;
  }

  .legal-mobile-bottom a,
  .legal-mobile-bottom button {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

.cookie-banner {
  position: fixed;
  left: clamp(14px, 3vw, 32px);
  right: clamp(14px, 3vw, 32px);
  bottom: clamp(14px, 3vw, 32px);
  z-index: 5000;
  display: none;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid #c7c7c7;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16), 0 12px 28px rgba(0, 0, 0, 0.09);
}

.cookie-banner.is-visible {
  display: grid;
}

.cookie-banner__label {
  margin: 0 0 4px !important;
  color: #E93222;
  font-size: 11px !important;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cookie-banner__copy p {
  margin: 0;
  max-width: 900px;
  font-size: 13px;
  line-height: 1.25;
}

.cookie-banner__copy a {
  text-decoration: underline;
}

.cookie-banner__actions,
.cookie-modal__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.cookie-btn {
  min-height: 34px;
  padding: 9px 12px;
  border: 1px solid #111111;
  background: rgba(255, 255, 255, 0.45);
  color: #111111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.cookie-btn--solid {
  background: #111111;
  color: #f5f4ef;
}

.cookie-btn:hover {
  background: #E93222;
  color: #111111;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 5010;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(17, 17, 17, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cookie-modal.is-visible {
  display: grid;
}

.cookie-modal__panel {
  width: min(720px, 100%);
  border: 1px solid #111111;
  background: rgba(245, 244, 239, 0.94);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
  padding: 18px;
}

.cookie-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.cookie-modal__header h2 {
  margin: 0;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.88;
  letter-spacing: -0.09em;
  text-transform: uppercase;
}

.cookie-modal__close {
  width: 34px;
  height: 34px;
  border: 1px solid #111111;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.cookie-choice-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.16);
}

.cookie-choice-row h3 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: -0.04em;
}

.cookie-choice-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.cookie-choice-row span {
  padding: 7px 9px;
  border: 1px solid #111111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cookie-choice-row input {
  width: 22px;
  height: 22px;
  accent-color: #E93222;
}

.cookie-modal__actions {
  margin-top: 16px;
}

.legal-cookie-open {
  margin-top: 10px;
}

@media (max-width: 767px) {
  .legal-page {
    padding: 104px 18px 56px;
  }

  .legal-hero {
    min-height: auto;
    padding: 72px 0 42px;
  }

  .legal-hero h1 {
    font-size: clamp(50px, 17vw, 88px);
  }

  .legal-hero p:not(.eyebrow) {
    margin-left: 0;
    font-size: 22px;
  }

  .legal-content {
    margin-left: 0;
  }

  .legal-block {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .legal-table {
    grid-template-columns: 1fr;
  }

  .cookie-banner {
    grid-template-columns: 1fr;
    bottom: 12px;
  }

  .cookie-banner__actions,
  .cookie-modal__actions {
    justify-content: stretch;
  }

  .cookie-btn {
    flex: 1;
  }

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



/* Desktop footer legal-link placement fix
   Places Privacy / Cookies / Settings between
   "All rights reserved." and "Designed by STAR STUDIO".
*/

@media (min-width: 1024px) {
  .footer-inner {
    display: grid !important;
    grid-template-columns: auto auto auto auto 1fr auto auto !important;
    align-items: center !important;
    column-gap: clamp(18px, 2.4vw, 40px) !important;
  }

  .footer-orb {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(1) {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(2) {
    grid-column: 3 !important;
    justify-self: start !important;
  }

  .footer-legal-links {
    position: static !important;
    grid-column: 4 !important;
    justify-self: start !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 1vw, 14px) !important;
    margin: 0 !important;
    transform: none !important;
    height: auto !important;
  }

  .footer-legal-links a,
  .footer-legal-links button {
    font-size: clamp(8.5px, 0.58vw, 10.5px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.018em !important;
    color: rgba(17, 17, 17, 0.46) !important;
    white-space: nowrap !important;
  }

  .footer-legal-links a:hover,
  .footer-legal-links button:hover {
    color: #E93222 !important;
  }

  .footer-designed,
  .footer-inner > p:nth-of-type(3) {
    position: static !important;
    grid-column: 6 !important;
    justify-self: center !important;
    align-self: center !important;
    transform: none !important;
    width: auto !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .footer-designed:hover,
  .footer-inner > p:nth-of-type(3):hover {
    transform: translateY(-1px) !important;
  }

  .footer-social {
    position: static !important;
    grid-column: 7 !important;
    justify-self: end !important;
    align-self: center !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-align: right !important;
    margin: 0 !important;
  }

  .footer-social:hover {
    transform: none !important;
  }
}

/* Laptop keeps the same order but tighter spacing */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    column-gap: clamp(12px, 1.7vw, 24px) !important;
  }

  .footer-legal-links {
    gap: 8px !important;
  }

  .footer-legal-links a,
  .footer-legal-links button {
    font-size: 8px !important;
  }
}



/* Footer height preservation fix
   Keeps the desktop footer at the same height as before the legal-link placement fix.
   Legal links are made compact so they fit inside the existing footer height.
*/

@media (min-width: 1024px) {
  .footer-inner {
    min-height: 46px !important;
    height: 46px !important;
    max-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-inner button,
  .footer-item,
  .footer-brand,
  .footer-social,
  .footer-legal-links a,
  .footer-legal-links button {
    line-height: 1 !important;
  }

  .footer-legal-links {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .footer-legal-links a,
  .footer-legal-links button {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
  }
}

/* Laptop keeps the same fixed footer height too */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    min-height: 46px !important;
    height: 46px !important;
    max-height: 46px !important;
  }
}



/* Footer one-line alignment fix
   Forces all desktop/laptop footer items onto the same visual baseline:
   orb, copyright, rights, legal links, designed-by, Instagram.
*/

@media (min-width: 1024px) {
  .footer-inner {
    display: grid !important;
    grid-template-columns: auto auto auto auto 1fr auto auto !important;
    align-items: center !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    column-gap: clamp(12px, 1.8vw, 30px) !important;
    overflow: hidden !important;
  }

  .footer-orb,
  .footer-inner > p,
  .footer-legal-links,
  .footer-social {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .footer-orb {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(1) {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  .footer-inner > p:nth-of-type(2) {
    grid-column: 3 !important;
    justify-self: start !important;
  }

  .footer-legal-links {
    grid-column: 4 !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(8px, 1vw, 14px) !important;
    height: 46px !important;
    line-height: 1 !important;
  }

  .footer-designed,
  .footer-inner > p:nth-of-type(3) {
    grid-column: 6 !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .footer-social {
    grid-column: 7 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    line-height: 1 !important;
    text-align: right !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-inner button,
  .footer-legal-links a,
  .footer-legal-links button,
  .footer-brand,
  .footer-social {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }

  .footer-designed:hover,
  .footer-inner > p:nth-of-type(3):hover,
  .footer-social:hover,
  .footer-legal-links a:hover,
  .footer-legal-links button:hover {
    transform: none !important;
  }
}

/* Tablet/mobile footer remains the previous bottom-links behavior */
@media (max-width: 1023px) {
  .footer-inner {
    align-items: center !important;
  }
}



/* Footer visible one-line final fix
   Makes every desktop/laptop footer item visible on one single line:
   orb | copyright | rights | privacy | cookie policy | cookies | designed-by | instagram
*/

@media (min-width: 1024px) {
  .footer-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    gap: clamp(14px, 1.75vw, 30px) !important;
    padding: 0 clamp(14px, 1.8vw, 28px) !important;
    overflow: hidden !important;
  }

  .footer-orb,
  .footer-inner > p,
  .footer-legal-links,
  .footer-social,
  .footer-brand {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    grid-column: auto !important;
    justify-self: auto !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .footer-orb {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
  }

  .footer-inner > p:nth-of-type(1),
  .footer-inner > p:nth-of-type(2),
  .footer-designed,
  .footer-inner > p:nth-of-type(3) {
    flex: 0 0 auto !important;
  }

  .footer-legal-links {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(8px, 0.85vw, 14px) !important;
    height: 46px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .footer-designed,
  .footer-inner > p:nth-of-type(3) {
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    text-align: left !important;
    white-space: nowrap !important;
    margin-left: auto !important;
  }

  .footer-social {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 46px !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-inner button,
  .footer-legal-links a,
  .footer-legal-links button,
  .footer-brand,
  .footer-social {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    font-size: clamp(9px, 0.68vw, 12px) !important;
    letter-spacing: -0.035em !important;
  }

  .footer-legal-links a,
  .footer-legal-links button {
    color: rgba(17, 17, 17, 0.50) !important;
    font-weight: 800 !important;
  }

  .footer-designed:hover,
  .footer-inner > p:nth-of-type(3):hover,
  .footer-social:hover,
  .footer-legal-links a:hover,
  .footer-legal-links button:hover {
    transform: none !important;
  }
}

/* Slightly tighter laptop footer so every item stays visible */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    gap: clamp(9px, 1.1vw, 18px) !important;
    padding: 0 14px !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-inner button,
  .footer-legal-links a,
  .footer-legal-links button,
  .footer-brand,
  .footer-social {
    font-size: clamp(8px, 0.74vw, 10px) !important;
    letter-spacing: -0.025em !important;
  }

  .footer-legal-links {
    gap: 7px !important;
  }
}

/* Very narrow desktop/laptop fallback */
@media (min-width: 1024px) and (max-width: 1120px) {
  .footer-legal-links a:nth-child(1) {
    font-size: 0 !important;
  }

  .footer-legal-links a:nth-child(1)::after {
    content: "Privacy";
    font-size: 8px;
  }

  .footer-legal-links a:nth-child(2) {
    font-size: 0 !important;
  }

  .footer-legal-links a:nth-child(2)::after {
    content: "Cookie Policy";
    font-size: 8px;
  }
}



/* Footer final typography + centered Designed by
   - Main footer text returns to the previous larger font size.
   - Legal links stay smaller so everything still fits.
   - Designed by STAR STUDIO is visually centered in the footer.
   - Instagram stays visible on the right.
*/

@media (min-width: 1024px) {
  .footer-inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;

    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    gap: clamp(14px, 1.75vw, 30px) !important;
    padding: 0 clamp(14px, 1.8vw, 28px) !important;
    overflow: hidden !important;
  }

  .footer-orb {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    position: static !important;
    transform: none !important;
  }

  .footer-inner > p:nth-of-type(1),
  .footer-inner > p:nth-of-type(2) {
    position: static !important;
    flex: 0 0 auto !important;
    transform: none !important;
    margin: 0 !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .footer-legal-links {
    position: static !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(8px, 0.85vw, 14px) !important;
    height: 46px !important;
    margin: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
  }

  /* True visual center of footer */
  .footer-designed,
  .footer-inner > p:nth-of-type(3) {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: max-content !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 20 !important;
  }

  .footer-designed:hover,
  .footer-inner > p:nth-of-type(3):hover {
    transform: translateX(-50%) !important;
  }

  .footer-social {
    position: absolute !important;
    right: clamp(14px, 1.8vw, 28px) !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: max-content !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    transform: none !important;
    text-align: right !important;
    white-space: nowrap !important;
    z-index: 21 !important;
  }

  .footer-social:hover {
    transform: none !important;
  }

  /* Previous/larger font size for main footer text */
  .footer-inner > p:nth-of-type(1),
  .footer-inner > p:nth-of-type(2),
  .footer-designed,
  .footer-designed .footer-brand,
  .footer-inner > p:nth-of-type(3),
  .footer-inner > p:nth-of-type(3) .footer-brand,
  .footer-social {
    font-size: clamp(12px, 0.92vw, 15px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em !important;
  }

  /* Legal links stay smaller so the footer remains clean */
  .footer-legal-links a,
  .footer-legal-links button {
    font-size: clamp(8px, 0.56vw, 10px) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.018em !important;
    color: rgba(17, 17, 17, 0.50) !important;
  }
}

/* Laptop: slightly tighter but main text still bigger than legal links */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    gap: clamp(9px, 1.05vw, 16px) !important;
    padding: 0 14px !important;
  }

  .footer-inner > p:nth-of-type(1),
  .footer-inner > p:nth-of-type(2),
  .footer-designed,
  .footer-designed .footer-brand,
  .footer-inner > p:nth-of-type(3),
  .footer-inner > p:nth-of-type(3) .footer-brand,
  .footer-social {
    font-size: clamp(10px, 0.86vw, 12.5px) !important;
  }

  .footer-legal-links {
    gap: 7px !important;
  }

  .footer-legal-links a,
  .footer-legal-links button {
    font-size: 7.5px !important;
  }
}



/* Footer no-overlap structure
   Groups the left footer content, centers Designed by STAR STUDIO in its own grid column,
   and keeps Instagram on the right. Nothing is absolutely positioned, so items cannot overlap.
*/

@media (min-width: 1024px) {
  .footer-inner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(16px, 2.2vw, 34px) !important;

    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 clamp(14px, 1.8vw, 28px) !important;
    overflow: hidden !important;
  }

  .footer-left {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(12px, 1.55vw, 26px) !important;
    min-width: 0 !important;
    height: 46px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .footer-orb,
  .footer-left > p,
  .footer-legal-links,
  .footer-designed,
  .footer-social {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
  }

  .footer-orb {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
  }

  .footer-left > p {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 46px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .footer-legal-links {
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(7px, 0.8vw, 12px) !important;
    height: 46px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .footer-designed,
  .footer-inner > p.footer-designed {
    grid-column: 2 !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    width: max-content !important;
    max-width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 2 !important;
  }

  .footer-social {
    grid-column: 3 !important;
    justify-self: end !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 46px !important;
    width: max-content !important;
    max-width: 100% !important;
    text-align: right !important;
    white-space: nowrap !important;
    z-index: 2 !important;
  }

  .footer-inner p,
  .footer-inner a,
  .footer-inner button,
  .footer-brand,
  .footer-social {
    line-height: 1 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }

  .footer-left > p,
  .footer-designed,
  .footer-designed .footer-brand,
  .footer-social {
    font-size: clamp(12px, 0.92vw, 15px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em !important;
  }

  .footer-legal-links a,
  .footer-legal-links button {
    font-size: clamp(8px, 0.56vw, 10px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.018em !important;
    color: rgba(17, 17, 17, 0.50) !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .footer-designed:hover,
  .footer-social:hover,
  .footer-legal-links a:hover,
  .footer-legal-links button:hover {
    transform: none !important;
  }
}

/* Laptop fit tuning: prevent overlap by tightening only the left group/legal links. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(70px, 1fr) !important;
    column-gap: 14px !important;
    padding: 0 14px !important;
  }

  .footer-left {
    gap: clamp(8px, 0.95vw, 14px) !important;
  }

  .footer-left > p,
  .footer-designed,
  .footer-designed .footer-brand,
  .footer-social {
    font-size: clamp(10px, 0.86vw, 12.5px) !important;
  }

  .footer-legal-links {
    gap: 6px !important;
  }

  .footer-legal-links a,
  .footer-legal-links button {
    font-size: 7.4px !important;
  }
}

/* Mobile/tablet keep legal links outside the footer and avoid any grouped desktop layout issues. */
@media (max-width: 1023px) {
  .footer-left {
    display: contents !important;
  }

  .footer-legal-links {
    display: none !important;
  }
}



/* Footer Instagram size fix
   Instagram now uses the same font size as the main footer text.
*/

@media (min-width: 1024px) {
  .footer-social,
  .footer-social.footer-scramble {
    font-size: clamp(12px, 0.92vw, 15px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.055em !important;
    line-height: 1 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-social,
  .footer-social.footer-scramble {
    font-size: clamp(10px, 0.86vw, 12.5px) !important;
  }
}



/* Works page second placeholder removal
   The smaller secondary image placeholder was removed from works.html.
   These rules keep the remaining main placeholder balanced.
*/

.works-page .work-slide .image-side {
  display: none !important;
}

@media (min-width: 1024px) {
  .works-page .work-slide .image-main {
    width: min(48vw, 720px);
  }
}

@media (max-width: 1023px) {
  .works-page .work-slide {
    grid-template-columns: 1fr !important;
  }
}



/* STAR STUDIO wordmark typography
   Every visible "STAR STUDIO" phrase uses HeliosExt Bold with -0.07em letter spacing.
*/

@font-face {
  font-family: "HeliosExt";
  src: url("../assets/FONTS/HeliosExt/heliosext_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.star-studio-text,
.footer-brand.star-studio-text,
.page-loader .star-studio-text,
.footer-scramble.star-studio-text {
  font-family: "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  font-kerning: normal;
  text-transform: uppercase;
}

/* Preserve the footer and loader rhythm after applying the tighter wordmark spacing */
.footer-brand.star-studio-text,
.footer-item .star-studio-text,
.footer-designed .star-studio-text,
.page-loader .star-studio-text {
  display: inline-block;
}



/* Helios fixes + footer orb restore */

/* Make sure About page and all page copy STAR STUDIO instances inherit the wordmark styling */
.star-studio-text,
.star-studio-copyright,
.footer-item .star-studio-copyright,
.footer-brand.star-studio-text,
.page-loader .star-studio-text,
.footer-scramble.star-studio-text {
  font-family: "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  font-kerning: normal;
  text-transform: uppercase;
}

/* The copyright text should be fully HeliosExt Bold, including ©2026 */
.star-studio-copyright {
  display: inline-block;
}

/* Restore the previous simple footer interaction icon:
   circular glass button + centered red dot + clean expanding rings on hover. */
@media (min-width: 1024px) {
  .footer-orb {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;

    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;

    padding: 0 !important;
    border: 1px solid rgba(17, 17, 17, 0.26) !important;
    border-radius: 50% !important;
    clip-path: none !important;

    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  .footer-orb span {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50% !important;
    background: #E93222 !important;
    box-shadow: 0 0 16px rgba(233, 50, 34, 0.45) !important;

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

  .footer-orb::before,
  .footer-orb::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    border-radius: 50% !important;
    clip-path: none !important;
    background: transparent !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .footer-orb::before {
    inset: -8px !important;
    border: 1px solid rgba(233, 50, 34, 0) !important;
  }

  .footer-orb::after {
    inset: -8px !important;
    border: 1px solid rgba(233, 50, 34, 0) !important;
  }

  .footer-inner:hover .footer-orb {
    transform: rotate(180deg) scale(1.08) !important;
    border-color: rgba(233, 50, 34, 0.5) !important;
  }

  .footer-inner:hover .footer-orb::before {
    inset: -14px !important;
    border-color: rgba(233, 50, 34, 0.36) !important;
  }

  .footer-inner:hover .footer-orb::after {
    inset: -22px !important;
    border-color: rgba(233, 50, 34, 0.16) !important;
  }
}

/* Mobile/tablet: keep the simple icon when shown */
@media (max-width: 1023px) {
  .footer-orb {
    border-radius: 50% !important;
    clip-path: none !important;
  }

  .footer-orb span {
    border-radius: 50% !important;
  }
}



/* FINAL FIX V2 — STAR STUDIO WORDMARK + FOOTER ICON */

/* Font face is repeated at the end so the override is self-contained. */
@font-face {
  font-family: "HeliosExtFinal";
  src: url("../assets/FONTS/HeliosExt/heliosext_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Every visible STAR STUDIO wordmark. */
.star-studio-text,
a.star-studio-text,
span.star-studio-text,
p.star-studio-text,
h1.star-studio-text,
h2.star-studio-text,
h3.star-studio-text,
.footer-brand.star-studio-text,
.footer-scramble.star-studio-text,
.page-loader .star-studio-text,
.star-studio-copyright {
  font-family: "HeliosExtFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
  font-kerning: normal !important;
}

/* Copyright must use Helios for the full text, including ©2026. */
.star-studio-copyright,
.footer-item .star-studio-copyright {
  display: inline-flex !important;
  align-items: center !important;
  font-family: "HeliosExtFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
}

/* Restore previous simple footer interaction icon: one small circle with one red dot.
   This kills the newer current icon shapes/lines. */
@media (min-width: 1024px) {
  .site-footer .footer-inner .footer-orb {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(17, 17, 17, 0.26) !important;
    border-radius: 999px !important;
    clip-path: none !important;
    background: rgba(255, 255, 255, 0.5) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: visible !important;
    transform: none !important;
  }

  .site-footer .footer-inner .footer-orb span {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;
    height: 7px !important;
    min-height: 7px !important;
    max-height: 7px !important;
    border-radius: 999px !important;
    background: #E93222 !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: 0 0 16px rgba(233, 50, 34, 0.45) !important;
    transform: translate(-50%, -50%) !important;
  }

  .site-footer .footer-inner .footer-orb::before,
  .site-footer .footer-inner .footer-orb::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 999px !important;
    clip-path: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .site-footer .footer-inner .footer-orb::before {
    inset: -8px !important;
    border: 1px solid rgba(233, 50, 34, 0) !important;
  }

  .site-footer .footer-inner .footer-orb::after {
    inset: -8px !important;
    border: 1px solid rgba(233, 50, 34, 0) !important;
  }

  .site-footer .footer-inner:hover .footer-orb {
    transform: rotate(180deg) scale(1.08) !important;
    border-color: rgba(233, 50, 34, 0.5) !important;
  }

  .site-footer .footer-inner:hover .footer-orb::before {
    inset: -14px !important;
    border-color: rgba(233, 50, 34, 0.36) !important;
  }

  .site-footer .footer-inner:hover .footer-orb::after {
    inset: -22px !important;
    border-color: rgba(233, 50, 34, 0.16) !important;
  }
}

@media (max-width: 1023px) {
  .site-footer .footer-inner .footer-orb {
    border-radius: 999px !important;
    clip-path: none !important;
    background-image: none !important;
  }

  .site-footer .footer-inner .footer-orb span {
    border-radius: 999px !important;
    background: #E93222 !important;
    background-image: none !important;
  }
}



/* FINAL VISIBILITY + STAR STUDIO FONT FIX */

/* Robust HeliosExt Bold wordmark styling */
@font-face {
  font-family: "HeliosExtWordmark";
  src: url("../assets/FONTS/HeliosExt/heliosext_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Any visible STAR STUDIO string */
.star-studio-text,
.star-studio-copyright,
.footer-item .star-studio-copyright,
.footer-brand.star-studio-text,
.page-loader .star-studio-text,
.footer-scramble.star-studio-text,
.has-star-studio-text > .star-studio-text {
  font-family: "HeliosExtWordmark", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
  font-kerning: normal !important;
}

/* Fix the About hero specifically: the phrase STAR STUDIO inside the big heading uses HeliosExt Bold. */
.about-hero h1 .star-studio-text,
.about-page h1 .star-studio-text,
.legal-hero h1 .star-studio-text,
.home-title .star-studio-text,
.project-cover h1 .star-studio-text {
  font-family: "HeliosExtWordmark", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
}

/* Whole copyright line, including ©2026 */
.star-studio-copyright {
  display: inline-flex !important;
  align-items: center !important;
  font-family: "HeliosExtWordmark", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
}

/* Footer visibility fix:
   The red orb rings should no longer bleed/clash into the footer text or get clipped awkwardly.
   Rings are subtle and stay in the icon area. */
@media (min-width: 1024px) {
  .site-footer {
    overflow: visible !important;
  }

  .site-footer .footer-inner {
    overflow: hidden !important;
  }

  .site-footer .footer-inner .footer-left {
    overflow: visible !important;
  }

  .site-footer .footer-inner .footer-orb {
    display: inline-flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(17, 17, 17, 0.26) !important;
    border-radius: 999px !important;
    clip-path: none !important;
    background: rgba(255, 255, 255, 0.5) !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: visible !important;
    transform: none !important;
  }

  .site-footer .footer-inner .footer-orb span {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #E93222 !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: 0 0 12px rgba(233, 50, 34, 0.42) !important;
    transform: translate(-50%, -50%) !important;
  }

  .site-footer .footer-inner .footer-orb::before,
  .site-footer .footer-inner .footer-orb::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    border-radius: 999px !important;
    clip-path: none !important;
    background: transparent !important;
    background-image: none !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .site-footer .footer-inner .footer-orb::before {
    inset: -6px !important;
    border: 1px solid rgba(233, 50, 34, 0) !important;
  }

  .site-footer .footer-inner .footer-orb::after {
    inset: -6px !important;
    border: 1px solid rgba(233, 50, 34, 0) !important;
  }

  .site-footer .footer-inner:hover .footer-orb {
    transform: rotate(180deg) scale(1.02) !important;
    border-color: rgba(233, 50, 34, 0.46) !important;
  }

  .site-footer .footer-inner:hover .footer-orb::before {
    inset: -8px !important;
    border-color: rgba(233, 50, 34, 0.32) !important;
  }

  .site-footer .footer-inner:hover .footer-orb::after {
    inset: -12px !important;
    border-color: rgba(233, 50, 34, 0.14) !important;
  }
}

/* Mobile/tablet keep simple red-dot icon if shown */
@media (max-width: 1023px) {
  .site-footer .footer-inner .footer-orb {
    border-radius: 999px !important;
    clip-path: none !important;
    background-image: none !important;
  }

  .site-footer .footer-inner .footer-orb span {
    border-radius: 999px !important;
    background: #E93222 !important;
    background-image: none !important;
  }
}



/* FINAL OVERRIDE — requested typography + square navbar */

/* HeliosExt Bold source */
@font-face {
  font-family: "HeliosExtBoldFinal";
  src: url("../assets/FONTS/HeliosExt/heliosext_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Explicit wordmark class used for About page STAR STUDIO and footer copyright */
.star-studio-wordmark,
.star-studio-text,
.star-studio-copyright,
.about-page .star-studio-wordmark,
.about-page h1 .star-studio-wordmark,
.about-page h2 .star-studio-wordmark,
.footer-item .star-studio-copyright,
.footer-left .star-studio-copyright {
  font-family: "HeliosExtBoldFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  font-kerning: normal !important;
}

/* Full copyright line including ©2026 */
.footer-item .star-studio-copyright,
.footer-left .star-studio-copyright,
.star-studio-copyright {
  display: inline-flex !important;
  align-items: center !important;
  font-family: "HeliosExtBoldFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
}

/* Navbar box square corners */
.site-header .main-nav,
body .site-header > .main-nav,
.main-nav {
  border-radius: 0 !important;
}



/* FINAL FIX — About STAR STUDIO + footer copyright typography */
@font-face {
  font-family: "HeliosExtWordmarkFinal";
  src: url("../assets/FONTS/HeliosExt/heliosext_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.star-studio-wordmark,
.star-studio-copyright,
.about-page .about-hero h1 .star-studio-wordmark,
.footer-copyright .star-studio-copyright {
  font-family: "HeliosExtWordmarkFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  font-kerning: normal !important;
}

.footer-copyright,
.footer-copyright .star-studio-copyright {
  display: inline-flex !important;
  align-items: center !important;
}

.site-header .main-nav,
body .site-header > .main-nav,
.main-nav {
  border-radius: 0 !important;
}



/* FINAL FOOTER FONT BALANCE
   Uses Helvetica Now Display Bold for:
   - All rights reserved.
   - Designed by
   - Instagram

   Keeps the STAR STUDIO wordmark inside Designed by as HeliosExt Bold.
*/

@font-face {
  font-family: "HelveticaNowDisplayBoldFinal";
  src:
    url("../assets/FONTS/HelveticaNowDisplay/HelveticaNowDisplay-Bold.woff2") format("woff2"),
    url("../assets/FONTS/HelveticaNowDisplay/HelveticaNowDisplay-Bold.woff") format("woff"),
    url("../assets/FONTS/HelveticaNowDisplay/HelveticaNowDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@media (min-width: 1024px) {
  /* All rights reserved. */
  .footer-left > p:nth-of-type(2),
  .footer-left > p:nth-of-type(2).footer-item,
  .footer-left > p:nth-of-type(2).footer-scramble {
    font-family: "HelveticaNowDisplayBoldFinal", "Helvetica Now Display", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
  }

  /* Designed by text */
  .footer-designed,
  .footer-inner > .footer-designed {
    font-family: "HelveticaNowDisplayBoldFinal", "Helvetica Now Display", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
  }

  /* Keep only the STAR STUDIO part in Designed by as HeliosExt */
  .footer-designed .footer-brand,
  .footer-designed .footer-brand.star-studio-text,
  .footer-designed .footer-brand.star-studio-wordmark {
    font-family: "HeliosExtWordmarkFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.07em !important;
  }

  /* Instagram */
  .footer-social,
  .footer-social.footer-scramble {
    font-family: "HelveticaNowDisplayBoldFinal", "Helvetica Now Display", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
  }
}

@media (max-width: 1023px) {
  .footer-left > p:nth-of-type(2),
  .footer-designed,
  .footer-social {
    font-family: "HelveticaNowDisplayBoldFinal", "Helvetica Now Display", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
  }

  .footer-designed .footer-brand,
  .footer-designed .footer-brand.star-studio-text,
  .footer-designed .footer-brand.star-studio-wordmark {
    font-family: "HeliosExtWordmarkFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.07em !important;
  }
}



/* Works index box
   Places the Works page project index inside a clean glass box like the reference.
*/

.works-page .works-index {
  padding: clamp(16px, 1.6vw, 24px) clamp(18px, 2vw, 30px) !important;
  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.10),
    0 7px 18px rgba(0, 0, 0, 0.07) !important;
  overflow: hidden;
}

.works-page .works-index .index-item {
  width: 100%;
  display: grid !important;
  grid-template-columns: 54px 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 4px 0 !important;
  text-align: left;
}

.works-page .works-index .index-item span {
  justify-self: end;
  text-align: right;
}

/* Keep the box compact on laptop-sized screens */
@media (min-width: 1024px) and (max-width: 1279px) {
  .works-page .works-index {
    padding: 14px 18px !important;
  }

  .works-page .works-index .index-item {
    grid-template-columns: 46px 1fr;
    column-gap: 10px;
  }
}

/* Tablet/mobile already hides the carousel index, so no visual change there */
@media (max-width: 1023px) {
  .works-page .works-index {
    display: none !important;
  }
}



/* Works index reference style
   Matches the provided reference:
   - wider rectangular box
   - thin #c7c7c7 border
   - subtle translucent background
   - no heavy shadow
   - compact left numbering + project titles
*/

@media (min-width: 1024px) {
  .works-page .works-index {
    width: clamp(248px, 18vw, 306px) !important;
    padding: 14px 16px 14px 14px !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 0 !important;

    background: rgba(255, 255, 255, 0.36) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;

    box-shadow: none !important;
  }

  .works-page .works-index .index-item {
    width: 100%;
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    column-gap: 18px !important;
    align-items: center;

    min-height: 25px;
    padding: 0 !important;
    margin: 0 !important;

    text-align: left !important;
    border: 0 !important;
    background: transparent !important;
  }

  .works-page .works-index .index-item span {
    justify-self: start !important;
    text-align: left !important;
    color: rgba(17, 17, 17, 0.48) !important;
  }

  .works-page .works-index .index-item {
    color: rgba(17, 17, 17, 0.42) !important;
  }

  .works-page .works-index .index-item.active {
    color: #E93222 !important;
  }

  .works-page .works-index .index-item.active span {
    color: rgba(17, 17, 17, 0.48) !important;
  }
}

/* Laptop tuning */
@media (min-width: 1024px) and (max-width: 1279px) {
  .works-page .works-index {
    width: 276px !important;
    padding: 13px 15px !important;
  }

  .works-page .works-index .index-item {
    grid-template-columns: 40px 1fr !important;
    column-gap: 16px !important;
    min-height: 24px;
  }
}



/* Works index exact reference box
   Final override to match the screenshot shape and alignment:
   fixed rectangular box, square corners, compact rows, left numbering column,
   project names aligned to one vertical axis.
*/

@media (min-width: 1024px) {
  .works-page .works-index {
    box-sizing: border-box !important;

    width: 276px !important;
    min-width: 276px !important;
    max-width: 276px !important;

    height: 226px !important;
    min-height: 226px !important;
    max-height: 226px !important;

    padding: 13px 14px 13px 12px !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 0 !important;

    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;

    box-shadow: none !important;
    outline: none !important;

    overflow: hidden !important;
  }

  .works-page .works-index .index-item {
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 47px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 18px !important;

    width: 100% !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-align: left !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;

    color: rgba(17, 17, 17, 0.42) !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  .works-page .works-index .index-item span {
    display: block !important;
    grid-column: 1 !important;

    width: 47px !important;
    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;
    text-align: left !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;

    color: rgba(17, 17, 17, 0.48) !important;
  }

  .works-page .works-index .index-item::after,
  .works-page .works-index .index-item::before {
    display: none !important;
    content: none !important;
  }

  .works-page .works-index .index-item.active {
    color: #E93222 !important;
  }

  .works-page .works-index .index-item.active span {
    color: rgba(17, 17, 17, 0.48) !important;
  }
}

/* Slight scale-down only for smaller laptop widths, preserving the same shape */
@media (min-width: 1024px) and (max-width: 1140px) {
  .works-page .works-index {
    width: 262px !important;
    min-width: 262px !important;
    max-width: 262px !important;
    height: 216px !important;
    min-height: 216px !important;
    max-height: 216px !important;
    padding: 12px !important;
  }

  .works-page .works-index .index-item {
    grid-template-columns: 43px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    font-size: 14px !important;
  }

  .works-page .works-index .index-item span {
    width: 43px !important;
    font-size: 14px !important;
  }
}



/* Works index reference-exact override
   Matches the provided screenshot:
   - 276x229px rectangular box
   - square border
   - light translucent fill
   - text starts at x≈38px for numbers and x≈104px for project names
   - compact 26px row rhythm
*/

@media (min-width: 1024px) {
  .works-page .works-index {
    box-sizing: border-box !important;

    width: 276px !important;
    min-width: 276px !important;
    max-width: 276px !important;

    height: 229px !important;
    min-height: 229px !important;
    max-height: 229px !important;

    padding: 16px 16px 16px 15px !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 0 !important;

    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;

    box-shadow: none !important;
    outline: none !important;
    overflow: hidden !important;
  }

  .works-page .works-index .index-item {
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 50px 1fr !important;
    column-gap: 16px !important;
    align-items: center !important;

    width: 100% !important;
    height: 25.5px !important;
    min-height: 25.5px !important;
    max-height: 25.5px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    color: rgba(17, 17, 17, 0.42) !important;
    opacity: 1 !important;
  }

  .works-page .works-index .index-item span {
    display: block !important;
    grid-column: 1 !important;

    width: 50px !important;
    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;
    text-align: left !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
    color: rgba(17, 17, 17, 0.48) !important;
  }

  .works-page .works-index .index-item.active {
    color: #E93222 !important;
  }

  .works-page .works-index .index-item.active span {
    color: rgba(17, 17, 17, 0.48) !important;
  }

  .works-page .works-index .index-item::before,
  .works-page .works-index .index-item::after {
    display: none !important;
    content: none !important;
  }
}

/* Smaller laptop: preserve the exact proportions, just reduce slightly */
@media (min-width: 1024px) and (max-width: 1140px) {
  .works-page .works-index {
    width: 268px !important;
    min-width: 268px !important;
    max-width: 268px !important;
    height: 222px !important;
    min-height: 222px !important;
    max-height: 222px !important;
    padding: 15px 15px 15px 14px !important;
  }

  .works-page .works-index .index-item {
    grid-template-columns: 48px 1fr !important;
    column-gap: 15px !important;
    height: 24.5px !important;
    min-height: 24.5px !important;
    max-height: 24.5px !important;
    font-size: 14px !important;
  }

  .works-page .works-index .index-item span {
    width: 48px !important;
    font-size: 14px !important;
  }
}



/* Works index text fit fix
   Reduces the Works index font size so all 8 project rows fit cleanly inside the box.
*/

@media (min-width: 1024px) {
  .works-page .works-index .index-item,
  .works-page .works-index .index-item span {
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
  }

  .works-page .works-index .index-item {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1140px) {
  .works-page .works-index .index-item,
  .works-page .works-index .index-item span {
    font-size: 12.5px !important;
  }

  .works-page .works-index .index-item {
    height: 23.5px !important;
    min-height: 23.5px !important;
    max-height: 23.5px !important;
  }
}



/* Works index final fit fix
   Refines the box dimensions, padding, and row rhythm so all 8 works fit vertically.
   Keeps the same reference-like rectangular shape and alignment.
*/

@media (min-width: 1024px) {
  .works-page .works-index {
    box-sizing: border-box !important;

    width: 276px !important;
    min-width: 276px !important;
    max-width: 276px !important;

    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;

    padding: 16px 16px 14px 15px !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 0 !important;

    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;

    box-shadow: none !important;
    overflow: hidden !important;
  }

  .works-page .works-index .index-item {
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: center !important;

    width: 100% !important;
    height: 25.25px !important;
    min-height: 25.25px !important;
    max-height: 25.25px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;

    color: rgba(17, 17, 17, 0.42) !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  .works-page .works-index .index-item span {
    display: block !important;
    grid-column: 1 !important;

    width: 50px !important;
    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;
    text-align: left !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;

    color: rgba(17, 17, 17, 0.48) !important;
  }

  .works-page .works-index .index-item.active {
    color: #E93222 !important;
  }

  .works-page .works-index .index-item.active span {
    color: rgba(17, 17, 17, 0.48) !important;
  }
}

/* Smaller laptop: preserve the same layout but compact everything slightly */
@media (min-width: 1024px) and (max-width: 1140px) {
  .works-page .works-index {
    width: 268px !important;
    min-width: 268px !important;
    max-width: 268px !important;

    height: 232px !important;
    min-height: 232px !important;
    max-height: 232px !important;

    padding: 15px 15px 13px 14px !important;
  }

  .works-page .works-index .index-item {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 15px !important;

    height: 24.75px !important;
    min-height: 24.75px !important;
    max-height: 24.75px !important;

    font-size: 12.5px !important;
  }

  .works-page .works-index .index-item span {
    width: 48px !important;
    font-size: 12.5px !important;
  }
}



/* Works index actual fit fix
   The previous version was still too large vertically.
   This reduces the project-index typography and row height so all 8 items fit inside the box.
*/

@media (min-width: 1024px) {
  .works-page .works-index {
    width: 276px !important;
    min-width: 276px !important;
    max-width: 276px !important;

    height: 238px !important;
    min-height: 238px !important;
    max-height: 238px !important;

    padding: 18px 16px 16px 15px !important;
    overflow: hidden !important;
  }

  .works-page .works-index .index-item {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 16px !important;

    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 10.75px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }

  .works-page .works-index .index-item span {
    width: 50px !important;

    font-size: 10.75px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }
}

/* Smaller laptops */
@media (min-width: 1024px) and (max-width: 1140px) {
  .works-page .works-index {
    width: 268px !important;
    min-width: 268px !important;
    max-width: 268px !important;

    height: 232px !important;
    min-height: 232px !important;
    max-height: 232px !important;

    padding: 17px 15px 15px 14px !important;
  }

  .works-page .works-index .index-item {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 15px !important;

    height: 20.5px !important;
    min-height: 20.5px !important;
    max-height: 20.5px !important;

    font-size: 10.25px !important;
  }

  .works-page .works-index .index-item span {
    width: 48px !important;
    font-size: 10.25px !important;
  }
}



/* Works index — final hyperexperimental/v42-style fit
   This fixes the real issue: the inherited .works-index grid gap was adding extra
   vertical space, so the 8th item could not fit. The box now matches the v42-style
   reference and all 8 works fit cleanly.
*/

@media (min-width: 1024px) {
  .works-page .works-index {
    box-sizing: border-box !important;

    width: 276px !important;
    min-width: 276px !important;
    max-width: 276px !important;

    height: auto !important;
    min-height: 228px !important;
    max-height: none !important;

    display: grid !important;
    gap: 0 !important;

    padding: 17px 16px 17px 15px !important;

    border: 1px solid #c7c7c7 !important;
    border-radius: 0 !important;

    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;

    box-shadow: none !important;
    outline: none !important;
    overflow: visible !important;
  }

  .works-page .works-index .index-item {
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: center !important;

    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;

    color: rgba(17, 17, 17, 0.42) !important;
    opacity: 1 !important;
  }

  .works-page .works-index .index-item span {
    display: block !important;
    grid-column: 1 !important;

    width: 50px !important;
    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;
    text-align: left !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;

    color: rgba(17, 17, 17, 0.48) !important;
  }

  .works-page .works-index .index-item.active {
    color: #E93222 !important;
  }

  .works-page .works-index .index-item.active span {
    color: rgba(17, 17, 17, 0.48) !important;
  }

  .works-page .works-index .index-item::before,
  .works-page .works-index .index-item::after {
    display: none !important;
    content: none !important;
  }
}

/* Smaller laptop — same proportions, slightly smaller text */
@media (min-width: 1024px) and (max-width: 1140px) {
  .works-page .works-index {
    width: 268px !important;
    min-width: 268px !important;
    max-width: 268px !important;

    min-height: 222px !important;
    padding: 16px 15px !important;
    gap: 0 !important;
  }

  .works-page .works-index .index-item {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 15px !important;

    height: 23.5px !important;
    min-height: 23.5px !important;
    max-height: 23.5px !important;

    font-size: 12.5px !important;
  }

  .works-page .works-index .index-item span {
    width: 48px !important;
    font-size: 12.5px !important;
  }
}



/* Works index position + lighter typography
   Moves the box 20px higher and uses a thinner font weight.
*/

@media (min-width: 1024px) {
  .works-page .works-index {
    top: calc(50% - 20px) !important;
  }

  .works-page .works-index .index-item,
  .works-page .works-index .index-item span {
    font-weight: 500 !important;
  }

  .works-page .works-index .index-item.active {
    font-weight: 500 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1140px) {
  .works-page .works-index {
    top: calc(50% - 20px) !important;
  }
}



/* Works index extra position adjustment
   Moves the Works index box another 20px up, total 40px above the original position.
*/

@media (min-width: 1024px) {
  .works-page .works-index {
    top: calc(50% - 40px) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1140px) {
  .works-page .works-index {
    top: calc(50% - 40px) !important;
  }
}


.mobile-menu-trigger,
.mobile-menu-panel {
  display: none;
}

@media (max-width: 1023px) {
  body .site-header > .main-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
  }

  body .site-header > .main-nav > a {
    display: none !important;
  }

  .mobile-menu-trigger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #111111;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mobile-menu-panel {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: block;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.45s linear;
  }

  .mobile-menu-panel.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 18% 18%, rgba(233, 50, 34, 0.16), transparent 36%),
      radial-gradient(circle at 82% 78%, rgba(17, 17, 17, 0.12), transparent 42%),
      rgba(245, 244, 239, 0.62);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  .mobile-menu-panel.is-open .mobile-menu-backdrop {
    opacity: 1;
  }

  .mobile-menu-inner {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    padding: 18px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    transform: translateY(18px) scale(0.985);
    opacity: 0;
    transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.42s ease;
  }

  .mobile-menu-panel.is-open .mobile-menu-inner {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .mobile-menu-inner::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: -1;
    border: 1px solid #c7c7c7;
    background:
      linear-gradient(rgba(17,17,17,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(17,17,17,0.035) 1px, transparent 1px),
      rgba(255,255,255,0.36);
    background-size: 22px 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.13), inset 0 1px 0 rgba(255,255,255,0.72);
  }

  .mobile-menu-close {
    position: absolute;
    right: 22px;
    top: 22px;
    z-index: 5;
    width: clamp(72px, 15vw, 112px);
    height: clamp(72px, 15vw, 112px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #111111;
    border-radius: 50%;
    background: rgba(255,255,255,0.38);
    color: #111111;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transform: rotate(12deg) scale(0.86);
    opacity: 0;
    transition: transform 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.08s, opacity 0.42s ease 0.08s, background 0.25s ease;
  }

  .mobile-menu-panel.is-open .mobile-menu-close {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }

  .mobile-menu-close span {
    display: block;
    font-size: clamp(58px, 13vw, 100px);
    line-height: 0.7;
    font-weight: 400;
    transform: translateY(-3px);
  }

  .mobile-menu-close:hover {
    background: #E93222;
  }

  .mobile-menu-meta {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 100px 0 0;
    color: rgba(17,17,17,0.56);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.42s ease 0.16s, transform 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.16s;
  }

  .mobile-menu-panel.is-open .mobile-menu-meta {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-menu-links {
    align-self: center;
    display: grid;
    gap: clamp(10px, 2.8vw, 20px);
    padding: clamp(80px, 16vh, 150px) 0 clamp(48px, 8vh, 90px);
  }

  .mobile-menu-links a {
    position: relative;
    display: grid;
    grid-template-columns: clamp(42px, 9vw, 76px) minmax(0, 1fr);
    align-items: end;
    gap: clamp(14px, 4vw, 34px);
    color: #111111;
    text-decoration: none;
    text-transform: uppercase;
    font-size: clamp(48px, 13vw, 132px);
    line-height: 0.78;
    font-weight: 500;
    letter-spacing: -0.11em;
    transform: translateY(46px) skewY(4deg);
    opacity: 0;
    filter: blur(8px);
    transition: transform 0.78s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.54s ease, filter 0.54s ease, color 0.22s ease;
  }

  .mobile-menu-panel.is-open .mobile-menu-links a {
    transform: translateY(0) skewY(0deg);
    opacity: 1;
    filter: blur(0);
  }

  .mobile-menu-panel.is-open .mobile-menu-links a:nth-child(1) { transition-delay: 0.12s; }
  .mobile-menu-panel.is-open .mobile-menu-links a:nth-child(2) { transition-delay: 0.18s; }
  .mobile-menu-panel.is-open .mobile-menu-links a:nth-child(3) { transition-delay: 0.24s; }
  .mobile-menu-panel.is-open .mobile-menu-links a:nth-child(4) { transition-delay: 0.30s; }

  .mobile-menu-links a span {
    align-self: start;
    padding-top: 0.1em;
    color: #E93222;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 800;
  }

  .mobile-menu-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.18em;
    height: 1px;
    background: rgba(17,17,17,0.18);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
  }

  .mobile-menu-links a:hover { color: #E93222; }
  .mobile-menu-links a:hover::after { transform: scaleX(1); }

  .mobile-menu-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 0 0 12px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.42s ease 0.38s, transform 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.38s;
  }

  .mobile-menu-panel.is-open .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-menu-footer a {
    color: rgba(17,17,17,0.56);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
  }

  body.mobile-menu-open { overflow: hidden; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-menu-trigger { font-size: 13px; }
  .mobile-menu-links a { font-size: clamp(82px, 13vw, 132px); }
}

@media (max-width: 479px) {
  .mobile-menu-inner { padding: 14px; }
  .mobile-menu-inner::before { inset: 14px; }
  .mobile-menu-close { right: 18px; top: 18px; width: 68px; height: 68px; }
  .mobile-menu-close span { font-size: 58px; }
  .mobile-menu-meta { padding-right: 78px; font-size: 9.5px; }
  .mobile-menu-links a { font-size: clamp(46px, 14vw, 72px); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-panel,
  .mobile-menu-backdrop,
  .mobile-menu-inner,
  .mobile-menu-close,
  .mobile-menu-meta,
  .mobile-menu-links a,
  .mobile-menu-footer {
    transition-duration: 0.001ms !important;
  }
}



/* Mobile/tablet menu refinement
   - Only MENU appears in the navbar.
   - Full-page menu content fits inside mobile viewport.
   - Removed privacy/cookies from the overlay menu.
   - Removed circle around X.
   - STAR STUDIO in the overlay uses the wordmark font/style.
*/

@media (max-width: 1023px) {
  body .site-header > .main-nav {
    width: auto !important;
    min-width: 72px !important;
    max-width: 92px !important;
    overflow: hidden !important;
  }

  body .site-header > .main-nav > a,
  body .site-header > .main-nav a.magnetic-link,
  body .site-header > .main-nav a[href*="works"],
  body .site-header > .main-nav a[href*="about"],
  body .site-header > .main-nav a[href*="moodboard"],
  body .site-header > .main-nav a[href*="contact"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .mobile-menu-trigger {
    display: inline-flex !important;
    visibility: visible !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .mobile-menu-inner {
    min-height: 100dvh !important;
    height: 100dvh !important;
    padding: 14px !important;
    grid-template-rows: auto 1fr !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-inner::before {
    inset: 14px !important;
  }

  .mobile-menu-meta {
    padding: 10px 58px 0 0 !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  .mobile-menu-meta .star-studio-wordmark,
  .mobile-menu-meta span:first-child {
    font-family: "HeliosExtWordmarkFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.07em !important;
    text-transform: uppercase !important;
  }

  .mobile-menu-close {
    right: 22px !important;
    top: 22px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .mobile-menu-close:hover {
    background: transparent !important;
    color: #E93222 !important;
  }

  .mobile-menu-close span {
    font-size: clamp(48px, 13vw, 72px) !important;
    line-height: 0.72 !important;
    font-weight: 500 !important;
    transform: none !important;
  }

  .mobile-menu-links {
    align-self: center !important;
    gap: clamp(4px, 1.35vh, 12px) !important;
    padding: clamp(38px, 8vh, 78px) 0 clamp(24px, 5vh, 54px) !important;
  }

  .mobile-menu-links a {
    grid-template-columns: clamp(38px, 9vw, 54px) minmax(0, 1fr) !important;
    gap: clamp(12px, 4vw, 24px) !important;
    font-size: clamp(42px, 11vw, 82px) !important;
    line-height: 0.82 !important;
    letter-spacing: -0.105em !important;
  }

  .mobile-menu-links a span {
    font-size: 10px !important;
    padding-top: 0.16em !important;
  }

  .mobile-menu-footer {
    display: none !important;
  }
}

/* Smaller phones: fit all items comfortably without clipping */
@media (max-width: 479px) {
  .mobile-menu-inner {
    padding: 12px !important;
  }

  .mobile-menu-inner::before {
    inset: 12px !important;
  }

  .mobile-menu-meta {
    padding: 10px 52px 0 0 !important;
    font-size: 8px !important;
  }

  .mobile-menu-close {
    right: 18px !important;
    top: 18px !important;
  }

  .mobile-menu-close span {
    font-size: 50px !important;
  }

  .mobile-menu-links {
    gap: 6px !important;
    padding: 54px 0 38px !important;
  }

  .mobile-menu-links a {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 12px !important;
    font-size: clamp(38px, 13vw, 54px) !important;
    line-height: 0.84 !important;
  }

  .mobile-menu-links a span {
    font-size: 9px !important;
  }
}

/* Short mobile screens, including browser UI visible */
@media (max-width: 767px) and (max-height: 760px) {
  .mobile-menu-links {
    gap: 3px !important;
    padding: 44px 0 30px !important;
  }

  .mobile-menu-links a {
    font-size: clamp(34px, 11.5vw, 48px) !important;
    line-height: 0.84 !important;
  }
}



/* Mobile menu spacing + thinner X
   Adds breathing room so the menu content does not sit on the edge,
   and makes the close X lighter/thinner.
*/

@media (max-width: 1023px) {
  .mobile-menu-inner {
    padding: 18px !important;
  }

  .mobile-menu-inner::before {
    inset: 18px !important;
  }

  .mobile-menu-meta {
    padding: 14px 72px 0 14px !important;
  }

  .mobile-menu-links {
    padding-left: clamp(28px, 8vw, 72px) !important;
    padding-right: clamp(22px, 6vw, 56px) !important;
  }

  .mobile-menu-close {
    right: 32px !important;
    top: 30px !important;
  }

  .mobile-menu-close span {
    font-family: Helvetica, Arial, sans-serif !important;
    font-weight: 200 !important;
    font-size: clamp(44px, 12vw, 68px) !important;
    line-height: 0.75 !important;
    transform: translateY(-1px) !important;
  }
}

@media (max-width: 479px) {
  .mobile-menu-inner {
    padding: 16px !important;
  }

  .mobile-menu-inner::before {
    inset: 16px !important;
  }

  .mobile-menu-meta {
    padding: 13px 58px 0 12px !important;
  }

  .mobile-menu-links {
    padding-left: clamp(24px, 7vw, 34px) !important;
    padding-right: 22px !important;
  }

  .mobile-menu-close {
    right: 28px !important;
    top: 26px !important;
  }

  .mobile-menu-close span {
    font-size: 44px !important;
    font-weight: 200 !important;
  }
}

@media (max-width: 767px) and (max-height: 760px) {
  .mobile-menu-links {
    padding-left: clamp(24px, 7vw, 36px) !important;
    padding-right: 22px !important;
  }
}



/* Mobile/tablet logo refinement
   - Makes the small header logo larger on tablet/mobile.
   - Enables the home hero logo to remain draggable/touch-draggable on tablet/mobile.
*/

@media (min-width: 768px) and (max-width: 1023px) {
  body .site-header > .mark {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
  }
}

@media (max-width: 767px) {
  body .site-header > .mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body .site-header > .mark img {
    width: 100% !important;
    height: 100% !important;
  }
}

@media (max-width: 479px) {
  body .site-header > .mark {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}

/* Make sure the home hero logo can be dragged by touch/mouse */
.home-page .cover-logo {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
}

.home-page .cover-logo.is-dragging {
  cursor: grabbing !important;
}



/* FINAL MOBILE/TABLET HEADER ALIGNMENT + HERO LOGO DRAG FIX */

/* Align the small header logo and MENU box on mobile/tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --mobile-header-top: 22px;
    --mobile-header-side: 28px;
    --mobile-header-size: 52px;
  }

  body .site-header > .mark {
    top: var(--mobile-header-top) !important;
    left: var(--mobile-header-side) !important;
    width: var(--mobile-header-size) !important;
    height: var(--mobile-header-size) !important;
    min-width: var(--mobile-header-size) !important;
    min-height: var(--mobile-header-size) !important;
    max-width: var(--mobile-header-size) !important;
    max-height: var(--mobile-header-size) !important;
  }

  body .site-header > .main-nav {
    top: var(--mobile-header-top) !important;
    right: var(--mobile-header-side) !important;
    height: var(--mobile-header-size) !important;
    min-height: var(--mobile-header-size) !important;
    max-height: var(--mobile-header-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-header-top: 16px;
    --mobile-header-side: 16px;
    --mobile-header-size: 46px;
  }

  body .site-header > .mark {
    top: var(--mobile-header-top) !important;
    left: var(--mobile-header-side) !important;
    width: var(--mobile-header-size) !important;
    height: var(--mobile-header-size) !important;
    min-width: var(--mobile-header-size) !important;
    min-height: var(--mobile-header-size) !important;
    max-width: var(--mobile-header-size) !important;
    max-height: var(--mobile-header-size) !important;
  }

  body .site-header > .mark img {
    width: 100% !important;
    height: 100% !important;
  }

  body .site-header > .main-nav {
    top: var(--mobile-header-top) !important;
    right: var(--mobile-header-side) !important;
    height: var(--mobile-header-size) !important;
    min-height: var(--mobile-header-size) !important;
    max-height: var(--mobile-header-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-trigger {
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 479px) {
  :root {
    --mobile-header-top: 14px;
    --mobile-header-side: 14px;
    --mobile-header-size: 44px;
  }
}

/* Robust draggable home hero logo:
   The drag is applied through CSS variables so it survives existing reveal/animation transforms. */
.home-page .cover-logo {
  --home-logo-drag-x: 0px;
  --home-logo-drag-y: 0px;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
  transform: translate3d(var(--home-logo-drag-x), var(--home-logo-drag-y), 0) !important;
  will-change: transform !important;
}

.home-page .cover-logo.is-dragging {
  cursor: grabbing !important;
  z-index: 40 !important;
  transition: none !important;
}

.home-page .cover-logo.is-drag-ready {
  transform: translate3d(var(--home-logo-drag-x), var(--home-logo-drag-y), 0) !important;
}



/* FINAL REQUEST FIX
   - Slightly reduce mobile/tablet MENU navbar height.
   - Make the home ticker/marquee bar use HeliosExt Bold.
   - Improve touch dragging for the home hero logo.
*/

@font-face {
  font-family: "HeliosExtTickerFinal";
  src: url("../assets/FONTS/HeliosExt/heliosext_bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Home black ticker/marquee bar */
.home-page .ticker,
.home-page .ticker *,
.ticker,
.ticker * {
  font-family: "HeliosExtTickerFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
}

/* Slightly smaller mobile/tablet MENU navbar */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --mobile-header-size: 46px;
  }

  body .site-header > .main-nav {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
  }

  .mobile-menu-trigger {
    font-size: 12px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --mobile-header-size: 40px;
  }

  body .site-header > .main-nav {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
  }

  .mobile-menu-trigger {
    font-size: 11px !important;
  }
}

@media (max-width: 479px) {
  :root {
    --mobile-header-size: 38px;
  }

  body .site-header > .main-nav {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 11px !important;
  }
}

/* Touch-drag safety for the hero logo */
.home-page .cover-logo,
.home-page .cover-logo * {
  touch-action: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.home-page .cover-logo {
  position: relative !important;
  z-index: 50 !important;
  cursor: grab !important;
  transform: translate3d(var(--home-logo-drag-x, 0px), var(--home-logo-drag-y, 0px), 0) !important;
}

.home-page .cover-logo.is-dragging {
  cursor: grabbing !important;
  transition: none !important;
}



/* FINAL MOBILE FIXES
   - Keep the header logo at the previous size.
   - Keep the MENU navbar slightly shorter and vertically centered with the logo.
   - Make the home hero logo draggable on touchscreen.
   - Make mobile legal links smaller.
*/

/* Restore header logo size; only navbar stays reduced */
@media (min-width: 768px) and (max-width: 1023px) {
  body .site-header > .mark {
    top: 22px !important;
    left: 28px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }

  body .site-header > .main-nav {
    top: 25px !important;
    right: 28px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    align-items: center !important;
  }
}

@media (max-width: 767px) {
  body .site-header > .mark {
    top: 16px !important;
    left: 16px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }

  body .site-header > .main-nav {
    top: 19px !important;
    right: 16px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    align-items: center !important;
  }
}

@media (max-width: 479px) {
  body .site-header > .mark {
    top: 14px !important;
    left: 14px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }

  body .site-header > .main-nav {
    top: 17px !important;
    right: 14px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 11px !important;
  }
}

/* Hero logo touch drag. Use .cover-logo directly so it works even if page classes change. */
.cover-logo,
.cover-logo * {
  touch-action: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.cover-logo {
  --home-logo-drag-x: 0px;
  --home-logo-drag-y: 0px;
  cursor: grab !important;
  z-index: 60 !important;
  transform: translate3d(var(--home-logo-drag-x), var(--home-logo-drag-y), 0) !important;
  will-change: transform !important;
}

.cover-logo.is-dragging {
  cursor: grabbing !important;
  z-index: 120 !important;
  transition: none !important;
}

/* Smaller mobile legal links at the bottom of pages */
@media (max-width: 1023px) {
  .legal-mobile-bottom {
    gap: 10px !important;
    padding: 12px 12px 22px !important;
  }

  .legal-mobile-bottom a,
  .legal-mobile-bottom button {
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
  }
}

@media (max-width: 479px) {
  .legal-mobile-bottom {
    gap: 8px !important;
    padding: 10px 10px 20px !important;
  }

  .legal-mobile-bottom a,
  .legal-mobile-bottom button {
    font-size: 7.5px !important;
  }
}



/* FINAL FOOTER CLEANUP + HERO LOGO INTERACTION FIX */

/* Remove visible noise/grid texture from the footer container */
.site-footer .footer-inner,
.footer-inner {
  background: rgba(255, 255, 255, 0.72) !important;
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  isolation: isolate !important;
}

.site-footer .footer-inner::before,
.site-footer .footer-inner::after,
.footer-inner::before,
.footer-inner::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  display: none !important;
  content: none !important;
}

/* Fix spacing: Designed by STAR STUDIO */
.footer-designed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28em !important;
  white-space: nowrap !important;
}

/* STAR STUDIO inside Designed by */
.footer-designed .footer-brand,
.footer-designed .footer-brand.star-studio-text,
.footer-designed .footer-brand.star-studio-wordmark,
.footer-designed .footer-brand.has-star-studio-text {
  color: #c7c7c7 !important;
  transition: color 0.22s ease !important;
}

.footer-designed:hover .footer-brand,
.footer-designed .footer-brand:hover,
.footer-designed .footer-brand.star-studio-text:hover,
.footer-designed .footer-brand.star-studio-wordmark:hover {
  color: #000000 !important;
}

/* Instagram color + hover */
.footer-social,
.footer-social.footer-scramble {
  color: #c7c7c7 !important;
  transition: color 0.22s ease !important;
}

.footer-social:hover,
.footer-social.footer-scramble:hover {
  color: #000000 !important;
}

/* Make hero logo definitely touch/click interactive above surrounding content */
.cover-logo,
.home-page .cover-logo {
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative !important;
  z-index: 999 !important;
  cursor: grab !important;
  transform: translate3d(var(--home-logo-drag-x, 0px), var(--home-logo-drag-y, 0px), 0) !important;
  will-change: transform !important;
}

.cover-logo *,
.home-page .cover-logo * {
  pointer-events: none !important;
  touch-action: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.cover-logo.is-dragging,
.home-page .cover-logo.is-dragging {
  cursor: grabbing !important;
  z-index: 9999 !important;
  transition: none !important;
}



/* FINAL FOOTER CLEAN GLASS + HERO LOGO DRAG MOTION */

/* Footer: clean navbar-like box, no page noise/grid showing through */
.site-footer {
  background: transparent !important;
}

.site-footer .footer-inner,
.footer-inner {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid #c7c7c7 !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Cover any inherited pseudo/noise layers inside the footer */
.site-footer .footer-inner::before,
.site-footer .footer-inner::after,
.footer-inner::before,
.footer-inner::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* If the footer contains a nested/noise-like layer, hide it only inside footer */
.site-footer .noise-layer,
.site-footer [class*="noise"],
.site-footer [class*="grid"] {
  display: none !important;
  opacity: 0 !important;
}

/* Keep footer text above the clean background */
.site-footer .footer-inner > *,
.footer-inner > * {
  position: relative;
  z-index: 2;
}

/* Hero logo drag motion variables */
.cover-logo,
.home-page .cover-logo {
  --home-logo-drag-x: 0px;
  --home-logo-drag-y: 0px;
  --home-logo-rotate: 0deg;
  --home-logo-scale: 1;
  transform:
    translate3d(var(--home-logo-drag-x), var(--home-logo-drag-y), 0)
    rotate(var(--home-logo-rotate))
    scale(var(--home-logo-scale)) !important;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.28s ease,
    box-shadow 0.28s ease !important;
  will-change: transform, filter !important;
}

.cover-logo.is-dragging,
.home-page .cover-logo.is-dragging {
  --home-logo-scale: 1.06;
  transition: none !important;
  filter: drop-shadow(18px 18px 0 rgba(233, 50, 34, 0.18)) !important;
}

.cover-logo.is-dropped,
.home-page .cover-logo.is-dropped {
  animation: logoDropBounce 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes logoDropBounce {
  0% {
    transform:
      translate3d(var(--home-logo-drag-x), var(--home-logo-drag-y), 0)
      rotate(var(--home-logo-rotate))
      scale(1.06);
  }
  45% {
    transform:
      translate3d(var(--home-logo-drag-x), var(--home-logo-drag-y), 0)
      rotate(0deg)
      scale(0.96);
  }
  100% {
    transform:
      translate3d(var(--home-logo-drag-x), var(--home-logo-drag-y), 0)
      rotate(0deg)
      scale(1);
  }
}



/* RESTORED FOOTER FROM STAR_STUDIO-footer-clean-hero-drag
   This overrides the newer footer-clean-motion-logo footer styling and brings back
   the previous footer appearance.
*/
/* FINAL FOOTER CLEANUP + HERO LOGO INTERACTION FIX */

/* Remove visible noise/grid texture from the footer container */
.site-footer .footer-inner,
.footer-inner {
  background: rgba(255, 255, 255, 0.72) !important;
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  isolation: isolate !important;
}

.site-footer .footer-inner::before,
.site-footer .footer-inner::after,
.footer-inner::before,
.footer-inner::after {
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  display: none !important;
  content: none !important;
}

/* Fix spacing: Designed by STAR STUDIO */
.footer-designed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28em !important;
  white-space: nowrap !important;
}

/* STAR STUDIO inside Designed by */
.footer-designed .footer-brand,
.footer-designed .footer-brand.star-studio-text,
.footer-designed .footer-brand.star-studio-wordmark,
.footer-designed .footer-brand.has-star-studio-text {
  color: #c7c7c7 !important;
  transition: color 0.22s ease !important;
}

.footer-designed:hover .footer-brand,
.footer-designed .footer-brand:hover,
.footer-designed .footer-brand.star-studio-text:hover,
.footer-designed .footer-brand.star-studio-wordmark:hover {
  color: #000000 !important;
}

/* Instagram color + hover */
.footer-social,
.footer-social.footer-scramble {
  color: #c7c7c7 !important;
  transition: color 0.22s ease !important;
}

.footer-social:hover,
.footer-social.footer-scramble:hover {
  color: #000000 !important;
}

/* Footer restored: keep text/color behavior from that version */
.footer-designed {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.28em !important;
  white-space: nowrap !important;
}

.footer-designed .footer-brand,
.footer-designed .footer-brand.star-studio-text,
.footer-designed .footer-brand.star-studio-wordmark,
.footer-designed .footer-brand.has-star-studio-text {
  color: #c7c7c7 !important;
  transition: color 0.22s ease !important;
}

.footer-designed:hover .footer-brand,
.footer-designed .footer-brand:hover,
.footer-designed .footer-brand.star-studio-text:hover,
.footer-designed .footer-brand.star-studio-wordmark:hover {
  color: #000000 !important;
}

.footer-social,
.footer-social.footer-scramble {
  color: #c7c7c7 !important;
  transition: color 0.22s ease !important;
}

.footer-social:hover,
.footer-social.footer-scramble:hover {
  color: #000000 !important;
}



/* About page animation + eyebrow size fix */

/* Re-add first About text animation without breaking STAR STUDIO wordmark styling */
.about-page .about-hero h1.about-hero-title-animated {
  opacity: 0;
  transform: translateY(34px) skewY(2deg);
  filter: blur(8px);
  transform-origin: left bottom;
}

.about-page .about-hero h1.about-hero-title-animated.is-visible {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
  filter: blur(0);
  transition:
    opacity 0.72s ease,
    transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s ease;
}

/* Keep STAR STUDIO in Helios while the heading animates */
.about-page .about-hero h1 .star-studio-wordmark {
  font-family: "HeliosExtWordmarkFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
}

/* Make GRID / TEXTURE / @MODE match the small label scale used on other pages */
.about-page .about-hero .eyebrow,
.about-page .about-hero .about-eyebrow-match {
  font-size: clamp(12px, 1.05vw, 16px) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}



/* Final about scramble + tag size fix */

/* Remove the previous CSS-only animation, because About now uses the same JS scramble as the other headings */
.about-page .about-hero h1.about-hero-title-animated,
.about-page .about-hero h1.scramble {
  filter: none !important;
}

/* The final restored STAR STUDIO wordmark still uses HeliosExt Bold */
.about-page .about-hero h1 .star-studio-wordmark {
  font-family: "HeliosExtWordmarkFinal", "HeliosExt", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.07em !important;
  text-transform: uppercase !important;
}

/* Match all small page tags to the Works page eyebrow size */
.eyebrow,
.section-label,
.about-page .about-hero .eyebrow,
.about-page .about-hero .about-eyebrow-match,
.works-intro .eyebrow,
.moodboard-page .eyebrow,
.contact-page .eyebrow,
.project-page .eyebrow {
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}



/* FINAL STABLE HERO LOGO
   The hero logo always starts from its original layout position on refresh.
   Dragging uses variables only and cannot persist/glitch between sessions.
*/
.cover-logo,
.home-page .cover-logo {
  --hero-logo-x: 0px;
  --hero-logo-y: 0px;
  --hero-logo-rotate: 0deg;
  --hero-logo-scale: 1;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;

  position: relative !important;
  z-index: 90 !important;
  cursor: grab !important;

  transform:
    translate3d(var(--hero-logo-x), var(--hero-logo-y), 0)
    rotate(var(--hero-logo-rotate))
    scale(var(--hero-logo-scale)) !important;

  will-change: transform !important;
  transition:
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.25s ease !important;
}

.cover-logo *,
.home-page .cover-logo * {
  pointer-events: none !important;
  touch-action: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.cover-logo.is-dragging,
.home-page .cover-logo.is-dragging {
  z-index: 9999 !important;
  cursor: grabbing !important;
  transition: none !important;
  filter: drop-shadow(14px 14px 0 rgba(233, 50, 34, 0.16)) !important;
}

.cover-logo.is-dropped,
.home-page .cover-logo.is-dropped {
  animation: heroLogoStableDrop 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes heroLogoStableDrop {
  0% {
    transform:
      translate3d(var(--hero-logo-x), var(--hero-logo-y), 0)
      rotate(0deg)
      scale(1.05);
  }

  55% {
    transform:
      translate3d(var(--hero-logo-x), var(--hero-logo-y), 0)
      rotate(0deg)
      scale(0.975);
  }

  100% {
    transform:
      translate3d(var(--hero-logo-x), var(--hero-logo-y), 0)
      rotate(0deg)
      scale(1);
  }
}

/* Disable older drag variables if any rule still references them */
.cover-logo,
.home-page .cover-logo {
  --home-logo-drag-x: 0px !important;
  --home-logo-drag-y: 0px !important;
}



/* MOBILE/TABLET PROJECT DISPLAY OPTIONS
   Desktop remains unchanged. On mobile/tablet the archive can switch between:
   Grid, list with small image, and list with big image.
*/

.mobile-project-view-switch {
  display: none;
}

.mobile-project-thumb {
  display: none;
}

@media (max-width: 1023px) {
  .project-archive {
    --mobile-project-thumb-size: 72px;
    --mobile-project-radius: 0px;
  }

  .mobile-project-view-switch {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 22px;
    padding: 12px;
    border: 1px solid #c7c7c7;
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
  }

  .mobile-project-view-switch > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-project-view-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-project-view-options button {
    min-height: 36px;
    padding: 8px 9px;
    border: 1px solid rgba(17, 17, 17, 0.34);
    border-radius: 0;
    background: rgba(245, 244, 239, 0.64);
    color: #111111;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
      background 0.22s ease,
      color 0.22s ease,
      border-color 0.22s ease;
  }

  .mobile-project-view-options button.is-active {
    border-color: #111111;
    background: #111111;
    color: #f5f4ef;
  }

  .archive-table {
    display: grid;
    gap: 12px;
  }

  .archive-row {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.18);
    background: rgba(245, 244, 239, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
      transform 0.22s ease,
      background 0.22s ease,
      border-color 0.22s ease;
  }

  .archive-row:hover {
    transform: translateY(-2px);
    border-color: rgba(17, 17, 17, 0.48);
    background: rgba(255, 255, 255, 0.70);
  }

  .mobile-project-thumb {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, 0.18);
    background: rgba(255, 255, 255, 0.42);
    aspect-ratio: 1 / 1;
  }

  .mobile-project-thumb img,
  .mobile-project-thumb video,
  .mobile-project-media-el {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .mobile-project-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(17, 17, 17, 0.46);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.08em;
  }

  /* GRID VIEW */
  body.project-view-grid .archive-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.project-view-grid .archive-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 210px;
    padding: 10px;
  }

  body.project-view-grid .archive-row .mobile-project-thumb {
    width: 100%;
    aspect-ratio: 1.05 / 1;
  }

  body.project-view-grid .archive-row .archive-title {
    font-size: clamp(19px, 7vw, 32px);
    line-height: 0.92;
    letter-spacing: -0.08em;
  }

  body.project-view-grid .archive-row span:not(.mobile-project-thumb):not(.mobile-project-placeholder):not(.archive-title) {
    font-size: 9px;
    line-height: 1.05;
  }

  /* LIST + SMALL IMAGE */
  body.project-view-list-small .archive-table {
    grid-template-columns: 1fr;
  }

  body.project-view-list-small .archive-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-areas:
      "thumb title"
      "thumb code"
      "thumb category"
      "thumb year";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    padding: 10px;
  }

  body.project-view-list-small .archive-row .mobile-project-thumb {
    grid-area: thumb;
    width: 74px;
    height: 74px;
    aspect-ratio: 1 / 1;
  }

  body.project-view-list-small .archive-row .archive-title {
    grid-area: title;
    font-size: clamp(24px, 8vw, 42px);
    line-height: 0.88;
    letter-spacing: -0.09em;
  }

  body.project-view-list-small .archive-row span:nth-of-type(2) {
    grid-area: code;
  }

  body.project-view-list-small .archive-row span:nth-of-type(3) {
    grid-area: category;
  }

  body.project-view-list-small .archive-row span:nth-of-type(4) {
    grid-area: year;
  }

  body.project-view-list-small .archive-row span:not(.mobile-project-thumb):not(.mobile-project-placeholder):not(.archive-title) {
    font-size: 9px;
    line-height: 1;
  }

  /* LIST + BIG IMAGE */
  body.project-view-list-big .archive-table {
    grid-template-columns: 1fr;
  }

  body.project-view-list-big .archive-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  body.project-view-list-big .archive-row .mobile-project-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  body.project-view-list-big .archive-row .archive-title {
    font-size: clamp(34px, 12vw, 76px);
    line-height: 0.84;
    letter-spacing: -0.105em;
  }

  body.project-view-list-big .archive-row span:not(.mobile-project-thumb):not(.mobile-project-placeholder):not(.archive-title) {
    font-size: 10px;
    line-height: 1;
  }

  .archive-row span:not(.mobile-project-thumb):not(.mobile-project-placeholder) {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .mobile-project-view-options {
    grid-template-columns: 1fr;
  }

  body.project-view-grid .archive-table {
    grid-template-columns: 1fr;
  }

  body.project-view-grid .archive-row {
    min-height: auto;
  }
}



/* REFINED MOBILE/TABLET PROJECT DISPLAY
   - Mobile: only Small / Big view.
   - Tablet: fixed 2-column grid, no view switch needed.
   - Uses ISSUE 01-08 styling and richer project info.
   - Keeps the already placed project images/videos.
*/

/* Hide the older top works index/list only on mobile/tablet */
@media (max-width: 1023px) {
  .works-index,
  .works-controls {
    display: none !important;
  }
}

/* Smaller display mode control */
@media (max-width: 767px) {
  .mobile-project-view-switch {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 10px 0 16px !important;
    padding: 6px !important;
    border: 1px solid #c7c7c7 !important;
    background: rgba(255, 255, 255, 0.50) !important;
    backdrop-filter: blur(10px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  }

  .mobile-project-view-switch > span {
    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    color: #8d8d8d !important;
    text-transform: uppercase !important;
  }

  .mobile-project-view-options {
    display: inline-flex !important;
    gap: 4px !important;
  }

  .mobile-project-view-options button {
    min-height: 24px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(17, 17, 17, 0.35) !important;
    background: rgba(245, 244, 239, 0.58) !important;
    color: #111111 !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .mobile-project-view-options button.is-active {
    background: #E93222 !important;
    border-color: #E93222 !important;
    color: #111111 !important;
  }
}

/* Tablet keeps a clean 2-column grid, no small/big selector */
@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-project-view-switch {
    display: none !important;
  }

  .archive-table {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .archive-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 320px !important;
    padding: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(17, 17, 17, 0.20) !important;
    background: rgba(245, 244, 239, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .archive-row .mobile-project-thumb {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border: 1px solid rgba(17, 17, 17, 0.18) !important;
    background: rgba(255, 255, 255, 0.45) !important;
  }

  .archive-row .mobile-project-thumb img,
  .archive-row .mobile-project-thumb video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .archive-row .mobile-issue-label {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 5px 7px !important;
    border: 1px solid #E93222 !important;
    color: #E93222 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
  }

  .archive-row .archive-title {
    font-size: clamp(34px, 6vw, 60px) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.105em !important;
    color: #111111 !important;
  }

  .archive-row .mobile-project-meta {
    display: block !important;
    color: #8d8d8d !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .archive-row > span:not(.mobile-project-thumb):not(.mobile-project-placeholder):not(.mobile-issue-label):not(.mobile-project-meta):not(.archive-title) {
    display: none !important;
  }
}

/* Mobile project cards */
@media (max-width: 767px) {
  .archive-table {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .archive-row {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(17, 17, 17, 0.20) !important;
    background: rgba(245, 244, 239, 0.62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  .archive-row .mobile-project-thumb {
    display: block !important;
    overflow: hidden !important;
    border: 1px solid rgba(17, 17, 17, 0.18) !important;
    background: rgba(255, 255, 255, 0.44) !important;
  }

  .archive-row .mobile-project-thumb img,
  .archive-row .mobile-project-thumb video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .archive-row .mobile-issue-label {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 5px 7px !important;
    border: 1px solid #E93222 !important;
    color: #E93222 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .archive-row .archive-title {
    color: #111111 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
  }

  .archive-row .mobile-project-meta {
    display: block !important;
    color: #8d8d8d !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .archive-row > span:not(.mobile-project-thumb):not(.mobile-project-placeholder):not(.mobile-issue-label):not(.mobile-project-meta):not(.archive-title) {
    display: none !important;
  }

  /* Small view */
  body.project-view-small .archive-row,
  body.project-view-list-small .archive-row {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-areas:
      "thumb issue"
      "thumb title"
      "thumb meta" !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: center !important;
    padding: 10px !important;
    min-height: 112px !important;
  }

  body.project-view-small .archive-row .mobile-project-thumb,
  body.project-view-list-small .archive-row .mobile-project-thumb {
    grid-area: thumb !important;
    width: 88px !important;
    height: 88px !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.project-view-small .archive-row .mobile-issue-label,
  body.project-view-list-small .archive-row .mobile-issue-label {
    grid-area: issue !important;
  }

  body.project-view-small .archive-row .archive-title,
  body.project-view-list-small .archive-row .archive-title {
    grid-area: title !important;
    font-size: clamp(34px, 12vw, 56px) !important;
    line-height: 0.82 !important;
    letter-spacing: -0.105em !important;
  }

  body.project-view-small .archive-row .mobile-project-meta,
  body.project-view-list-small .archive-row .mobile-project-meta {
    grid-area: meta !important;
  }

  /* Big view */
  body.project-view-big .archive-row,
  body.project-view-list-big .archive-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  body.project-view-big .archive-row .mobile-project-thumb,
  body.project-view-list-big .archive-row .mobile-project-thumb {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
  }

  body.project-view-big .archive-row .archive-title,
  body.project-view-list-big .archive-row .archive-title {
    font-size: clamp(48px, 17vw, 86px) !important;
    line-height: 0.80 !important;
    letter-spacing: -0.115em !important;
  }
}



/* MOBILE/TABLET PROJECT CARD REFINEMENT
   - Smaller project title sizes.
   - Images/videos better adapted to each card container.
*/

@media (max-width: 1023px) {
  .archive-row .mobile-project-thumb {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.42) !important;
  }

  .archive-row .mobile-project-thumb img,
  .archive-row .mobile-project-thumb video,
  .archive-row .mobile-project-media-el {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    aspect-ratio: inherit !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .archive-row .archive-title {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* Tablet: smaller titles, balanced image crop */
@media (min-width: 768px) and (max-width: 1023px) {
  .archive-row {
    min-height: 300px !important;
  }

  .archive-row .mobile-project-thumb {
    aspect-ratio: 4 / 3 !important;
  }

  .archive-row .archive-title {
    font-size: clamp(26px, 4.8vw, 46px) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.095em !important;
  }

  .archive-row .mobile-project-meta {
    font-size: 9px !important;
  }
}

/* Mobile small view: more controlled title scale */
@media (max-width: 767px) {
  body.project-view-small .archive-row,
  body.project-view-list-small .archive-row {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    min-height: 108px !important;
  }

  body.project-view-small .archive-row .mobile-project-thumb,
  body.project-view-list-small .archive-row .mobile-project-thumb {
    width: 86px !important;
    height: 86px !important;
    aspect-ratio: 1 / 1 !important;
  }

  body.project-view-small .archive-row .archive-title,
  body.project-view-list-small .archive-row .archive-title {
    font-size: clamp(26px, 9.5vw, 42px) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.095em !important;
  }

  body.project-view-small .archive-row .mobile-project-meta,
  body.project-view-list-small .archive-row .mobile-project-meta {
    font-size: 8px !important;
    line-height: 1.12 !important;
  }
}

/* Mobile big view: image fills nicely, title smaller than before */
@media (max-width: 767px) {
  body.project-view-big .archive-row,
  body.project-view-list-big .archive-row {
    gap: 9px !important;
    padding: 11px !important;
  }

  body.project-view-big .archive-row .mobile-project-thumb,
  body.project-view-list-big .archive-row .mobile-project-thumb {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  body.project-view-big .archive-row .archive-title,
  body.project-view-list-big .archive-row .archive-title {
    font-size: clamp(34px, 12.5vw, 62px) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.105em !important;
  }

  body.project-view-big .archive-row .mobile-project-meta,
  body.project-view-list-big .archive-row .mobile-project-meta {
    font-size: 8.5px !important;
  }
}

@media (max-width: 420px) {
  body.project-view-small .archive-row .archive-title,
  body.project-view-list-small .archive-row .archive-title {
    font-size: clamp(24px, 9vw, 36px) !important;
  }

  body.project-view-big .archive-row .archive-title,
  body.project-view-list-big .archive-row .archive-title {
    font-size: clamp(32px, 11.5vw, 54px) !important;
  }
}



/* MOBILE/TABLET: hide the first visible project-card list only.
   This removes the editorial selected-works card list from mobile/tablet,
   while keeping the second archive display list/grid visible.
*/
@media (max-width: 1023px) {
  .works-page .editorial-spread,
  .works-page .editorial-grid,
  .works-page .editorial-card {
    display: none !important;
  }
}



/* Gap between the archive top line and the first project row */
.archive-table {
  padding-top: 18px !important;
}



/* Footer opacity matched to MENU navbar */
.site-footer {
  background: transparent !important;
  background-image: none !important;
  position: sticky !important;
  bottom: 10px !important;
  z-index: 140 !important;
}

.site-footer .footer-inner,
.footer-inner {
  background: rgba(255, 255, 255, 0.50) !important;
  background-color: rgba(255, 255, 255, 0.50) !important;
  background-image: none !important;
  border: 1px solid #c7c7c7 !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.09) !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.site-footer .footer-inner::before,
.site-footer .footer-inner::after,
.footer-inner::before,
.footer-inner::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

@media (max-width: 1023px) {
  .site-footer {
    bottom: 8px !important;
  }
}



/* FINAL IMAGE VISIBILITY / NO-NOISE PATCH
   Removes visible noise/texture from all images and image containers.
   Images are fully visible at full opacity.
   Layout, positions, sizing, and existing structure are not changed.
*/

/* All image elements fully visible */
img,
picture,
svg image,
.mobile-project-media-el,
.mobile-project-thumb img,
.image img,
.image-main img,
.image-side img,
.project-image img,
.feature-image img,
.editorial-image img,
.about-image img,
.mood-item img,
.portfolio-frame img,
.portfolio-card img,
.portfolio-link img,
.archive-row img,
.work-slide img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  background-image: none !important;
}

/* Image containers: keep layout/position, remove only texture/noise visual effects */
.mobile-project-thumb,
.image,
.image-main,
.image-side,
.project-image,
.feature-image,
.editorial-image,
.about-image,
.mood-item,
.portfolio-frame,
.portfolio-card,
.portfolio-link,
.archive-row .mobile-project-thumb,
.work-slide .image {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background-image: none !important;
  isolation: isolate !important;
}

/* Neutralize pseudo-elements that create noise/texture over images */
.mobile-project-thumb::before,
.mobile-project-thumb::after,
.image::before,
.image::after,
.image-main::before,
.image-main::after,
.image-side::before,
.image-side::after,
.project-image::before,
.project-image::after,
.feature-image::before,
.feature-image::after,
.editorial-image::before,
.editorial-image::after,
.about-image::before,
.about-image::after,
.mood-item::before,
.mood-item::after,
.portfolio-frame::before,
.portfolio-frame::after,
.portfolio-card::before,
.portfolio-card::after,
.portfolio-link::before,
.portfolio-link::after,
.archive-row .mobile-project-thumb::before,
.archive-row .mobile-project-thumb::after,
.work-slide .image::before,
.work-slide .image::after {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Keep image thumbnails filling their boxes cleanly */
.mobile-project-thumb img,
.mobile-project-media-el {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Keep PDF/labels/buttons above images where already used */
.portfolio-stamp,
.view-work {
  z-index: 180 !important;
}



/* STRONG FIX: prevent global noise layer from sitting above media/content.
   The previous fix removed noise from image containers, but the global fixed .noise-layer
   was still visually overlaying the whole page. This places it behind content instead.
   Layout, positions and sizing stay unchanged.
*/

/* Move global noise behind the site content instead of on top of images/videos */
.noise-layer {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Put normal site content above the noise layer */
.site-header,
main,
.page-section,
.site-footer,
.cookie-banner,
.cookie-modal {
  position: relative !important;
  z-index: 2 !important;
}

/* Keep media especially clean and above the background/noise layer */
img,
video,
picture,
.mobile-project-media-el,
.mobile-project-thumb,
.mobile-project-thumb img,
.mobile-project-thumb video,
.image,
.image-main,
.image-side,
.image img,
.image video,
.image-main img,
.image-main video,
.image-side img,
.image-side video,
.project-image,
.project-image img,
.project-image video,
.feature-image,
.feature-image img,
.feature-image video,
.editorial-image,
.editorial-image img,
.editorial-image video,
.about-image,
.about-image img,
.about-image video,
.mood-item,
.mood-item img,
.mood-item video,
.portfolio-frame,
.portfolio-frame img,
.portfolio-frame video,
.portfolio-card,
.portfolio-card img,
.portfolio-card video,
.portfolio-link,
.portfolio-link img,
.portfolio-link video,
.archive-row .mobile-project-thumb,
.archive-row .mobile-project-thumb img,
.archive-row .mobile-project-thumb video,
.work-slide .image,
.work-slide .image img,
.work-slide .image video {
  position: relative !important;
  z-index: 3 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background-image: none !important;
  isolation: isolate !important;
}

/* Disable media-only overlays/pseudo texture */
.mobile-project-thumb::before,
.mobile-project-thumb::after,
.image::before,
.image::after,
.image-main::before,
.image-main::after,
.image-side::before,
.image-side::after,
.project-image::before,
.project-image::after,
.feature-image::before,
.feature-image::after,
.editorial-image::before,
.editorial-image::after,
.about-image::before,
.about-image::after,
.mood-item::before,
.mood-item::after,
.portfolio-frame::before,
.portfolio-frame::after,
.portfolio-card::before,
.portfolio-card::after,
.portfolio-link::before,
.portfolio-link::after,
.archive-row .mobile-project-thumb::before,
.archive-row .mobile-project-thumb::after,
.work-slide .image::before,
.work-slide .image::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Preserve visible thumbnails and fill containers cleanly */
.mobile-project-thumb img,
.mobile-project-thumb video,
.mobile-project-media-el {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}



/* KEEP HERO NOISE + STICKY FOOTER
   The global noise stays behind image/video media, but the hero section gets its own
   visible texture layer. Footer remains sticky.
*/

/* Keep global noise behind content so it does not cover images/videos */
.noise-layer {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Add visible noise/texture back only on the home hero section */
.home-cover {
  position: relative !important;
  isolation: isolate !important;
}

.home-cover::after {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 0.04 !important;
  background-image:
    radial-gradient(#000 1px, transparent 1px),
    linear-gradient(120deg, transparent, rgba(0, 0, 0, 0.12), transparent) !important;
  background-size: 4px 4px, 260px 260px !important;
  mix-blend-mode: multiply !important;
}

/* Keep hero content above the hero texture */
.home-cover > *,
.home-cover .home-cover-grid,
.home-cover .cover-topline,
.home-cover .ticker {
  position: relative !important;
  z-index: 2 !important;
}

/* Keep images/videos clean even inside or near hero */
.home-cover img,
.home-cover video,
img,
video {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Footer sticky */
.site-footer {
  position: sticky !important;
  bottom: 10px !important;
  z-index: 140 !important;
  background: transparent !important;
  background-image: none !important;
}

.site-footer .footer-inner,
.footer-inner {
  background-image: none !important;
  isolation: isolate !important;
}

@media (max-width: 1023px) {
  .site-footer {
    bottom: 8px !important;
  }
}



/* Add noise texture to the first Works section only */
.works-page .works-intro {
  position: relative !important;
  isolation: isolate !important;
}

.works-page .works-intro::after {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 0.04 !important;
  background-image:
    radial-gradient(#000 1px, transparent 1px),
    linear-gradient(120deg, transparent, rgba(0, 0, 0, 0.12), transparent) !important;
  background-size: 4px 4px, 260px 260px !important;
  mix-blend-mode: multiply !important;
}

/* Keep Works intro content above the texture */
.works-page .works-intro > * {
  position: relative !important;
  z-index: 2 !important;
}



/* Add noise texture to the selected works stage section */
.works-page .works-stage {
  position: relative !important;
  isolation: isolate !important;
}

.works-page .works-stage::after {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 0.04 !important;
  background-image:
    radial-gradient(#000 1px, transparent 1px),
    linear-gradient(120deg, transparent, rgba(0, 0, 0, 0.12), transparent) !important;
  background-size: 4px 4px, 260px 260px !important;
  mix-blend-mode: multiply !important;
}

/* Keep all works stage content above that section texture */
.works-page .works-stage > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Keep displayed images/videos clean above the stage texture */
.works-page .works-stage .image,
.works-page .works-stage .image-main,
.works-page .works-stage .image-side,
.works-page .works-stage img,
.works-page .works-stage video {
  position: relative !important;
  z-index: 3 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

/* Keep the View work button and right-side index above images */
.works-page .works-stage .view-work,
.works-page .works-stage .works-index,
.works-page .works-stage .slide-meta,
.works-page .works-stage .slide-pullquote,
.works-page .works-stage .slide-title {
  position: absolute !important;
  z-index: 4 !important;
}



/* RESTORE WORKS STAGE LAYOUT
   Keeps the section noise, but restores the selected works content positioning.
   The previous generic .works-stage > * rule was forcing layout changes.
*/

.works-page .works-stage {
  position: relative !important;
  isolation: isolate !important;
}

/* Noise remains on the section background */
.works-page .works-stage::after {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 0.04 !important;
  background-image:
    radial-gradient(#000 1px, transparent 1px),
    linear-gradient(120deg, transparent, rgba(0, 0, 0, 0.12), transparent) !important;
  background-size: 4px 4px, 260px 260px !important;
  mix-blend-mode: multiply !important;
}

/* Restore original slide positioning */
.works-page .work-slide {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

/* Restore original image positions */
.works-page .image {
  position: absolute !important;
}

.works-page .image-main {
  position: absolute !important;
  top: clamp(110px, 18vh, 180px) !important;
  left: clamp(18px, 6vw, 96px) !important;
  width: min(46vw, 720px) !important;
  height: min(61vh, 620px) !important;
}

.works-page .image-side {
  position: absolute !important;
  right: clamp(18px, 8vw, 120px) !important;
  bottom: clamp(96px, 16vh, 160px) !important;
  width: min(24vw, 360px) !important;
  height: min(34vh, 340px) !important;
}

/* Restore original text/meta/index placements */
.works-page .slide-title {
  position: absolute !important;
  bottom: clamp(46px, 8vh, 86px) !important;
  left: clamp(18px, 6vw, 96px) !important;
  z-index: 5 !important;
}

.works-page .slide-meta {
  position: absolute !important;
  top: clamp(110px, 18vh, 180px) !important;
  right: clamp(18px, 4vw, 56px) !important;
  z-index: 6 !important;
}

.works-page .slide-pullquote {
  position: absolute !important;
  right: clamp(18px, 6vw, 96px) !important;
  bottom: clamp(96px, 16vh, 160px) !important;
  z-index: 6 !important;
}

.works-page .works-index {
  position: absolute !important;
  top: 50% !important;
  right: clamp(18px, 4vw, 56px) !important;
  z-index: 18 !important;
  transform: translateY(-50%) !important;
}

.works-page .works-controls {
  position: absolute !important;
  right: clamp(18px, 4vw, 56px) !important;
  bottom: clamp(28px, 6vh, 62px) !important;
  z-index: 20 !important;
}

/* Keep View work exactly centered over the image area and in front */
.works-page .view-work {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 22 !important;
  transform: translate(-50%, -50%) scale(0.9) !important;
}

.works-page .work-slide:hover .view-work {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Keep images clean and above the background noise without moving them */
.works-page .works-stage .image,
.works-page .works-stage img,
.works-page .works-stage video {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}



/* HOME PAGE: full-width ticker banner */
.home-page .ticker,
.home-cover .ticker {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}

.home-page .ticker .ticker-track,
.home-cover .ticker .ticker-track {
  width: max-content !important;
}



/* Project pages: add 8px gap before the text begins after the meta tags */
.project-cover-meta + h1,
.project-cover-meta + p,
.project-specs + h1,
.project-specs + p,
.project-meta + h1,
.project-meta + p {
  margin-top: 8px !important;
}



/* PROJECT PAGES: responsive media fit fix
   Keeps the existing desktop/mobile/tablet container aspect ratios,
   but makes the images/videos adapt inside those containers instead of being cropped badly.
*/

.project-page .project-image,
.project-page .project-media,
.project-page .project-hero-image,
.project-page .case-image,
.project-page .case-media {
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Main fix: project page images/videos keep full visibility inside any UI aspect ratio */
.project-page .project-image img,
.project-page .project-image video,
.project-page .project-media img,
.project-page .project-media video,
.project-page .project-hero-image img,
.project-page .project-hero-image video,
.project-page .case-image img,
.project-page .case-image video,
.project-page .case-media img,
.project-page .case-media video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

/* Make empty/placeholder project image boxes behave consistently too */
.project-page .project-image span,
.project-page .project-media span,
.project-page .case-image span,
.project-page .case-media span {
  position: relative !important;
  z-index: 2 !important;
}

/* Neutral background so contain-fit media still looks intentional */
.project-page .project-image,
.project-page .project-media,
.project-page .project-hero-image,
.project-page .case-image,
.project-page .case-media {
  background-color: rgba(245, 244, 239, 0.72) !important;
  background-image: none !important;
}

/* Remove noise/overlay only from project page media boxes */
.project-page .project-image::before,
.project-page .project-image::after,
.project-page .project-media::before,
.project-page .project-media::after,
.project-page .project-hero-image::before,
.project-page .project-hero-image::after,
.project-page .case-image::before,
.project-page .case-image::after,
.project-page .case-media::before,
.project-page .case-media::after {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}

/* Mobile/tablet: keep same rule, slightly cleaner presentation */
@media (max-width: 1023px) {
  .project-page .project-image img,
  .project-page .project-image video,
  .project-page .project-media img,
  .project-page .project-media video,
  .project-page .project-hero-image img,
  .project-page .project-hero-image video,
  .project-page .case-image img,
  .project-page .case-image video,
  .project-page .case-media img,
  .project-page .case-media video {
    object-fit: contain !important;
    object-position: center center !important;
  }
}



/* PROJECT PAGES: adaptive media containers
   The container now adapts to the real image/video ratio instead of forcing
   desktop/mobile crops. Layout width and placement remain the same.
*/

.project-page .project-image,
.project-page .project-media,
.project-page .project-hero-image,
.project-page .case-image,
.project-page .case-media {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: block !important;
  aspect-ratio: var(--media-ratio, auto) !important;
}

/* When JS detects the media ratio, the wrapper uses that ratio */
.project-page .project-image.has-adaptive-media,
.project-page .project-media.has-adaptive-media,
.project-page .project-hero-image.has-adaptive-media,
.project-page .case-image.has-adaptive-media,
.project-page .case-media.has-adaptive-media {
  aspect-ratio: var(--media-ratio) !important;
}

/* Image/video fills the adaptive ratio without distortion */
.project-page .project-image img,
.project-page .project-image video,
.project-page .project-media img,
.project-page .project-media video,
.project-page .project-hero-image img,
.project-page .project-hero-image video,
.project-page .case-image img,
.project-page .case-image video,
.project-page .case-media img,
.project-page .case-media video {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* If the wrapper uses aspect-ratio, media can fill it cleanly */
.project-page .has-adaptive-media > img,
.project-page .has-adaptive-media > video {
  height: 100% !important;
}

/* Mobile/tablet: same adaptive logic, no forced crop */
@media (max-width: 1023px) {
  .project-page .project-image,
  .project-page .project-media,
  .project-page .project-hero-image,
  .project-page .case-image,
  .project-page .case-media {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}



/* PRIVACY / COOKIE CONTROL REPAIR
   Keeps the sticky footer usable and prevents the cookie banner from hiding under/behind it.
*/

.cookie-banner {
  left: clamp(14px, 3vw, 32px) !important;
  right: clamp(14px, 3vw, 32px) !important;
  bottom: clamp(92px, 8vw, 118px) !important;
  z-index: 9000 !important;
  display: none;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.cookie-banner.is-visible {
  display: grid !important;
}

.cookie-banner__copy {
  min-width: 0 !important;
}

.cookie-banner__copy p {
  max-width: none !important;
  overflow-wrap: anywhere !important;
}

.cookie-banner__actions {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.cookie-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Footer stays sticky but below cookie controls */
.site-footer {
  position: sticky !important;
  bottom: 10px !important;
  z-index: 140 !important;
}

@media (max-width: 900px) {
  .cookie-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: 88px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .cookie-banner__actions {
    width: 100% !important;
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .cookie-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 6px !important;
    font-size: 9px !important;
  }

  .cookie-banner__copy p {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  .cookie-banner__label {
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  .cookie-banner__actions {
    grid-template-columns: 1fr !important;
  }
}



/* FINAL PRIVACY CONTROL POP-UP FIX
   Makes the cookie banner behave like a real viewport overlay/pop-up,
   independent from page/footer layout.
*/

body.cookie-control-open {
  padding-bottom: 0 !important;
}

.cookie-banner {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: clamp(88px, 8vw, 112px) !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;

  width: min(1120px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100vh - 120px) !important;

  display: none !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;

  padding: 14px 16px !important;
  border: 1px solid #111111 !important;
  background: rgba(245, 244, 239, 0.94) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.22),
    0 12px 34px rgba(0, 0, 0, 0.12) !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

.cookie-banner.is-visible {
  display: grid !important;
  animation: cookiePopupIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes cookiePopupIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.cookie-banner__copy {
  min-width: 0 !important;
}

.cookie-banner__copy p {
  max-width: none !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.cookie-banner__label {
  display: block !important;
  margin: 0 0 5px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.cookie-banner__actions {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.cookie-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-height: 36px !important;
  padding: 9px 12px !important;
}

.cookie-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
}

.cookie-modal.is-visible {
  display: grid !important;
}

/* Footer stays sticky, but under cookie controls */
.site-footer {
  position: sticky !important;
  bottom: 10px !important;
  z-index: 140 !important;
}

@media (max-width: 700px) {
  .cookie-banner {
    bottom: 92px !important;
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    max-height: calc(100vh - 120px) !important;
    overflow: auto !important;
  }

  .cookie-banner__actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .cookie-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 6px !important;
    font-size: 9px !important;
  }

  .cookie-banner__copy p {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  .cookie-banner__label {
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  .cookie-banner__actions {
    grid-template-columns: 1fr !important;
  }
}



/* PRIVACY POPUP STYLE MATCHED TO MENU NAVBAR
   Same glassy opacity/blur treatment as the menu navbar.
*/

.cookie-banner {
  background: rgba(255, 255, 255, 0.50) !important;
  background-color: rgba(255, 255, 255, 0.50) !important;
  border: 1px solid #c7c7c7 !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.09) !important;
}

.cookie-banner::before,
.cookie-banner::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Keep modal panel in same visual family if opened */
.cookie-modal__panel,
.cookie-modal .modal-panel,
.cookie-modal .cookie-panel {
  background: rgba(255, 255, 255, 0.50) !important;
  background-color: rgba(255, 255, 255, 0.50) !important;
  border: 1px solid #c7c7c7 !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.09) !important;
}



/* COOKIE PREFERENCES OPACITY + HOME INTRO LAYER FIX
   - Cookie preference popup is slightly more opaque.
   - Cookie controls stay behind the home intro animation while the intro is active.
*/

/* Slightly more opaque than navbar, but still glassy */
.cookie-banner,
.cookie-modal__panel,
.cookie-modal .modal-panel,
.cookie-modal .cookie-panel {
  background: rgba(255, 255, 255, 0.72) !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
}

/* Normal state: privacy controls still behave like popups */
.cookie-banner {
  z-index: 8500 !important;
}

.cookie-modal {
  z-index: 8600 !important;
}

/* During the home intro/preloader animation, keep cookie controls behind it */
body.intro-active .cookie-banner,
body.is-loading .cookie-banner,
body.preloader-active .cookie-banner,
body.home-intro-active .cookie-banner {
  z-index: 20 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.intro-active .cookie-modal,
body.is-loading .cookie-modal,
body.preloader-active .cookie-modal,
body.home-intro-active .cookie-modal {
  z-index: 20 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Common intro/preloader layers should always stay above cookie controls while visible */
.intro,
.intro-screen,
.home-intro-animation,
.preloader,
.loader,
.loading-screen,
.site-intro,
.page-intro {
  z-index: 99999 !important;
}



/* COOKIE PREFERENCES — ALL UI FIX
   Desktop / laptop / tablet / mobile share the same repaired behavior,
   with responsive sizing so the controls do not overlap, clip, or stay stuck.
*/

.cookie-banner {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: clamp(86px, 7vw, 116px) !important;
  transform: translateX(-50%) !important;
  z-index: 8500 !important;

  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100svh - 128px) !important;

  display: none !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;

  padding: 14px 16px !important;
  box-sizing: border-box !important;
  overflow: visible !important;

  border: 1px solid #c7c7c7 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.09) !important;
}

.cookie-banner.is-visible {
  display: grid !important;
}

.cookie-banner__copy {
  min-width: 0 !important;
}

.cookie-banner__copy p {
  max-width: none !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

.cookie-banner__actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

.cookie-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Preferences modal repaired for all UI sizes */
.cookie-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8600 !important;
  padding: clamp(14px, 3vw, 32px) !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}

.cookie-modal.is-visible {
  display: grid !important;
}

.cookie-modal__panel,
.cookie-modal .modal-panel,
.cookie-modal .cookie-panel {
  width: min(720px, calc(100vw - 28px)) !important;
  max-width: calc(100vw - 28px) !important;
  max-height: calc(100svh - 32px) !important;
  overflow: auto !important;
  box-sizing: border-box !important;

  background: rgba(255, 255, 255, 0.72) !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid #c7c7c7 !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
}

.cookie-modal__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

/* Laptop / smaller desktop */
@media (min-width: 1024px) and (max-width: 1366px) {
  .cookie-banner {
    width: min(980px, calc(100vw - 28px)) !important;
    bottom: 82px !important;
    padding: 12px 14px !important;
  }

  .cookie-banner__copy p {
    font-size: 12px !important;
    line-height: 1.22 !important;
  }

  .cookie-btn {
    min-height: 32px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .cookie-banner {
    bottom: 82px !important;
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    overflow: auto !important;
  }

  .cookie-banner__actions {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .cookie-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 8px !important;
    font-size: 9px !important;
  }

  .cookie-banner__copy p {
    font-size: 11px !important;
    line-height: 1.22 !important;
  }

  .cookie-modal__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .cookie-banner {
    left: 50% !important;
    bottom: 78px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100svh - 104px) !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
    overflow: auto !important;
  }

  .cookie-banner__label {
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .cookie-banner__copy p {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  .cookie-banner__actions {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .cookie-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 8px 6px !important;
    font-size: 9px !important;
  }

  .cookie-modal {
    padding: 10px !important;
  }

  .cookie-modal__panel,
  .cookie-modal .modal-panel,
  .cookie-modal .cookie-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100svh - 20px) !important;
  }

  .cookie-modal__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* Tiny mobile */
@media (max-width: 390px) {
  .cookie-banner {
    bottom: 72px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 9px !important;
  }

  .cookie-banner__copy p {
    font-size: 10px !important;
  }
}



/* MOODBOARD: adaptive image containers
   Moodboard items now adapt to their actual image/video ratio.
   Images stay fully visible and containers are no longer forced into mismatched crops.
*/

.moodboard-page .mood-item {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: block !important;
  aspect-ratio: var(--mood-media-ratio, auto) !important;
}

.moodboard-page .mood-item.has-adaptive-media {
  aspect-ratio: var(--mood-media-ratio) !important;
}

.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

.moodboard-page .mood-item.has-adaptive-media > img,
.moodboard-page .mood-item.has-adaptive-media > video {
  height: 100% !important;
}

.moodboard-page .mood-item::before,
.moodboard-page .mood-item::after {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}

.moodboard-page .mood-item span {
  position: relative !important;
  z-index: 2 !important;
}



/* FAVICON / MOODBOARD UPDATE */

/* Make moodboard images/cards bigger while keeping adaptive ratios */
.moodboard-page .moodboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.8vw, 20px) !important;
}

.moodboard-page .mood-item {
  width: 100% !important;
}

.moodboard-page .mood-item.wide {
  grid-column: span 2 !important;
}

.moodboard-page .mood-item.tall {
  grid-row: span 1 !important;
}

/* Let the image occupy the box more prominently */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Mobile/tablet: keep items larger and cleaner */
@media (max-width: 1023px) {
  .moodboard-page .moodboard-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .moodboard-page .mood-item.wide {
    grid-column: span 1 !important;
  }
}



/* FINAL MOODBOARD SIZE + FAVICON/TITLE UPDATE */

/* Make moodboard images/cards larger and more dominant */
.moodboard-page .moodboard-grid,
.moodboard-page .mood-grid,
.moodboard-page .visual-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(14px, 2vw, 24px) !important;
  align-items: start !important;
}

/* Larger base card size */
.moodboard-page .mood-item {
  width: 100% !important;
  min-height: clamp(360px, 54vw, 720px) !important;
  height: auto !important;
  overflow: hidden !important;
}

/* Wide cards become large panoramic moments */
.moodboard-page .mood-item.wide {
  grid-column: span 2 !important;
  min-height: clamp(420px, 48vw, 780px) !important;
}

/* Tall cards become stronger vertical editorial blocks */
.moodboard-page .mood-item.tall {
  min-height: clamp(560px, 76vw, 980px) !important;
}

/* Images/videos fill the larger cards */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* On mobile/tablet, keep images large but single-column */
@media (max-width: 1023px) {
  .moodboard-page .moodboard-grid,
  .moodboard-page .mood-grid,
  .moodboard-page .visual-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    grid-column: span 1 !important;
    min-height: clamp(420px, 92vw, 760px) !important;
  }
}

@media (max-width: 520px) {
  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    min-height: clamp(360px, 105vw, 620px) !important;
  }
}



/* MOODBOARD IMAGE FIX
   - containers adapt to real media ratio
   - images are larger and cleaner
   - removes the oversized forced min-heights from previous patch
*/

.moodboard-page .mood-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

.moodboard-page .mood-item {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: var(--mood-media-ratio, 4 / 5) !important;
  overflow: hidden !important;
  background: rgba(245, 244, 239, 0.42) !important;
  background-image: none !important;
  display: block !important;
  isolation: isolate !important;
}

.moodboard-page .mood-item.wide {
  grid-column: span 2 !important;
  aspect-ratio: var(--mood-media-ratio, 16 / 9) !important;
}

.moodboard-page .mood-item.tall {
  aspect-ratio: var(--mood-media-ratio, 4 / 5) !important;
}

.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

.moodboard-page .mood-item::before,
.moodboard-page .mood-item::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

@media (max-width: 1023px) {
  .moodboard-page .mood-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    grid-column: span 1 !important;
    width: 100% !important;
    aspect-ratio: var(--mood-media-ratio, 4 / 5) !important;
    min-height: 0 !important;
  }
}



/* =========================================================
   MOODBOARD — CREATIVE EDITORIAL REBUILD
   Fixes the broken layout and turns the page into a controlled,
   asymmetric collage with no overlap issues.
   ========================================================= */

.moodboard-page .page-title {
  margin-bottom: 18px !important;
}

.moodboard-page .mood-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-auto-rows: 24px !important;
  grid-auto-flow: dense !important;
  gap: 16px !important;
  align-items: start !important;
  position: relative !important;
  margin-top: 10px !important;
  margin-bottom: 32px !important;
}

/* neutralize previous moodboard sizing rules */
.moodboard-page .mood-item,
.moodboard-page .mood-item.wide,
.moodboard-page .mood-item.tall {
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid rgba(17, 17, 17, 0.12) !important;
  background: rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.045) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  transform: translateZ(0) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.moodboard-page .mood-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.065) !important;
}

.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

.moodboard-page .mood-item::before,
.moodboard-page .mood-item::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Editorial collage layout */
.moodboard-page .mood-item[data-mood-slot="1"] {
  grid-column: 1 / span 3 !important;
  grid-row: span 15 !important;
}

.moodboard-page .mood-item[data-mood-slot="2"] {
  grid-column: 4 / span 2 !important;
  grid-row: span 12 !important;
}

.moodboard-page .mood-item[data-mood-slot="3"] {
  grid-column: 6 / span 3 !important;
  grid-row: span 10 !important;
  margin-top: 28px !important;
}

.moodboard-page .mood-item[data-mood-slot="4"] {
  grid-column: 9 / span 4 !important;
  grid-row: span 16 !important;
}

.moodboard-page .mood-item[data-mood-slot="5"] {
  grid-column: 1 / span 6 !important;
  grid-row: span 14 !important;
  margin-top: -8px !important;
}

.moodboard-page .mood-item[data-mood-slot="6"] {
  grid-column: 8 / span 3 !important;
  grid-row: span 10 !important;
  align-self: end !important;
}

/* if more items exist, keep them sane */
.moodboard-page .mood-item:nth-child(n+7) {
  grid-column: span 4 !important;
  grid-row: span 12 !important;
}

/* tablet */
@media (max-width: 1023px) {
  .moodboard-page .mood-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 22px !important;
    gap: 14px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    margin-top: 0 !important;
    align-self: auto !important;
  }

  .moodboard-page .mood-item[data-mood-slot="1"] { grid-column: 1 / span 1 !important; grid-row: span 14 !important; }
  .moodboard-page .mood-item[data-mood-slot="2"] { grid-column: 2 / span 1 !important; grid-row: span 10 !important; }
  .moodboard-page .mood-item[data-mood-slot="3"] { grid-column: 1 / span 1 !important; grid-row: span 9 !important; }
  .moodboard-page .mood-item[data-mood-slot="4"] { grid-column: 2 / span 1 !important; grid-row: span 14 !important; }
  .moodboard-page .mood-item[data-mood-slot="5"] { grid-column: 1 / span 2 !important; grid-row: span 13 !important; }
  .moodboard-page .mood-item[data-mood-slot="6"] { grid-column: 2 / span 1 !important; grid-row: span 10 !important; }
  .moodboard-page .mood-item:nth-child(n+7) { grid-column: span 1 !important; grid-row: span 12 !important; }
}

/* mobile */
@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall,
  .moodboard-page .mood-item[data-mood-slot="1"],
  .moodboard-page .mood-item[data-mood-slot="2"],
  .moodboard-page .mood-item[data-mood-slot="3"],
  .moodboard-page .mood-item[data-mood-slot="4"],
  .moodboard-page .mood-item[data-mood-slot="5"],
  .moodboard-page .mood-item[data-mood-slot="6"],
  .moodboard-page .mood-item:nth-child(n+7) {
    grid-column: span 1 !important;
    grid-row: auto !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    margin-top: 0 !important;
  }
}



/* =========================================================
   MOODBOARD — FULLY VISIBLE CREATIVE REWORK
   Goal:
   - keep the page creative
   - make every image fully visible
   - avoid the broken oversized / cropped layout
   - create an editorial pinboard / masonry feel
   ========================================================= */

.moodboard-page .mood-grid {
  column-count: 4 !important;
  column-gap: 16px !important;
  display: block !important;
  margin-top: 12px !important;
  margin-bottom: 36px !important;
  position: relative !important;
}

.moodboard-page .mood-item,
.moodboard-page .mood-item.wide,
.moodboard-page .mood-item.tall {
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  display: inline-block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 0 16px !important;
  overflow: hidden !important;
  position: relative !important;
  vertical-align: top !important;

  padding: 10px !important;
  border: 1px solid rgba(17, 17, 17, 0.12) !important;
  background: rgba(255, 255, 255, 0.56) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;

  transform-origin: center center !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

/* slight collage motion without overlap */
.moodboard-page .mood-item:nth-child(odd) {
  transform: rotate(-0.8deg) !important;
}
.moodboard-page .mood-item:nth-child(even) {
  transform: rotate(0.8deg) !important;
}
.moodboard-page .mood-item:nth-child(3n) {
  transform: rotate(-1.1deg) !important;
}
.moodboard-page .mood-item:hover {
  transform: translateY(-4px) rotate(0deg) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08) !important;
  z-index: 2 !important;
}

/* Media fully visible */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  border: 0 !important;
}

/* Placeholder cards */
.moodboard-page .mood-item span {
  display: block !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
  color: rgba(17, 17, 17, 0.45) !important;
  text-transform: uppercase !important;
}

.moodboard-page .mood-item:not(:has(img)):not(:has(video)) {
  min-height: 280px !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* clean up any old overlay/noise rules */
.moodboard-page .mood-item::before,
.moodboard-page .mood-item::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* Larger hero-like first item */
.moodboard-page .mood-item:first-child {
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

/* Tablet */
@media (max-width: 1199px) {
  .moodboard-page .mood-grid {
    column-count: 3 !important;
    column-gap: 14px !important;
  }
}

/* Tablet small */
@media (max-width: 1023px) {
  .moodboard-page .mood-grid {
    column-count: 2 !important;
    column-gap: 14px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    margin-bottom: 14px !important;
    padding: 9px !important;
    transform: none !important;
  }

  .moodboard-page .mood-item:hover {
    transform: translateY(-2px) !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    width: 100% !important;
    margin-bottom: 12px !important;
    padding: 8px !important;
    transform: none !important;
  }

  .moodboard-page .mood-item:not(:has(img)):not(:has(video)) {
    min-height: 220px !important;
  }
}



/* =========================================================
   MOODBOARD CARD SIZE BOOST
   - make the moodboard image cards larger
   - keep images fully visible
   - preserve the creative editorial pinboard feel
   ========================================================= */

.moodboard-page .mood-grid {
  column-count: 3 !important;   /* was visually denser; now larger cards */
  column-gap: 18px !important;
  margin-top: 16px !important;
}

.moodboard-page .mood-item,
.moodboard-page .mood-item.wide,
.moodboard-page .mood-item.tall {
  margin-bottom: 18px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.60) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.055) !important;
}

.moodboard-page .mood-item:first-child {
  padding: 14px !important;
}

.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* tablet */
@media (max-width: 1199px) {
  .moodboard-page .mood-grid {
    column-count: 2 !important;
    column-gap: 16px !important;
  }
}

/* mobile remains single column but with bigger visual presence */
@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    padding: 10px !important;
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   VIDEO LOOP SOFTENING
   Applies a subtle fade around the loop point for all site videos
   to make repeated autoplay/loop playback feel smoother.
   ========================================================= */

video.video-loop-soft {
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease !important;
  will-change: opacity, filter, transform !important;
}

video.video-loop-soft.is-loop-fading {
  opacity: 0.72 !important;
  filter: saturate(0.97) contrast(0.98) !important;
}



/* =========================================================
   MOODBOARD — POSTER / GRUNGE / PUNK TREATMENT
   - makes moodboard cards feel like printed posters/zines
   - keeps media fully visible
   - clicking a card opens a large lightbox view
   ========================================================= */

.moodboard-page .mood-grid {
  column-count: 3 !important;
  column-gap: 18px !important;
  margin-top: 18px !important;
  margin-bottom: 42px !important;
}

.moodboard-page .mood-item,
.moodboard-page .mood-item.wide,
.moodboard-page .mood-item.tall {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  overflow: hidden !important;
  vertical-align: top !important;
  margin: 0 0 20px !important;

  padding: 14px 14px 18px !important;
  border: 1.5px solid rgba(17, 17, 17, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,242,236,0.94)) !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.18),
    0 18px 38px rgba(0, 0, 0, 0.08) !important;

  cursor: zoom-in !important;
  isolation: isolate !important;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

/* subtle punk/editorial disorder */
.moodboard-page .mood-item:nth-child(odd) {
  transform: rotate(-1deg) !important;
}
.moodboard-page .mood-item:nth-child(even) {
  transform: rotate(0.95deg) !important;
}
.moodboard-page .mood-item:nth-child(3n) {
  transform: rotate(-0.45deg) !important;
}
.moodboard-page .mood-item:nth-child(4n) {
  transform: rotate(1.25deg) !important;
}

.moodboard-page .mood-item:hover {
  transform: translateY(-4px) rotate(0deg) scale(1.01) !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.24),
    0 24px 50px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(233, 50, 34, 0.66) !important;
  z-index: 3 !important;
}

/* top "poster strip" */
.moodboard-page .mood-item::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 10px !important;
  height: 8px !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(17,17,17,0.05) 0 8px,
      rgba(233,50,34,0.12) 8px 16px
    ) !important;
  opacity: 0.95 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* low-fi bottom note strip */
.moodboard-page .mood-item::after {
  content: "MOOD / POSTER / ARCHIVE" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 8px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(17, 17, 17, 0.42) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* full visibility of the media */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: contrast(1.02) saturate(0.98) !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

/* placeholder cards */
.moodboard-page .mood-item span {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  min-height: 280px !important;
  padding-top: 12px !important;
  color: rgba(17,17,17,0.42) !important;
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* tablet */
@media (max-width: 1199px) {
  .moodboard-page .mood-grid {
    column-count: 2 !important;
    column-gap: 16px !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    transform: none !important;
    padding: 12px 12px 16px !important;
    margin-bottom: 14px !important;
  }

  .moodboard-page .mood-item:hover {
    transform: translateY(-2px) !important;
  }
}

/* =========================================================
   MOODBOARD LIGHTBOX
   ========================================================= */

.moodboard-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  background: rgba(8, 8, 8, 0.72) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

.moodboard-lightbox.is-open {
  display: flex !important;
}

.moodboard-lightbox__panel {
  position: relative !important;
  width: min(92vw, 1280px) !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background:
    linear-gradient(180deg, rgba(250,250,248,0.96), rgba(241,239,234,0.94)) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.26),
    0 2px 0 rgba(255,255,255,0.2) inset !important;
}

.moodboard-lightbox__media-wrap {
  width: 100% !important;
  max-height: calc(90vh - 84px) !important;
  overflow: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.32) !important;
}

.moodboard-lightbox__media-wrap img,
.moodboard-lightbox__media-wrap video {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(90vh - 96px) !important;
  object-fit: contain !important;
}

.moodboard-lightbox__close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(17,17,17,0.78) !important;
  background: rgba(255,255,255,0.72) !important;
  color: #111 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, background 0.18s ease !important;
}

.moodboard-lightbox__close:hover {
  transform: scale(1.04) !important;
  background: rgba(255,255,255,0.92) !important;
}

@media (max-width: 767px) {
  .moodboard-lightbox {
    padding: 12px !important;
  }

  .moodboard-lightbox__panel {
    width: 100% !important;
    max-height: 92vh !important;
    padding: 12px !important;
  }

  .moodboard-lightbox__close {
    width: 38px !important;
    height: 38px !important;
  }
}



/* =========================================================
   MOODBOARD PAGE — FULL PUNK / POSTER / ZINE LOOK
   Applies to the whole page, not only the cards.
   Keeps the media fully visible and works on all breakpoints.
   ========================================================= */

.moodboard-page {
  position: relative !important;
}

/* overall page atmosphere */
.moodboard-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(233, 50, 34, 0.085), transparent 22%),
    radial-gradient(circle at 87% 22%, rgba(0, 0, 0, 0.055), transparent 18%),
    radial-gradient(circle at 72% 74%, rgba(233, 50, 34, 0.06), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,0.0), rgba(0,0,0,0.02)) !important;
  mix-blend-mode: multiply !important;
}

.moodboard-page::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.12 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 24px) !important;
}

/* make the main moodboard content feel like a curated wall of posters */
.moodboard-page .page-shell,
.moodboard-page main,
.moodboard-page .page-content,
.moodboard-page .content-shell {
  position: relative !important;
  z-index: 1 !important;
}

.moodboard-page .page-title,
.moodboard-page h1 {
  position: relative !important;
  display: inline-block !important;
  padding-right: 14px !important;
  margin-bottom: 18px !important;
}

.moodboard-page .page-title::after,
.moodboard-page h1::after {
  content: "ARCHIVE / PUNK / POSTER STUDY" !important;
  display: block !important;
  margin-top: 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #E93222 !important;
}

/* Add page-side poster note accents */
.moodboard-page .mood-grid {
  position: relative !important;
  column-count: 3 !important;
  column-gap: 20px !important;
  margin-top: 18px !important;
  margin-bottom: 44px !important;
}

.moodboard-page .mood-grid::before {
  content: "PULL / PIN / COLLECT / DISTORT" !important;
  position: absolute !important;
  top: -20px !important;
  right: 0 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(17, 17, 17, 0.34) !important;
}

.moodboard-page .mood-grid::after {
  content: "" !important;
  position: absolute !important;
  left: -8px !important;
  top: 34px !important;
  width: 6px !important;
  height: calc(100% - 48px) !important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(233,50,34,0.24) 0 16px,
      transparent 16px 32px
    ) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}

/* poster / zine cards */
.moodboard-page .mood-item,
.moodboard-page .mood-item.wide,
.moodboard-page .mood-item.tall {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  margin: 0 0 22px !important;
  padding: 16px 16px 20px !important;
  overflow: hidden !important;

  border: 1.5px solid rgba(17, 17, 17, 0.72) !important;
  background:
    linear-gradient(180deg, rgba(252,251,247,0.95), rgba(243,241,236,0.94)) !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.18),
    0 16px 34px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255,255,255,0.7) !important;

  isolation: isolate !important;
  cursor: zoom-in !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

/* messy editorial composition */
.moodboard-page .mood-item:nth-child(odd) { transform: rotate(-1.3deg) !important; }
.moodboard-page .mood-item:nth-child(even) { transform: rotate(1.15deg) !important; }
.moodboard-page .mood-item:nth-child(3n) { transform: rotate(-0.55deg) !important; }
.moodboard-page .mood-item:nth-child(5n) { transform: rotate(1.7deg) !important; }

.moodboard-page .mood-item:hover {
  transform: translateY(-5px) rotate(0deg) scale(1.015) !important;
  border-color: rgba(233, 50, 34, 0.72) !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    0 24px 50px rgba(0, 0, 0, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.76) !important;
  z-index: 5 !important;
}

/* top ripped strip / tape */
.moodboard-page .mood-item::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 10px !important;
  width: 62px !important;
  height: 18px !important;
  background:
    linear-gradient(180deg, rgba(233,50,34,0.25), rgba(233,50,34,0.12)) !important;
  border: 1px solid rgba(233,50,34,0.16) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset !important;
  opacity: 0.95 !important;
  transform: rotate(-4deg) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* editorial footer note on cards */
.moodboard-page .mood-item::after {
  content: "ISSUE / REFERENCE / CUT-UP" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 8px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(17,17,17,0.42) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* keep media fully visible */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin-top: 12px !important;
  margin-bottom: 18px !important;
  filter: contrast(1.03) saturate(0.98) !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}

/* placeholder cards also styled like zines */
.moodboard-page .mood-item span {
  display: block !important;
  min-height: 320px !important;
  padding-top: 12px !important;
  color: rgba(17,17,17,0.44) !important;
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* small accent sticker / label feel on nav area */
.moodboard-page .site-nav,
.moodboard-page .navbar,
.moodboard-page .nav,
.moodboard-page .nav-container {
  position: relative !important;
}

.moodboard-page .site-nav::after,
.moodboard-page .navbar::after,
.moodboard-page .nav::after,
.moodboard-page .nav-container::after {
  content: "MOOD INDEX" !important;
  position: absolute !important;
  left: -8px !important;
  top: -10px !important;
  padding: 6px 8px !important;
  background: #E93222 !important;
  color: #111 !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.12) !important;
  transform: rotate(-3deg) !important;
}

/* lightbox also gets the poster/zine treatment */
.moodboard-lightbox {
  background: rgba(8, 8, 8, 0.78) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

.moodboard-lightbox__panel {
  border: 1.5px solid rgba(17,17,17,0.82) !important;
  background:
    linear-gradient(180deg, rgba(251,250,245,0.96), rgba(241,239,234,0.95)) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

.moodboard-lightbox__panel::before {
  content: "EXPANDED POSTER VIEW" !important;
  position: absolute !important;
  left: 18px !important;
  top: 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #E93222 !important;
}

.moodboard-lightbox__media-wrap {
  margin-top: 20px !important;
  background: rgba(255,255,255,0.34) !important;
}

/* -------------------------
   BREAKPOINTS
   ------------------------- */

@media (max-width: 1199px) {
  .moodboard-page .mood-grid {
    column-count: 2 !important;
    column-gap: 16px !important;
  }
}

@media (max-width: 1023px) {
  .moodboard-page .page-title::after,
  .moodboard-page h1::after {
    font-size: 9px !important;
  }

  .moodboard-page .mood-grid {
    column-count: 2 !important;
    column-gap: 14px !important;
    margin-top: 16px !important;
  }

  .moodboard-page .mood-grid::after {
    display: none !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    padding: 14px 14px 18px !important;
    margin-bottom: 16px !important;
    transform: none !important;
  }

  .moodboard-page .mood-item:hover {
    transform: translateY(-3px) !important;
  }

  .moodboard-page .site-nav::after,
  .moodboard-page .navbar::after,
  .moodboard-page .nav::after,
  .moodboard-page .nav-container::after {
    left: -4px !important;
    top: -9px !important;
    font-size: 7px !important;
  }
}

@media (max-width: 767px) {
  .moodboard-page .page-title::after,
  .moodboard-page h1::after {
    font-size: 8px !important;
    margin-top: 6px !important;
  }

  .moodboard-page .mood-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
    margin-top: 14px !important;
    margin-bottom: 28px !important;
  }

  .moodboard-page .mood-grid::before {
    position: static !important;
    display: block !important;
    margin-bottom: 10px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    padding: 12px 12px 16px !important;
    margin-bottom: 14px !important;
    transform: none !important;
  }

  .moodboard-page .mood-item span {
    min-height: 220px !important;
  }

  .moodboard-page .site-nav::after,
  .moodboard-page .navbar::after,
  .moodboard-page .nav::after,
  .moodboard-page .nav-container::after {
    left: 2px !important;
    top: -8px !important;
    transform: rotate(0deg) !important;
  }

  .moodboard-lightbox__panel::before {
    left: 12px !important;
    top: 8px !important;
    font-size: 8px !important;
  }
}



/* =========================================================
   MOODBOARD — HARDER PUNK / GRUNGE / ZINE DIRECTION
   Stronger page system + stronger cards + improved expanded view.
   Applies across desktop, tablet and mobile.
   ========================================================= */

/* Page atmosphere: rough photocopy / zine wall */
.moodboard-page {
  position: relative !important;
  background:
    linear-gradient(180deg, rgba(245,244,239,0.98), rgba(237,235,229,0.98)) !important;
  overflow-x: hidden !important;
}

.moodboard-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.42 !important;
  background:
    radial-gradient(circle at 8% 16%, rgba(233,50,34,0.16), transparent 18%),
    radial-gradient(circle at 92% 14%, rgba(17,17,17,0.10), transparent 18%),
    radial-gradient(circle at 72% 82%, rgba(233,50,34,0.12), transparent 22%),
    repeating-linear-gradient(0deg, rgba(17,17,17,0.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(17,17,17,0.03) 0 1px, transparent 1px 9px) !important;
  mix-blend-mode: multiply !important;
}

.moodboard-page::after {
  content: "STAR STUDIO / MOODBOARD / CUT-UP / CUT-UP / CUT-UP" !important;
  position: fixed !important;
  left: -10vh !important;
  top: 50% !important;
  z-index: 0 !important;
  transform: rotate(-90deg) translateY(-50%) !important;
  transform-origin: left top !important;
  color: rgba(233, 50, 34, 0.20) !important;
  font-size: clamp(28px, 6vw, 96px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.09em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Page title as punk masthead */
.moodboard-page .page-title {
  position: relative !important;
  z-index: 2 !important;
  border-top: 2px solid #111 !important;
  border-bottom: 2px solid #111 !important;
  padding: clamp(18px, 3vw, 34px) 0 !important;
  margin-bottom: clamp(22px, 4vw, 46px) !important;
}

.moodboard-page .page-title::before {
  content: "NOISY VISUAL REFERENCES / ISSUE 00" !important;
  position: absolute !important;
  right: 0 !important;
  top: -13px !important;
  padding: 6px 9px !important;
  border: 1px solid #111 !important;
  background: #E93222 !important;
  color: #111 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  transform: rotate(1.5deg) !important;
}

.moodboard-page .page-title h1,
.moodboard-page h1.scramble {
  text-shadow:
    1px 0 0 rgba(233,50,34,0.6),
    -1px 0 0 rgba(17,17,17,0.18) !important;
  filter: contrast(1.08) !important;
}

.moodboard-page .page-title p:not(.eyebrow) {
  max-width: 760px !important;
  background: rgba(255,255,255,0.46) !important;
  border-left: 8px solid #111 !important;
  padding: 10px 12px !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* More aggressive grid wall */
.moodboard-page .mood-grid {
  position: relative !important;
  z-index: 2 !important;
  column-count: 3 !important;
  column-gap: 22px !important;
  margin-top: 24px !important;
  margin-bottom: 52px !important;
}

.moodboard-page .mood-grid::before {
  content: "PINNED WALL / SCAN / PRINT / TEAR / REPEAT" !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  right: auto !important;
  padding: 6px 8px !important;
  background: #111 !important;
  color: #f5f4ef !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transform: rotate(-1deg) !important;
}

.moodboard-page .mood-grid::after {
  content: "" !important;
  position: absolute !important;
  left: -16px !important;
  top: 0 !important;
  width: 10px !important;
  height: 100% !important;
  opacity: 0.9 !important;
  background:
    repeating-linear-gradient(
      180deg,
      #E93222 0 10px,
      transparent 10px 18px,
      #111 18px 20px,
      transparent 20px 30px
    ) !important;
}

/* Card base: punk poster / copied zine sheet */
.moodboard-page .mood-item,
.moodboard-page .mood-item.wide,
.moodboard-page .mood-item.tall {
  position: relative !important;
  display: inline-block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  margin: 0 0 24px !important;
  padding: 18px 18px 26px !important;
  overflow: hidden !important;

  border: 2px solid #111 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(232,230,224,0.96)) !important;
  box-shadow:
    5px 5px 0 rgba(17,17,17,0.92),
    12px 16px 34px rgba(0,0,0,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.4) !important;

  cursor: zoom-in !important;
  isolation: isolate !important;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    filter 0.22s ease !important;
}

/* Print grain/screen overlay on cards */
.moodboard-page .mood-item .mood-punk-index {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 5 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  color: #E93222 !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

/* Irregular offsets */
.moodboard-page .mood-item:nth-child(odd) { transform: rotate(-1.8deg) translateY(2px) !important; }
.moodboard-page .mood-item:nth-child(even) { transform: rotate(1.35deg) translateY(-3px) !important; }
.moodboard-page .mood-item:nth-child(3n) { transform: rotate(-0.75deg) translateY(8px) !important; }
.moodboard-page .mood-item:nth-child(5n) { transform: rotate(2deg) translateY(-8px) !important; }

.moodboard-page .mood-item:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.015) !important;
  border-color: #E93222 !important;
  box-shadow:
    6px 6px 0 #E93222,
    18px 26px 48px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.45) !important;
  filter: contrast(1.04) !important;
  z-index: 10 !important;
}

/* Tape strips */
.moodboard-page .mood-item::before {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 8px !important;
  left: 50% !important;
  width: 96px !important;
  height: 22px !important;
  transform: translateX(-50%) rotate(-3deg) !important;
  background:
    linear-gradient(180deg, rgba(233,50,34,0.32), rgba(233,50,34,0.14)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 4px, transparent 4px 8px) !important;
  border: 1px solid rgba(233,50,34,0.26) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset !important;
  pointer-events: none !important;
}

/* Card footer label */
.moodboard-page .mood-item::after {
  content: "TORN REFERENCE / DO NOT CLEAN" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 9px !important;
  z-index: 5 !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(17,17,17,0.22) !important;
  color: rgba(17,17,17,0.48) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

/* Media: fully visible, no crop */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 16px 0 24px !important;
  opacity: 1 !important;
  filter: contrast(1.08) saturate(0.92) grayscale(0.08) !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}

/* Placeholder cards: more zine-like */
.moodboard-page .mood-item span {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  min-height: 320px !important;
  padding: 54px 14px 14px !important;
  border: 1px dashed rgba(17,17,17,0.28) !important;
  background:
    repeating-linear-gradient(-8deg, rgba(17,17,17,0.025) 0 4px, transparent 4px 9px) !important;
  color: rgba(17,17,17,0.44) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* Expanded/lightbox becomes a full punk poster wall */
.moodboard-lightbox {
  background:
    radial-gradient(circle at 18% 20%, rgba(233,50,34,0.16), transparent 22%),
    rgba(7,7,7,0.86) !important;
  backdrop-filter: blur(16px) saturate(1.08) contrast(1.04) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) contrast(1.04) !important;
}

.moodboard-lightbox::before {
  content: "EXPANDED / POSTER / REFERENCE" !important;
  position: fixed !important;
  left: 24px !important;
  top: 24px !important;
  z-index: 1 !important;
  color: rgba(245,244,239,0.16) !important;
  font-size: clamp(48px, 10vw, 160px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.12em !important;
  line-height: 0.78 !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}

.moodboard-lightbox__panel {
  position: relative !important;
  width: min(92vw, 1360px) !important;
  max-height: 90vh !important;
  padding: 22px 22px 34px !important;
  border: 2px solid #111 !important;
  background:
    linear-gradient(180deg, rgba(252,251,247,0.98), rgba(231,229,222,0.98)) !important;
  box-shadow:
    7px 7px 0 #E93222,
    0 30px 80px rgba(0,0,0,0.40),
    inset 0 0 0 1px rgba(255,255,255,0.48) !important;
  transform: rotate(-0.35deg) !important;
}

.moodboard-lightbox__panel::before {
  content: "EXPANDED POSTER / CLICK OUTSIDE OR ESC" !important;
  top: 12px !important;
  left: 22px !important;
  padding: 6px 8px !important;
  border: 1px solid #111 !important;
  background: #E93222 !important;
  color: #111 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  transform: rotate(-1.5deg) !important;
}

.moodboard-lightbox__panel::after {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  right: 72px !important;
  width: 104px !important;
  height: 24px !important;
  background:
    linear-gradient(180deg, rgba(17,17,17,0.18), rgba(17,17,17,0.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.24) 0 4px, transparent 4px 8px) !important;
  transform: rotate(4deg) !important;
  pointer-events: none !important;
}

.moodboard-lightbox__media-wrap {
  margin-top: 34px !important;
  max-height: calc(90vh - 104px) !important;
  background:
    repeating-linear-gradient(0deg, rgba(17,17,17,0.025) 0 1px, transparent 1px 8px),
    rgba(255,255,255,0.42) !important;
  border: 1px solid rgba(17,17,17,0.18) !important;
}

.moodboard-lightbox__media-wrap img,
.moodboard-lightbox__media-wrap video {
  max-height: calc(90vh - 130px) !important;
  filter: contrast(1.04) saturate(0.96) !important;
}

.moodboard-lightbox__close {
  top: 14px !important;
  right: 14px !important;
  width: 46px !important;
  height: 46px !important;
  border: 2px solid #111 !important;
  border-radius: 0 !important;
  background: #f5f4ef !important;
  color: #111 !important;
  box-shadow: 3px 3px 0 #E93222 !important;
}

.moodboard-lightbox__close:hover {
  transform: translate(-1px, -1px) rotate(2deg) !important;
  background: #E93222 !important;
  box-shadow: 4px 4px 0 #111 !important;
}

/* Tablet */
@media (max-width: 1199px) {
  .moodboard-page .mood-grid {
    column-count: 2 !important;
    column-gap: 18px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    padding: 16px 16px 24px !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 1023px) {
  .moodboard-page::after {
    display: none !important;
  }

  .moodboard-page .page-title::before {
    right: auto !important;
    left: 0 !important;
    top: -16px !important;
  }

  .moodboard-page .mood-grid {
    column-count: 2 !important;
    column-gap: 15px !important;
  }

  .moodboard-page .mood-grid::before {
    position: relative !important;
    display: inline-block !important;
    top: auto !important;
    margin-bottom: 12px !important;
  }

  .moodboard-page .mood-grid::after {
    display: none !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall,
  .moodboard-page .mood-item:nth-child(odd),
  .moodboard-page .mood-item:nth-child(even),
  .moodboard-page .mood-item:nth-child(3n),
  .moodboard-page .mood-item:nth-child(5n) {
    transform: none !important;
  }

  .moodboard-page .mood-item:hover {
    transform: translateY(-4px) !important;
  }

  .moodboard-lightbox__panel {
    transform: none !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .moodboard-page .page-title {
    padding-top: 24px !important;
  }

  .moodboard-page .page-title::before {
    font-size: 7px !important;
    top: -12px !important;
  }

  .moodboard-page .mood-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
    margin-bottom: 32px !important;
  }

  .moodboard-page .mood-grid::before {
    font-size: 7px !important;
    letter-spacing: 0.14em !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    padding: 14px 14px 22px !important;
    margin-bottom: 16px !important;
    box-shadow:
      4px 4px 0 rgba(17,17,17,0.92),
      10px 14px 26px rgba(0,0,0,0.12) !important;
  }

  .moodboard-page .mood-item::before {
    width: 78px !important;
    height: 18px !important;
  }

  .moodboard-page .mood-item::after {
    font-size: 7px !important;
    letter-spacing: 0.12em !important;
  }

  .moodboard-page .mood-item img,
  .moodboard-page .mood-item video {
    margin: 14px 0 22px !important;
  }

  .moodboard-lightbox {
    padding: 10px !important;
  }

  .moodboard-lightbox::before {
    font-size: 56px !important;
    left: 12px !important;
    top: 14px !important;
  }

  .moodboard-lightbox__panel {
    width: 100% !important;
    max-height: 92vh !important;
    padding: 16px 12px 22px !important;
    box-shadow:
      4px 4px 0 #E93222,
      0 20px 60px rgba(0,0,0,0.36) !important;
  }

  .moodboard-lightbox__panel::before {
    left: 12px !important;
    top: 10px !important;
    max-width: calc(100% - 70px) !important;
    font-size: 7px !important;
    letter-spacing: 0.12em !important;
  }

  .moodboard-lightbox__panel::after {
    display: none !important;
  }

  .moodboard-lightbox__media-wrap {
    margin-top: 42px !important;
    max-height: calc(92vh - 112px) !important;
  }

  .moodboard-lightbox__media-wrap img,
  .moodboard-lightbox__media-wrap video {
    max-height: calc(92vh - 128px) !important;
  }

  .moodboard-lightbox__close {
    width: 40px !important;
    height: 40px !important;
    top: 8px !important;
    right: 8px !important;
  }
}



/* MOODBOARD: remove REF labels and archive/punk/poster study text */
.moodboard-page .mood-item .mood-punk-index {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.moodboard-page .page-title::after,
.moodboard-page h1::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}



/* MOODBOARD TITLE + DESKTOP NAV FONT CLEANUP */

/* Remove accent/red treatment from the Moodboard title only */
.moodboard-page h1,
.moodboard-page .page-title h1,
.moodboard-page h1.scramble {
  color: #111111 !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.moodboard-page h1 span,
.moodboard-page .page-title h1 span {
  color: inherit !important;
}

/* Desktop navbar uses the same font feeling as "All rights reserved." */
@media (min-width: 1024px) {
  .main-nav a,
  .main-nav button,
  .site-header .main-nav a,
  .site-header .main-nav button {
    font-family: "HelveticaNowDisplay", "Helvetica Now Display", Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    text-transform: none !important;
  }
}



/* MENU UPDATE: Home added to desktop and mobile menus */
@media (min-width: 1024px) {
  .main-nav {
    gap: clamp(10px, 1.2vw, 18px) !important;
  }
}



/* MOODBOARD MOBILE IMAGE FIT FIX
   Mobile moodboard cards now adapt better to the actual media instead of
   forcing a tall poster frame that leaves too much empty space.
*/

@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    column-count: 1 !important;
    column-gap: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 28px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 10px 16px !important;
    margin-bottom: 14px !important;
    display: block !important;
  }

  .moodboard-page .mood-item img,
  .moodboard-page .mood-item video {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 12px 0 18px !important;
  }

  /* Placeholder cards should not become huge empty poster blocks on mobile */
  .moodboard-page .mood-item span {
    min-height: 160px !important;
    padding: 34px 12px 12px !important;
  }

  /* Smaller punk decorative elements so the image has more room */
  .moodboard-page .mood-item::before {
    width: 58px !important;
    height: 14px !important;
    top: 7px !important;
  }

  .moodboard-page .mood-item::after {
    bottom: 6px !important;
    font-size: 6.5px !important;
    letter-spacing: 0.09em !important;
  }

  /* Expanded preview: image uses screen space better on mobile */
  .moodboard-lightbox__panel {
    padding: 12px 10px 18px !important;
  }

  .moodboard-lightbox__media-wrap {
    margin-top: 36px !important;
    max-height: calc(92vh - 86px) !important;
  }

  .moodboard-lightbox__media-wrap img,
  .moodboard-lightbox__media-wrap video {
    width: 100% !important;
    height: auto !important;
    max-height: calc(92vh - 102px) !important;
    object-fit: contain !important;
  }
}



/* FINAL MOBILE MOODBOARD CONTAINER FIT
   The earlier rules were still allowing a forced poster/aspect-ratio frame.
   On mobile, the card now sizes directly from the image/video height.
*/

@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    display: block !important;
    column-count: auto !important;
    columns: auto !important;
    column-gap: 0 !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    display: block !important;
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    margin: 0 0 14px !important;
    padding: 10px 10px 18px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .moodboard-page .mood-item img,
  .moodboard-page .mood-item video {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center center !important;
    margin: 12px 0 18px !important;
  }

  /* Force old JS/CSS ratio helpers to stop affecting mobile cards */
  .moodboard-page .mood-item.has-adaptive-media {
    aspect-ratio: auto !important;
  }

  .moodboard-page .mood-item.has-adaptive-media > img,
  .moodboard-page .mood-item.has-adaptive-media > video {
    height: auto !important;
  }

  /* Placeholder cards only: compact height */
  .moodboard-page .mood-item:not(:has(img)):not(:has(video)) {
    min-height: 150px !important;
  }

  .moodboard-page .mood-item span:not(.mood-punk-index) {
    min-height: 120px !important;
    padding: 28px 10px 10px !important;
  }
}



/* MOBILE MOODBOARD COMPACT IMAGE FIT
   Some moodboard source images have large built-in white canvas/empty space.
   On mobile, use a tighter poster frame so the visual content feels fitted.
*/

@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    column-count: unset !important;
    columns: unset !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 10px 10px 18px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Real image/video cards get a compact poster viewport */
  .moodboard-page .mood-item:has(img),
  .moodboard-page .mood-item:has(video) {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
  }

  .moodboard-page .mood-item:has(img) img,
  .moodboard-page .mood-item:has(video) video {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    display: block !important;
  }

  /* First collage image: tighter focus on the actual composition */
  .moodboard-page .mood-item:first-child {
    aspect-ratio: 1 / 1 !important;
  }

  .moodboard-page .mood-item:first-child img,
  .moodboard-page .mood-item:first-child video {
    object-fit: cover !important;
    object-position: center 28% !important;
  }

  /* Keep placeholder cards compact */
  .moodboard-page .mood-item:not(:has(img)):not(:has(video)) {
    min-height: 160px !important;
    aspect-ratio: auto !important;
  }

  .moodboard-page .mood-item span:not(.mood-punk-index) {
    min-height: 120px !important;
    padding: 28px 10px 10px !important;
  }
}



/* FINAL MOODBOARD MOBILE FIX
   The previous compact frame was cropping images on mobile.
   This restores full image visibility while keeping the punk poster card styling.
*/

@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    display: block !important;
    columns: auto !important;
    column-count: auto !important;
    column-gap: 0 !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.wide,
  .moodboard-page .mood-item.tall,
  .moodboard-page .mood-item:has(img),
  .moodboard-page .mood-item:has(video),
  .moodboard-page .mood-item:first-child {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 0 14px !important;
    padding: 10px 10px 18px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .moodboard-page .mood-item img,
  .moodboard-page .mood-item video,
  .moodboard-page .mood-item:has(img) img,
  .moodboard-page .mood-item:has(video) video,
  .moodboard-page .mood-item:first-child img,
  .moodboard-page .mood-item:first-child video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 12px 0 18px !important;
  }

  /* keep placeholder cards compact */
  .moodboard-page .mood-item:not(:has(img)):not(:has(video)) {
    min-height: 150px !important;
  }

  .moodboard-page .mood-item span:not(.mood-punk-index) {
    min-height: 120px !important;
    padding: 28px 10px 10px !important;
  }

  /* expanded view: full visible image/video */
  .moodboard-lightbox__media-wrap img,
  .moodboard-lightbox__media-wrap video {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(92vh - 128px) !important;
    object-fit: contain !important;
  }
}



/* FINAL FIX: MOODBOARD MOBILE — ALL CARDS FULL IMAGE FIT
   Applies to every moodboard card, not only the first one.
   Removes old poster/crop/ratio rules on mobile and lets each card height follow its media.
*/

@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    display: block !important;
    column-count: initial !important;
    columns: initial !important;
    column-gap: 0 !important;
    grid-template-columns: none !important;
  }

  .moodboard-page .mood-grid > .mood-item,
  .moodboard-page .mood-grid > .mood-item:nth-child(n),
  .moodboard-page .mood-grid > .mood-item.wide,
  .moodboard-page .mood-grid > .mood-item.tall,
  .moodboard-page .mood-grid > .mood-item.has-adaptive-media,
  .moodboard-page .mood-grid > .mood-item:has(img),
  .moodboard-page .mood-grid > .mood-item:has(video) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    margin: 0 0 14px !important;
    padding: 10px 10px 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    break-inside: auto !important;
    -webkit-column-break-inside: auto !important;

    transform: none !important;
  }

  .moodboard-page .mood-grid > .mood-item:nth-child(n):hover {
    transform: translateY(-2px) !important;
  }

  .moodboard-page .mood-grid > .mood-item:nth-child(n) > img,
  .moodboard-page .mood-grid > .mood-item:nth-child(n) > video,
  .moodboard-page .mood-grid > .mood-item:nth-child(n) img,
  .moodboard-page .mood-grid > .mood-item:nth-child(n) video,
  .moodboard-page .mood-grid > .mood-item.has-adaptive-media > img,
  .moodboard-page .mood-grid > .mood-item.has-adaptive-media > video,
  .moodboard-page .mood-grid > .mood-item:has(img) img,
  .moodboard-page .mood-grid > .mood-item:has(video) video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 12px 0 18px !important;
    padding: 0 !important;
  }

  /* Override any inline style="height:100%; object-fit:cover" from the HTML */
  .moodboard-page .mood-item img[style],
  .moodboard-page .mood-item video[style] {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .moodboard-page .mood-grid > .mood-item:not(:has(img)):not(:has(video)) {
    min-height: 150px !important;
  }
}



/* =========================================================
   MOODBOARD PAGE — CONCRETE WALL / POSTERS / STICKERS
   ========================================================= */

.moodboard-page {
  --mood-accent: #b96f67;
  --mood-accent-soft: rgba(185, 111, 103, 0.14);
  --mood-ink: #151515;
  --mood-paper: #f4f1ea;
  --mood-paper-dark: #ece7dd;
  position: relative;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.46) 0, rgba(255,255,255,0.08) 18%, transparent 32%),
    radial-gradient(circle at 84% 25%, rgba(0,0,0,0.05) 0, transparent 28%),
    linear-gradient(180deg, #e6e2d9 0%, #ddd8cf 100%);
}

.moodboard-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.38) 0 1px, transparent 1px 55px),
    radial-gradient(circle at 72% 70%, rgba(0,0,0,0.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.022) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 16px);
  mix-blend-mode: multiply;
}

.moodboard-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.022), transparent 10%, transparent 90%, rgba(0,0,0,0.028)),
    radial-gradient(circle at 50% 8%, rgba(255,255,255,0.2), transparent 32%);
}

.moodboard-page > * {
  position: relative;
  z-index: 1;
}

.moodboard-page .page-title {
  margin-bottom: 34px;
}

.moodboard-page .page-title .eyebrow {
  color: #6f6b66 !important;
}

.moodboard-page .page-title h1 {
  color: #1c1b19 !important;
}

.moodboard-page .page-title p:last-child {
  max-width: 720px;
  color: #4f4b45;
}

.moodboard-page .mood-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 0.78fr 1.05fr 0.9fr;
  grid-auto-rows: minmax(170px, auto);
  gap: 26px;
  align-items: start;
}

.moodboard-page .mood-grid .mood-item {
  position: relative;
  overflow: visible;
  min-height: 180px;
  border: 1px solid rgba(19,19,19,0.14);
  background: linear-gradient(180deg, rgba(250,248,244,0.98), rgba(236,232,226,0.98));
  box-shadow:
    6px 6px 0 rgba(23,23,23,0.92),
    0 18px 30px rgba(0,0,0,0.10);
  padding: 14px;
  transform: rotate(-0.4deg);
}

.moodboard-page .mood-grid .mood-item:nth-child(2n) {
  transform: rotate(0.5deg);
}

.moodboard-page .mood-grid .mood-item:nth-child(3n) {
  transform: rotate(-1deg);
}

.moodboard-page .mood-grid .mood-item:hover {
  transform: translateY(-4px) rotate(0deg);
}

.moodboard-page .mood-grid .mood-item.tall {
  grid-row: span 2;
}

.moodboard-page .mood-grid .mood-item.wide {
  grid-column: span 2;
}

.moodboard-page .mood-grid .mood-item img,
.moodboard-page .mood-grid .mood-item video {
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  display: block;
  object-fit: contain !important;
  object-position: center;
  background: transparent;
}

.moodboard-page .mood-grid .poster-card img {
  background: #f4f1ea;
  padding: 6px;
}

.moodboard-page .mood-grid .poster-pin {
  position: absolute;
  top: -8px;
  left: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #96908a;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.85),
    0 2px 6px rgba(0,0,0,0.18);
  z-index: 3;
}

.moodboard-page .editorial-poster-card,
.moodboard-page .design-card,
.moodboard-page .abstract-poster-card {
  padding: 18px;
}

.moodboard-page .editorial-poster-surface,
.moodboard-page .design-sheet,
.moodboard-page .abstract-poster-surface {
  height: 100%;
  min-height: 100%;
  border: 1px solid rgba(0,0,0,0.12);
  background:
    linear-gradient(180deg, rgba(252,250,246,0.94), rgba(240,236,229,0.98)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.016) 0 1px, transparent 1px 10px);
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.moodboard-page .poster-kicker,
.moodboard-page .sheet-label {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 8px;
  background: rgba(18,18,18,0.9);
  color: #f5f2eb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.moodboard-page .editorial-poster-surface h3 {
  margin: 10px 0 8px;
  font-size: clamp(24px, 3vw, 46px);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: #141414;
}

.moodboard-page .editorial-poster-surface p,
.moodboard-page .sheet-caption {
  margin: 0;
  color: #5e5852;
  font-size: 12px;
  line-height: 1.45;
  max-width: 340px;
}

.moodboard-page .poster-stamp {
  align-self: flex-end;
  margin-top: 18px;
  color: var(--mood-accent);
  border: 1px solid rgba(185, 111, 103, 0.38);
  background: rgba(185, 111, 103, 0.08);
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.moodboard-page .design-sheet {
  gap: 18px;
}

.moodboard-page .sheet-lines {
  flex: 1;
  min-height: 160px;
  background:
    linear-gradient(180deg, transparent 0%, transparent 10%, rgba(0,0,0,0.08) 10%, rgba(0,0,0,0.08) 11%, transparent 11%, transparent 18%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.08) 19%, transparent 19%, transparent 26%, rgba(0,0,0,0.08) 26%, rgba(0,0,0,0.08) 27%, transparent 27%),
    linear-gradient(90deg, rgba(185,111,103,0.26) 0 24%, transparent 24% 100%);
  border: 1px dashed rgba(0,0,0,0.16);
}

.moodboard-page .sheet-blocks {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 8px;
}

.moodboard-page .sheet-blocks span {
  display: block;
  height: 18px;
  background: rgba(25,25,25,0.14);
}

.moodboard-page .sheet-blocks span:nth-child(2) {
  background: rgba(185,111,103,0.18);
}

.moodboard-page .abstract-poster-surface {
  position: relative;
  overflow: hidden;
}

.moodboard-page .abstract-bands {
  flex: 1;
  min-height: 140px;
  background:
    linear-gradient(135deg,
      rgba(185,111,103,0.16) 0 22%,
      transparent 22% 35%,
      rgba(0,0,0,0.08) 35% 48%,
      transparent 48% 61%,
      rgba(185,111,103,0.10) 61% 100%);
  border: 1px solid rgba(0,0,0,0.1);
}

.moodboard-page .abstract-title {
  margin-top: 14px;
  color: #161616;
  font-size: clamp(18px, 2.5vw, 34px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

.moodboard-page .sticker-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-2deg) !important;
}

.moodboard-page .sticker-card:hover {
  transform: translateY(-4px) rotate(0deg) scale(1.02) !important;
}

.moodboard-page .sticker-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  clip-path: polygon(6% 30%, 16% 12%, 35% 4%, 56% 3%, 80% 8%, 94% 20%, 99% 46%, 95% 70%, 83% 90%, 52% 99%, 20% 95%, 5% 76%, 2% 52%);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.22));
  background: transparent !important;
}

.moodboard-page .sticker-card::after {
  content: "STICKER";
  position: absolute;
  bottom: -10px;
  right: 6px;
  color: #6e6962;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@media (max-width: 1199px) {
  .moodboard-page .mood-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .moodboard-page .mood-grid .mood-item.wide {
    grid-column: span 2;
  }

  .moodboard-page .mood-grid .mood-item.tall {
    grid-row: span 1;
  }
}

@media (max-width: 767px) {
  .moodboard-page .page-title {
    margin-bottom: 24px;
  }

  .moodboard-page .mood-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .moodboard-page .mood-grid .mood-item,
  .moodboard-page .mood-grid .mood-item.wide,
  .moodboard-page .mood-grid .mood-item.tall {
    grid-column: auto;
    grid-row: auto;
    min-height: 150px;
    padding: 12px;
    transform: none !important;
  }

  .moodboard-page .editorial-poster-surface h3 {
    font-size: 28px;
  }

  .moodboard-page .sheet-lines {
    min-height: 120px;
  }

  .moodboard-page .sticker-card {
    min-height: 190px;
  }
}



/* =========================================================
   MOODBOARD DESKTOP DRAG + STICKER SHAPE UPDATE
   ========================================================= */

/* Desktop: cards can be dragged freely. Positions reset on refresh because
   the script does not save coordinates to localStorage/sessionStorage. */
@media (min-width: 1024px) {
  .moodboard-page .mood-grid {
    position: relative !important;
    min-height: 760px !important;
    display: block !important;
    isolation: isolate !important;
  }

  .moodboard-page .mood-grid .mood-item {
    position: absolute !important;
    z-index: 2 !important;
    user-select: none !important;
    touch-action: none !important;
    cursor: grab !important;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease,
      filter 0.18s ease !important;
  }

  .moodboard-page .mood-grid .mood-item.is-dragging {
    cursor: grabbing !important;
    z-index: 80 !important;
    transition: none !important;
    filter: contrast(1.04) saturate(1.02) !important;
    box-shadow:
      10px 10px 0 rgba(23,23,23,0.95),
      0 28px 54px rgba(0,0,0,0.18) !important;
  }

  /* Initial desktop positions. These are only defaults and reset on refresh. */
  .moodboard-page .mood-grid .mood-item[data-mood-slot="1"] {
    left: 0% !important;
    top: 0px !important;
    width: 32% !important;
  }

  .moodboard-page .mood-grid .mood-item[data-mood-slot="2"] {
    left: 35% !important;
    top: 42px !important;
    width: 21% !important;
  }

  .moodboard-page .mood-grid .mood-item[data-mood-slot="3"] {
    left: 59% !important;
    top: 0px !important;
    width: 35% !important;
  }

  .moodboard-page .mood-grid .mood-item[data-mood-slot="4"] {
    left: 43% !important;
    top: 330px !important;
    width: 17% !important;
  }

  .moodboard-page .mood-grid .mood-item[data-mood-slot="5"] {
    left: 0% !important;
    top: 420px !important;
    width: 38% !important;
  }

  .moodboard-page .mood-grid .mood-item[data-mood-slot="6"] {
    left: 63% !important;
    top: 380px !important;
    width: 30% !important;
  }

  .moodboard-page .mood-grid .mood-item.drag-was-moved {
    left: var(--drag-left) !important;
    top: var(--drag-top) !important;
  }
}

/* Tablet/mobile keep normal flow: no desktop dragging layout. */
@media (max-width: 1023px) {
  .moodboard-page .mood-grid .mood-item {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
}

/* Sticker card: the card itself follows the sticker silhouette more closely. */
.moodboard-page .sticker-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.moodboard-page .sticker-card::before,
.moodboard-page .sticker-card::after {
  display: none !important;
  content: none !important;
}

.moodboard-page .sticker-card img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  clip-path: polygon(
    2% 48%, 7% 28%, 18% 12%, 34% 5%, 54% 3%, 73% 6%, 88% 16%,
    96% 34%, 99% 55%, 94% 75%, 80% 91%, 57% 99%, 30% 96%, 12% 84%, 3% 66%
  ) !important;
  filter:
    drop-shadow(0 12px 0 rgba(255,255,255,0.92))
    drop-shadow(0 18px 22px rgba(0,0,0,0.24)) !important;
  background: transparent !important;
}

.moodboard-page .sticker-card:hover img {
  filter:
    drop-shadow(0 12px 0 rgba(255,255,255,0.96))
    drop-shadow(0 22px 28px rgba(0,0,0,0.28)) !important;
}

.moodboard-page .sticker-card.no-lightbox {
  cursor: grab !important;
}

/* No expanded version for stickers */
.moodboard-page .sticker-card.no-lightbox img {
  pointer-events: none !important;
}



/* =========================================================
   MOODBOARD REFINEMENT — CONCRETE WALL / TYPED ITEMS
   ========================================================= */

html,
body {
  overflow-x: hidden !important;
}

main.moodboard-page {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  --mood-accent: #a77d77;
  --mood-accent-soft: rgba(167, 125, 119, 0.12);
  --mood-paper: #f5f1ea;
  --mood-paper-2: #ece6dc;
  --mood-ink: #1a1a19;
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,0.36), transparent 22%),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,0.16), transparent 18%),
    radial-gradient(circle at 26% 76%, rgba(0,0,0,0.05), transparent 18%),
    linear-gradient(180deg, #ddd8cf 0%, #d5d0c6 42%, #d9d4cb 100%);
}

main.moodboard-page::before {
  content: "";
  position: absolute;
  inset: -40px -40px 0 -40px;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.17) 0 2px, transparent 2px 80px),
    radial-gradient(circle at 67% 42%, rgba(0,0,0,0.04) 0 2px, transparent 2px 92px),
    radial-gradient(circle at 74% 82%, rgba(255,255,255,0.14) 0 2px, transparent 2px 88px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 18px);
  opacity: 0.88;
  mix-blend-mode: multiply;
}

main.moodboard-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.03), transparent 12%, transparent 88%, rgba(0,0,0,0.03)),
    radial-gradient(circle at 50% -12%, rgba(255,255,255,0.2), transparent 36%);
}

.moodboard-page .page-title .eyebrow,
.moodboard-page .page-title p {
  color: #5c5750 !important;
}

.moodboard-page .mood-grid {
  position: relative !important;
  overflow: visible !important;
}

/* no extra internal scrollbar */
.moodboard-page .mood-grid,
.moodboard-page .mood-item,
.moodboard-page .paper-card,
.moodboard-page .design-sheet,
.moodboard-page .editorial-sheet,
.moodboard-page .material-sheet {
  max-height: none !important;
  overflow: visible !important;
}

.moodboard-page .mood-item {
  user-select: none;
}

.moodboard-page .mood-item .paper-card {
  position: relative;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(247,244,238,0.98), rgba(234,228,219,0.98)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.016) 0 1px, transparent 1px 11px);
  border: 1px solid rgba(18,18,18,0.14);
  box-shadow:
    6px 6px 0 rgba(20,20,20,0.94),
    0 20px 34px rgba(0,0,0,0.12);
  padding: 16px;
}

.moodboard-page .mood-item[data-card-type="poster"] .paper-card {
  padding: 10px;
}

.moodboard-page .mood-item[data-card-type="poster"] img {
  background: #f6f3ed;
  padding: 6px;
}

.moodboard-page .mood-item .wall-pin {
  position: absolute;
  top: -8px;
  left: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8f8a84;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.9),
    0 2px 7px rgba(0,0,0,0.18);
  z-index: 5;
}

.moodboard-page .mood-item[data-card-type] .paper-card::after {
  content: attr(data-card-label);
  display: none;
}

.moodboard-page .mood-item[data-card-type="poster"] .paper-card::before,
.moodboard-page .mood-item[data-card-type="design"] .paper-card::before,
.moodboard-page .mood-item[data-card-type="layout"] .paper-card::before,
.moodboard-page .mood-item[data-card-type="object"] .paper-card::before {
  content: attr(data-card-type);
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #7d776f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.moodboard-page .mood-item[data-card-type="poster"] .paper-card::before { content: "poster"; }
.moodboard-page .mood-item[data-card-type="design"] .paper-card::before { content: "poster"; }
.moodboard-page .mood-item[data-card-type="layout"] .paper-card::before { content: "poster"; }
.moodboard-page .mood-item[data-card-type="object"] .paper-card::before { content: "poster"; }

.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* typed cards */
.moodboard-page .editorial-sheet,
.moodboard-page .design-sheet,
.moodboard-page .material-sheet {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  gap: 16px;
}

.moodboard-page .sheet-kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 8px;
  background: rgba(20,20,20,0.92);
  color: #f4f0e8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.moodboard-page .editorial-sheet h3 {
  margin: 8px 0 4px;
  color: var(--mood-ink);
  font-size: clamp(24px, 3vw, 44px);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.moodboard-page .editorial-sheet p,
.moodboard-page .sheet-caption {
  margin: 0;
  color: #5d5851;
  font-size: 12px;
  line-height: 1.45;
  max-width: 340px;
}

.moodboard-page .sheet-stamp {
  align-self: flex-end;
  padding: 6px 10px;
  border: 1px solid rgba(167,125,119,0.32);
  background: rgba(167,125,119,0.07);
  color: var(--mood-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.moodboard-page .sheet-lines {
  min-height: 170px;
  border: 1px dashed rgba(0,0,0,0.14);
  background:
    linear-gradient(180deg,
      transparent 0%, transparent 10%,
      rgba(0,0,0,0.08) 10%, rgba(0,0,0,0.08) 11%, transparent 11%, transparent 18%,
      rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.08) 19%, transparent 19%, transparent 26%,
      rgba(0,0,0,0.08) 26%, rgba(0,0,0,0.08) 27%, transparent 27%),
    linear-gradient(90deg, rgba(167,125,119,0.16) 0 25%, transparent 25% 100%);
}

.moodboard-page .sheet-blocks {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 8px;
}

.moodboard-page .sheet-blocks span {
  display: block;
  height: 18px;
  background: rgba(17,17,17,0.12);
}

.moodboard-page .sheet-blocks span:nth-child(2) {
  background: rgba(167,125,119,0.16);
}

.moodboard-page .material-bands {
  min-height: 140px;
  border: 1px solid rgba(0,0,0,0.1);
  background:
    linear-gradient(135deg,
      rgba(167,125,119,0.16) 0 20%,
      transparent 20% 34%,
      rgba(0,0,0,0.08) 34% 48%,
      transparent 48% 62%,
      rgba(167,125,119,0.10) 62% 100%);
}

.moodboard-page .material-title {
  color: var(--mood-ink);
  font-size: clamp(18px, 2.2vw, 34px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

/* sticker = no framed card, no lightbox, shape follows sticker */
.moodboard-page .mood-item[data-card-type="sticker"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.moodboard-page .mood-item[data-card-type="sticker"]::before,
.moodboard-page .mood-item[data-card-type="sticker"]::after,
.moodboard-page .mood-item[data-card-type="sticker"] .wall-pin {
  display: none !important;
  content: none !important;
}

.moodboard-page .mood-item[data-card-type="sticker"] img {
  width: 100% !important;
  height: auto !important;
  clip-path: polygon(2% 48%, 7% 28%, 18% 12%, 34% 5%, 54% 3%, 73% 6%, 88% 16%, 96% 34%, 99% 55%, 94% 75%, 80% 91%, 57% 99%, 30% 96%, 12% 84%, 3% 66%);
  filter:
    drop-shadow(0 14px 0 rgba(255,255,255,0.96))
    drop-shadow(0 22px 26px rgba(0,0,0,0.24));
}

.moodboard-page .mood-item[data-card-type="sticker"]:hover img {
  filter:
    drop-shadow(0 14px 0 rgba(255,255,255,0.98))
    drop-shadow(0 26px 30px rgba(0,0,0,0.28));
}

/* draggable desktop layout */
@media (min-width: 1024px) {
  .moodboard-page .mood-grid {
    display: block !important;
    min-height: 980px !important;
    margin-top: 20px;
  }

  .moodboard-page .mood-item {
    position: absolute !important;
    cursor: grab !important;
    touch-action: none !important;
    z-index: 2;
  }

  .moodboard-page .mood-item.is-dragging {
    cursor: grabbing !important;
    z-index: 80 !important;
    transition: none !important;
    filter: contrast(1.02) saturate(1.02);
  }

  .moodboard-page .mood-item[data-mood-slot="1"] {
    left: 0% !important;
    top: 0px !important;
    width: 31% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="2"] {
    left: 34% !important;
    top: 30px !important;
    width: 18% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="3"] {
    left: 56% !important;
    top: 0px !important;
    width: 38% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="4"] {
    left: 40% !important;
    top: 315px !important;
    width: 18% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="5"] {
    left: 1% !important;
    top: 415px !important;
    width: 37% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="6"] {
    left: 60% !important;
    top: 400px !important;
    width: 29% !important;
  }

  .moodboard-page .mood-item.drag-was-moved {
    left: var(--drag-left) !important;
    top: var(--drag-top) !important;
  }
}

/* tablet / mobile = normal flow and no drag */
@media (max-width: 1023px) {
  .moodboard-page .mood-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    min-height: 0 !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.drag-was-moved {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  .moodboard-page .mood-item[data-card-type="layout"] {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .moodboard-page .mood-item[data-card-type="layout"] {
    grid-column: auto;
  }

  .moodboard-page .editorial-sheet h3 {
    font-size: 28px;
  }

  .moodboard-page .sheet-lines {
    min-height: 120px;
  }
}


/* =========================================================
   MOODBOARD CLEANUP PATCH — concrete wall / no empty cards
   ========================================================= */

html,
body {
  overflow-x: hidden !important;
}

main.moodboard-page {
  overflow-y: visible !important;
}

.moodboard-page .mood-grid {
  position: relative !important;
  display: block !important;
  min-height: 560px !important;
  margin-top: 18px !important;
  padding: 28px !important;
  border: 1px solid rgba(22, 22, 22, 0.28) !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,0.34), transparent 20%),
    radial-gradient(circle at 82% 20%, rgba(255,255,255,0.16), transparent 22%),
    radial-gradient(circle at 26% 76%, rgba(0,0,0,0.06), transparent 18%),
    linear-gradient(180deg, #d6d1c7 0%, #cec8be 46%, #d5cfc5 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 20px 42px rgba(255,255,255,0.08),
    inset 0 -22px 40px rgba(0,0,0,0.05),
    0 18px 30px rgba(0,0,0,0.07) !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}

.moodboard-page .mood-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.20) 0 2px, transparent 2px 74px),
    radial-gradient(circle at 76% 38%, rgba(0,0,0,0.05) 0 2px, transparent 2px 90px),
    radial-gradient(circle at 40% 82%, rgba(0,0,0,0.045) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.03));
  opacity: 0.75;
  mix-blend-mode: multiply;
}

.moodboard-page .mood-grid,
.moodboard-page .mood-item,
.moodboard-page .paper-card {
  scrollbar-width: none !important;
}

.moodboard-page .mood-grid::-webkit-scrollbar,
.moodboard-page .mood-item::-webkit-scrollbar,
.moodboard-page .paper-card::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.moodboard-page .mood-item {
  overflow: visible !important;
}

.moodboard-page .mood-item .paper-card {
  background:
    linear-gradient(180deg, rgba(247,244,238,0.98), rgba(234,228,219,0.98)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.014) 0 1px, transparent 1px 11px) !important;
}

.moodboard-page .mood-item img,
.moodboard-page .mood-item video {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

/* Cleaner hierarchy: horizontal desktop arrangement */
@media (min-width: 1024px) {
  .moodboard-page .mood-grid {
    min-height: 420px !important;
  }

  .moodboard-page .mood-item {
    position: absolute !important;
    cursor: grab !important;
    touch-action: none !important;
  }

  .moodboard-page .mood-item[data-mood-slot="1"] {
    left: 1% !important;
    top: 12px !important;
    width: 30% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="2"] {
    left: 35% !important;
    top: 34px !important;
    width: 18% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="4"] {
    left: 67% !important;
    top: 4px !important;
    width: 23% !important;
  }
}

@media (max-width: 1023px) {
  .moodboard-page .mood-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    min-height: 0 !important;
    padding: 18px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.drag-was-moved {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  .moodboard-page .mood-item[data-mood-slot="4"] {
    grid-column: 1 / -1;
    max-width: 280px;
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
  }

  .moodboard-page .mood-item[data-mood-slot="4"] {
    grid-column: auto;
    max-width: 220px;
    justify-self: start;
  }
}


/* =========================================================
   MOODBOARD WALL REFINEMENT PATCH
   - remove black stroke on images (keep card borders)
   - more realistic grungy concrete wall
   - mood-grid can extend based on content/dragged items
   ========================================================= */

.moodboard-page .mood-grid {
  position: relative !important;
  min-height: 420px !important;
  height: auto !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.32), transparent 20%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,0.14), transparent 24%),
    radial-gradient(circle at 28% 75%, rgba(0,0,0,0.06), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(0,0,0,0.035), transparent 18%),
    linear-gradient(180deg, #d7d0c5 0%, #d0c8bb 44%, #cbc3b6 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 0 18px 44px rgba(255,255,255,0.08),
    inset 0 -20px 42px rgba(0,0,0,0.05),
    0 14px 26px rgba(0,0,0,0.06) !important;
}

.moodboard-page .mood-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(115deg, rgba(0,0,0,0.018) 0%, transparent 24%, rgba(255,255,255,0.03) 40%, transparent 60%, rgba(0,0,0,0.018) 100%),
    radial-gradient(circle at 8% 26%, rgba(0,0,0,0.05) 0 2px, transparent 2px 60px),
    radial-gradient(circle at 68% 18%, rgba(255,255,255,0.12) 0 2px, transparent 2px 72px),
    radial-gradient(circle at 34% 86%, rgba(0,0,0,0.04) 0 2px, transparent 2px 80px),
    radial-gradient(circle at 90% 76%, rgba(0,0,0,0.04) 0 2px, transparent 2px 66px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.008) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 12px) !important;
  opacity: 0.95 !important;
  mix-blend-mode: multiply !important;
}

.moodboard-page .mood-grid::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 14% 54%, rgba(42,34,27,0.12), transparent 16%),
    radial-gradient(circle at 62% 24%, rgba(60,48,38,0.08), transparent 14%),
    radial-gradient(circle at 84% 58%, rgba(255,255,255,0.06), transparent 12%),
    linear-gradient(90deg, rgba(34,26,18,0.045) 0%, transparent 12%, transparent 88%, rgba(34,26,18,0.038) 100%) !important;
  opacity: 0.85 !important;
}

/* remove black stroke / frame from media itself, keep card chrome */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video,
.moodboard-page .mood-item picture,
.moodboard-page .mood-item canvas {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
}

.moodboard-page .mood-item .paper-card > img,
.moodboard-page .mood-item .paper-card > video,
.moodboard-page .mood-item .paper-card picture img {
  padding: 0 !important;
  margin: 0 !important;
}

/* keep cards visible and cleaner */
.moodboard-page .paper-card {
  overflow: visible !important;
}

/* desktop pinned wall hierarchy */
@media (min-width: 1024px) {
  .moodboard-page .mood-grid {
    min-height: 420px !important;
  }

  .moodboard-page .mood-item[data-mood-slot="1"] {
    left: 1% !important;
    top: 18px !important;
    width: 31% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="2"] {
    left: 39% !important;
    top: 12px !important;
    width: 22% !important;
  }

  .moodboard-page .mood-item[data-mood-slot="4"] {
    left: 76% !important;
    top: 26px !important;
    width: 17% !important;
  }
}


/* =========================================================
   FINAL MOODBOARD WALL + FOOTER FIX
   ========================================================= */

/* Remove black stroke from media only, keep card borders/shadows */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video,
.moodboard-page .mood-item picture,
.moodboard-page .mood-item picture img,
.moodboard-page .mood-item .paper-card > img,
.moodboard-page .mood-item .paper-card > video {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Keep the card frame only */
.moodboard-page .mood-item .paper-card,
.moodboard-page .mood-item[data-card-type="poster"] .paper-card {
  border: 1px solid rgba(20,20,20,0.16) !important;
  box-shadow:
    8px 8px 0 rgba(17,17,17,0.92),
    0 0 0 1px rgba(17,17,17,0.08),
    0 16px 30px rgba(0,0,0,0.10) !important;
}

/* More real grungy / punk concrete wall */
.moodboard-page .mood-grid {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,0.20), transparent 18%),
    radial-gradient(circle at 76% 16%, rgba(255,255,255,0.10), transparent 22%),
    radial-gradient(circle at 22% 78%, rgba(0,0,0,0.055), transparent 18%),
    radial-gradient(circle at 84% 74%, rgba(0,0,0,0.05), transparent 16%),
    linear-gradient(180deg, #d5cec1 0%, #cbc3b6 46%, #c6beb2 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 18px 32px rgba(255,255,255,0.05),
    inset 0 -22px 38px rgba(0,0,0,0.06),
    0 14px 22px rgba(0,0,0,0.06) !important;
}

.moodboard-page .mood-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 10% 22%, rgba(84,72,58,0.08) 0 2px, transparent 2px 64px),
    radial-gradient(circle at 34% 66%, rgba(40,33,26,0.06) 0 2px, transparent 2px 82px),
    radial-gradient(circle at 72% 26%, rgba(255,255,255,0.09) 0 2px, transparent 2px 72px),
    radial-gradient(circle at 86% 80%, rgba(35,28,21,0.055) 0 2px, transparent 2px 70px),
    linear-gradient(110deg, rgba(255,255,255,0.025), transparent 26%, rgba(0,0,0,0.02) 54%, transparent 78%),
    repeating-linear-gradient(90deg, rgba(72,60,48,0.012) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 15px) !important;
  mix-blend-mode: multiply !important;
  opacity: 0.95 !important;
}

.moodboard-page .mood-grid::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 58%, rgba(61,47,34,0.10), transparent 12%),
    radial-gradient(circle at 52% 18%, rgba(110,90,68,0.06), transparent 14%),
    radial-gradient(circle at 88% 42%, rgba(51,40,29,0.08), transparent 10%),
    linear-gradient(90deg, rgba(28,22,16,0.035) 0, transparent 9%, transparent 91%, rgba(28,22,16,0.03) 100%) !important;
  opacity: 0.85 !important;
}

/* Sticky footer */
.site-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 45 !important;
}

.site-footer .footer-inner {
  position: relative !important;
}


/* =========================================================
   FINAL REQUESTED FIXES
   - remove black shadow/stroke from media only
   - stronger realistic grungy concrete wall
   - sticky footer
   ========================================================= */

/* Make the footer actually sticky/always visible */
body {
  padding-bottom: 88px !important;
}

.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 120 !important;
}

.site-footer .footer-inner {
  background: rgba(255,255,255,0.72) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

/* Remove all media-level black strokes / shadows / frames */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video,
.moodboard-page .mood-item picture,
.moodboard-page .mood-item picture img,
.moodboard-page .mood-item .paper-card > img,
.moodboard-page .mood-item .paper-card > video,
.moodboard-page .mood-grid .mood-item img,
.moodboard-page .mood-grid .mood-item video,
.moodboard-page .mood-grid .poster-card img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
}

/* Keep only the card frame, not a media frame */
.moodboard-page .mood-item .paper-card {
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(245,241,234,0.99), rgba(232,226,216,0.99)) !important;
  border: 1px solid rgba(24,24,24,0.16) !important;
  box-shadow:
    9px 9px 0 rgba(24,24,24,0.94),
    0 16px 30px rgba(0,0,0,0.10) !important;
}

/* More convincing concrete wall */
.moodboard-page .mood-grid {
  position: relative !important;
  border: 1px solid rgba(55,48,40,0.22) !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,0.26), transparent 16%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.10), transparent 18%),
    radial-gradient(circle at 24% 76%, rgba(69,57,44,0.08), transparent 20%),
    radial-gradient(circle at 86% 68%, rgba(47,39,31,0.06), transparent 16%),
    linear-gradient(180deg, #d3cbbf 0%, #cbc2b5 38%, #c7beaf 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    inset 0 22px 34px rgba(255,255,255,0.06),
    inset 0 -24px 36px rgba(0,0,0,0.06),
    0 10px 24px rgba(0,0,0,0.06) !important;
}

.moodboard-page .mood-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 8% 24%, rgba(83,69,54,0.08) 0 1.5px, transparent 1.5px 76px),
    radial-gradient(circle at 29% 66%, rgba(44,35,25,0.06) 0 1.5px, transparent 1.5px 88px),
    radial-gradient(circle at 68% 20%, rgba(255,255,255,0.12) 0 1.5px, transparent 1.5px 72px),
    radial-gradient(circle at 88% 76%, rgba(57,44,31,0.06) 0 1.5px, transparent 1.5px 92px),
    linear-gradient(115deg, rgba(255,255,255,0.04) 0%, transparent 22%, rgba(0,0,0,0.025) 58%, transparent 78%, rgba(255,255,255,0.02) 100%),
    repeating-linear-gradient(90deg, rgba(74,61,48,0.010) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 18px) !important;
  opacity: 1 !important;
  mix-blend-mode: multiply !important;
}

.moodboard-page .mood-grid::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 16% 58%, rgba(33,26,18,0.10), transparent 13%),
    radial-gradient(circle at 52% 14%, rgba(255,255,255,0.06), transparent 10%),
    radial-gradient(circle at 71% 42%, rgba(42,33,24,0.08), transparent 14%),
    radial-gradient(circle at 92% 26%, rgba(31,25,19,0.07), transparent 10%),
    linear-gradient(90deg, rgba(34,28,20,0.04) 0%, transparent 10%, transparent 90%, rgba(34,28,20,0.04) 100%) !important;
  opacity: 0.95 !important;
}


/* =========================================================
   MOODBOARD WALL — FINAL REFINEMENT
   Purpose: make the section feel intentionally art-directed,
   more realistic/grungy concrete, cleaner media, better hierarchy,
   and keep the footer sticky.
   ========================================================= */

/* sticky footer, always visible */
body {
  padding-bottom: 92px !important;
}
.site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  z-index: 160 !important;
}
.site-footer .footer-inner {
  background: rgba(255,255,255,0.74) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

/* moodboard wall section */
.moodboard-page .mood-grid {
  position: relative !important;
  min-height: 540px !important;
  padding: 28px 34px 34px !important;
  overflow: visible !important;
  border: 1px solid rgba(65,56,46,0.16) !important;
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 16%, transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255,255,255,0.12) 0%, transparent 24%),
    radial-gradient(circle at 20% 74%, rgba(82,68,54,0.10) 0%, transparent 18%),
    radial-gradient(circle at 78% 78%, rgba(58,46,35,0.07) 0%, transparent 18%),
    linear-gradient(90deg, rgba(165,152,136,0.09) 0, transparent 11%, transparent 89%, rgba(165,152,136,0.08) 100%),
    linear-gradient(180deg, #d7d0c4 0%, #cdc4b7 46%, #c8beb0 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 22px 42px rgba(255,255,255,0.06),
    inset 0 -26px 40px rgba(0,0,0,0.05),
    0 16px 28px rgba(0,0,0,0.07) !important;
}

.moodboard-page .mood-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 9% 18%, rgba(58,46,34,0.08) 0 1.6px, transparent 1.6px 70px),
    radial-gradient(circle at 26% 62%, rgba(40,31,23,0.06) 0 1.4px, transparent 1.4px 72px),
    radial-gradient(circle at 57% 24%, rgba(255,255,255,0.10) 0 1.6px, transparent 1.6px 76px),
    radial-gradient(circle at 73% 72%, rgba(44,34,25,0.08) 0 1.4px, transparent 1.4px 84px),
    radial-gradient(circle at 92% 41%, rgba(31,26,21,0.05) 0 1.4px, transparent 1.4px 70px),
    linear-gradient(112deg, rgba(0,0,0,0.020) 0%, transparent 20%, rgba(255,255,255,0.028) 37%, transparent 55%, rgba(0,0,0,0.018) 76%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.010) 0 1px, transparent 1px 17px) !important;
  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

.moodboard-page .mood-grid::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.035), transparent 8%, transparent 92%, rgba(0,0,0,0.03)),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 16%, transparent 84%, rgba(0,0,0,0.04)),
    radial-gradient(circle at 16% 54%, rgba(49,37,27,0.10), transparent 15%),
    radial-gradient(circle at 64% 18%, rgba(255,255,255,0.07), transparent 12%),
    radial-gradient(circle at 88% 58%, rgba(46,35,24,0.08), transparent 14%) !important;
  opacity: 0.95 !important;
}

/* cards */
.moodboard-page .mood-grid .mood-item {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.moodboard-page .mood-item .paper-card,
.moodboard-page .mood-item[data-card-type="poster"] .paper-card {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(248,245,239,0.985), rgba(235,229,219,0.99)) !important;
  border: 1px solid rgba(29,24,20,0.18) !important;
  box-shadow:
    10px 10px 0 rgba(20,20,20,0.95),
    0 16px 28px rgba(0,0,0,0.11) !important;
}

.moodboard-page .mood-item .paper-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  border: 1px solid rgba(30,24,18,0.08) !important;
  pointer-events: none !important;
}

/* keep images fully visible and clean */
.moodboard-page .mood-item img,
.moodboard-page .mood-item video,
.moodboard-page .mood-item picture,
.moodboard-page .mood-item picture img,
.moodboard-page .mood-item .paper-card > img,
.moodboard-page .mood-item .paper-card > video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* pin style */
.moodboard-page .mood-item .wall-pin {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #d4cec3 0 28%, #a8a093 29% 52%, #797063 53% 100%) !important;
  border: 2px solid rgba(248,245,239,0.72) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.14) !important;
}

/* sticker behaves like a pasted cutout, not a paper frame */
.moodboard-page .mood-item[data-card-type="sticker"] {
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.16)) !important;
}
.moodboard-page .mood-item[data-card-type="sticker"] img {
  width: 100% !important;
  height: auto !important;
}
.moodboard-page .mood-item[data-card-type="sticker"] .wall-pin,
.moodboard-page .mood-item[data-card-type="sticker"]::before,
.moodboard-page .mood-item[data-card-type="sticker"]::after {
  display: none !important;
}

/* default desktop hierarchy — more art-directed */
@media (min-width: 1024px) {
  .moodboard-page .mood-grid {
    min-height: 560px !important;
  }

  .moodboard-page .mood-item {
    position: absolute !important;
    cursor: grab !important;
    touch-action: none !important;
  }

  .moodboard-page .mood-item[data-mood-slot="1"] {
    left: 2.5% !important;
    top: 28px !important;
    width: 31.5% !important;
    transform: rotate(-1.2deg) !important;
  }

  .moodboard-page .mood-item[data-mood-slot="2"] {
    left: 35.7% !important;
    top: 46px !important;
    width: 21.6% !important;
    transform: rotate(1.15deg) !important;
  }

  .moodboard-page .mood-item[data-mood-slot="4"] {
    left: 74.4% !important;
    top: 126px !important;
    width: 17.8% !important;
    transform: rotate(2.4deg) !important;
  }

  .moodboard-page .mood-item:hover {
    transform: translateY(-4px) rotate(0deg) !important;
  }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .moodboard-page .mood-grid {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 20px !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.drag-was-moved {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  .moodboard-page .mood-item[data-mood-slot="1"] { grid-column: 1 / span 1 !important; }
  .moodboard-page .mood-item[data-mood-slot="2"] { grid-column: 2 / span 1 !important; align-self: start !important; }
  .moodboard-page .mood-item[data-mood-slot="4"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 260px !important;
  }
}

/* mobile */
@media (max-width: 767px) {
  .moodboard-page .mood-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  .moodboard-page .mood-item,
  .moodboard-page .mood-item.drag-was-moved {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  .moodboard-page .mood-item[data-mood-slot="4"] {
    max-width: 210px !important;
    justify-self: center !important;
  }
}


/* =========================================================
   MOODBOARD IMAGE BACKGROUND PATCH
   Use generated concrete wall image as the pinned-wall background.
   ========================================================= */
.moodboard-page .mood-grid {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.02)),
    url('../assets/IMAGES/moodboard-concrete-wall-bg.png') center center / cover no-repeat !important;
}


/* =========================================================
   LASTV REQUESTED UPDATES
   - remove blur from moodboard images and stickers
   - simpler / studio-looking expanded image style
   - privacy control buttons horizontal on mobile
   - slightly larger footer text on tablet
   ========================================================= */

/* 1) Moodboard media clean-up: no blur / haze on images or sticker assets */
.moodboard-page .mood-item,
.moodboard-page .mood-item img,
.moodboard-page .mood-item video,
.moodboard-page .mood-item picture,
.moodboard-page .mood-item picture img,
.moodboard-page .mood-item .paper-card,
.moodboard-page .mood-item .paper-card::before,
.moodboard-page .mood-item .paper-card::after,
.moodboard-page .mood-item::before,
.moodboard-page .mood-item::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

.moodboard-page .mood-item img,
.moodboard-page .mood-item video,
.moodboard-page .mood-item picture img,
.moodboard-page .mood-item .paper-card > img,
.moodboard-page .mood-item .paper-card > video {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
}

.moodboard-page .mood-item[data-card-type="sticker"],
.moodboard-page .mood-item[data-card-type="sticker"] img {
  filter: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 2) Moodboard expanded image: cleaner, studio-like, simpler */
.moodboard-lightbox {
  background: rgba(238, 234, 227, 0.78) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.02) !important;
  backdrop-filter: blur(14px) saturate(1.02) !important;
}

.moodboard-lightbox::before {
  content: none !important;
  display: none !important;
}

.moodboard-lightbox__panel {
  width: min(90vw, 1100px) !important;
  max-width: calc(100vw - 32px) !important;
  max-height: min(88vh, 920px) !important;
  padding: 22px !important;
  border: 1px solid rgba(32, 30, 26, 0.18) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(251, 249, 245, 0.96), rgba(241, 237, 231, 0.96)) !important;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset !important;
  transform: none !important;
  overflow: hidden !important;
}

.moodboard-lightbox__panel::before {
  content: "MOODBOARD PREVIEW" !important;
  position: absolute !important;
  top: 14px !important;
  left: 22px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  color: rgba(90, 90, 90, 0.9) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  transform: none !important;
}

.moodboard-lightbox__panel::after {
  display: none !important;
  content: none !important;
}

.moodboard-lightbox__media-wrap {
  margin-top: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  max-height: calc(min(88vh, 920px) - 82px) !important;
  padding: 18px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), rgba(250,248,244,0.4)) !important;
  border: 1px solid rgba(34, 34, 34, 0.08) !important;
}

.moodboard-lightbox__media-wrap img,
.moodboard-lightbox__media-wrap video {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(min(88vh, 920px) - 126px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: none !important;
  border: none !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
}

.moodboard-lightbox__close {
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111 !important;
  box-shadow: none !important;
}

.moodboard-lightbox__close:hover {
  background: #111 !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .moodboard-lightbox {
    padding: 12px !important;
  }

  .moodboard-lightbox__panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100svh - 24px) !important;
    padding: 16px !important;
  }

  .moodboard-lightbox__panel::before {
    top: 12px !important;
    left: 16px !important;
    font-size: 9px !important;
    letter-spacing: 0.15em !important;
  }

  .moodboard-lightbox__media-wrap {
    margin-top: 28px !important;
    padding: 12px !important;
    max-height: calc(100svh - 104px) !important;
  }

  .moodboard-lightbox__media-wrap img,
  .moodboard-lightbox__media-wrap video {
    max-height: calc(100svh - 132px) !important;
  }

  .moodboard-lightbox__close {
    width: 34px !important;
    height: 34px !important;
    top: 10px !important;
    right: 10px !important;
  }
}

/* 3) Mobile privacy control: action buttons side-by-side */
@media (max-width: 767px) {
  .cookie-modal__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .cookie-modal__actions .cookie-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 10px 10px !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.12em !important;
  }
}

/* 4) Tablet footer: slightly larger text */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer .footer-inner p,
  .site-footer .footer-inner a,
  .site-footer .footer-item,
  .site-footer .footer-brand,
  .site-footer .footer-social,
  .site-footer .footer-designed,
  .site-footer .footer-copyright,
  .site-footer .footer-scramble {
    font-size: 10.75px !important;
    line-height: 1.14 !important;
  }
}


/* =========================================================
   FOOTER INNER OPACITY MATCH
   Match the inside of the footer to the menu navbar:
   same transparent white opacity + same blur feeling.
   ========================================================= */

.site-footer .footer-inner {
  background: rgba(255, 255, 255, 0.5) !important;
  background-color: rgba(255, 255, 255, 0.5) !important;
  background-image: none !important;

  border-color: #c7c7c7 !important;

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

.site-footer .footer-inner::before,
.site-footer .footer-inner::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}

/* =========================================================
   FINAL REQUEST — footer tablet size + compact MENU padding
   - Tablet footer content increased slightly.
   - Mobile/tablet MENU button horizontal padding reduced slightly.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer .footer-inner p,
  .site-footer .footer-inner a,
  .site-footer .footer-item,
  .site-footer .footer-brand,
  .site-footer .footer-social,
  .site-footer .footer-designed,
  .site-footer .footer-copyright,
  .site-footer .footer-scramble {
    font-size: 11.5px !important;
    line-height: 1.16 !important;
  }

  body .site-header > .main-nav {
    padding-left: 11px !important;
    padding-right: 11px !important;
    min-width: 66px !important;
    max-width: 86px !important;
  }

  .mobile-menu-trigger {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

@media (max-width: 767px) {
  body .site-header > .main-nav {
    padding-left: 9px !important;
    padding-right: 9px !important;
    min-width: 64px !important;
    max-width: 84px !important;
  }

  .mobile-menu-trigger {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

@media (max-width: 479px) {
  body .site-header > .main-nav {
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-width: 60px !important;
    max-width: 80px !important;
  }
}

/* =========================================================
   FINAL REQUEST — compact horizontal Privacy Control buttons
   - Banner buttons stay aligned in one horizontal row on mobile/tablet.
   - Cookie preferences modal buttons are smaller and side-by-side.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  .cookie-banner__actions,
  .cookie-modal__actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .cookie-banner__actions .cookie-btn,
  .cookie-modal__actions .cookie-btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 29px !important;
    padding: 6px 9px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.1em !important;
  }
}

@media (max-width: 767px) {
  .cookie-banner__actions,
  .cookie-modal__actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .cookie-banner__actions .cookie-btn,
  .cookie-modal__actions .cookie-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 6px 4px !important;
    font-size: 7.8px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
  }
}

/* =========================================================
   FINAL REQUEST — tighter footer/menu vertical padding
   - Tablet footer has slightly less top/bottom internal space.
   - Mobile/tablet MENU button is slightly shorter vertically.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer .footer-inner {
    min-height: 35px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .site-header > .main-nav {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile-menu-trigger {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 767px) {
  body .site-header > .main-nav {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile-menu-trigger {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   FINAL REQUEST — hero checkered texture + moodboard texture layer cleanup
   - Adds the same subtle checkered/noise texture into the home hero.
   - Removes the extra moodboard page overlay layer that was covering the
     global noise/checkered page texture.
   ========================================================= */

.home-cover {
  background:
    radial-gradient(circle at 82% 26%, var(--signal-soft), transparent 30%),
    linear-gradient(rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    rgba(245, 244, 239, 0.86) !important;
  background-size:
    auto,
    42px 42px,
    42px 42px,
    auto !important;
  background-position:
    center,
    0 0,
    0 0,
    center !important;
}

.home-cover::after {
  background-image:
    radial-gradient(#000 1px, transparent 1px),
    linear-gradient(120deg, transparent, rgba(0, 0, 0, 0.12), transparent),
    linear-gradient(rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px) !important;
  background-size:
    4px 4px,
    260px 260px,
    42px 42px,
    42px 42px !important;
  opacity: 0.08 !important;
}

/* Moodboard: let the global page noise/checkered texture show through again. */
body:has(main.moodboard-page) {
  background:
    linear-gradient(rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.035) 1px, transparent 1px),
    var(--bg) !important;
  background-size: 42px 42px !important;
}

main.moodboard-page,
.moodboard-page {
  background: transparent !important;
  background-image: none !important;
}

main.moodboard-page::before,
main.moodboard-page::after,
.moodboard-page::before,
.moodboard-page::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* =========================================================
   FINAL REQUEST — footer scroll-end spacing refinement
   - Reduces the empty space above the sticky footer when scrolled to the bottom.
   - Adds a small breathing gap below the footer.
   - Applied across desktop, tablet, and mobile UI.
   ========================================================= */

body {
  padding-bottom: 78px !important;
}

.site-footer {
  bottom: 10px !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body {
    padding-bottom: 58px !important;
  }

  .site-footer {
    bottom: 8px !important;
  }
}

@media (max-width: 767px) {
  body {
    padding-bottom: 56px !important;
  }

  .site-footer {
    bottom: 8px !important;
  }
}

/* =========================================================
   FINAL REQUEST — texture intensity, header alignment + footer spacing
   - Softens the home hero checkered/noise texture.
   - Vertically centers the tablet copyright inside the footer.
   - Aligns logo and desktop navbar / mobile-tablet MENU button on one center line.
   - Reduces the desktop scroll-end gap above the sticky footer.
   ========================================================= */

/* Hero texture: keep the same treatment, but make it less intense. */
.home-cover {
  background:
    radial-gradient(circle at 82% 26%, rgba(233, 50, 34, 0.10), transparent 30%),
    linear-gradient(rgba(17, 17, 17, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.018) 1px, transparent 1px),
    rgba(245, 244, 239, 0.90) !important;
  background-size:
    auto,
    42px 42px,
    42px 42px,
    auto !important;
}

.home-cover::after {
  opacity: 0.035 !important;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.75) 1px, transparent 1px),
    linear-gradient(120deg, transparent, rgba(0, 0, 0, 0.08), transparent),
    linear-gradient(rgba(17, 17, 17, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.014) 1px, transparent 1px) !important;
}

/* Desktop: reduce only the bottom-scroll reserve so the footer sits closer to the sections. */
@media (min-width: 1024px) {
  body {
    padding-bottom: 52px !important;
  }

  .site-footer {
    bottom: 10px !important;
  }
}

/* Header centerline alignment across UI sizes. */
@media (min-width: 1024px) {
  body .site-header > .mark {
    top: 16px !important;
  }

  body .site-header > .main-nav {
    top: calc(16px + ((clamp(42px, 4.8vw, 72px) - 40px) / 2)) !important;
    min-height: 40px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body .site-header > .mark {
    top: 14px !important;
    height: 44px !important;
    width: 44px !important;
  }

  body .site-header > .main-nav {
    top: 19px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .mobile-menu-trigger {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .site-footer .footer-left,
  .site-footer .footer-copyright,
  .site-footer .star-studio-copyright {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  .site-footer .footer-copyright {
    height: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 767px) {
  body .site-header > .mark {
    top: 14px !important;
    height: 44px !important;
    width: 44px !important;
  }

  body .site-header > .main-nav {
    top: 20px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .mobile-menu-trigger {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* =========================================================
   PATCH — tablet footer copyright vertical centering
   Keeps the ©2026 STAR STUDIO item on the same vertical centerline
   as the footer orb and the rest of the tablet footer content.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-footer .footer-inner,
  .site-footer .footer-left {
    align-items: center !important;
  }

  .site-footer .footer-left {
    display: inline-flex !important;
  }

  .site-footer .footer-copyright {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: 17px !important;
    min-height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: translateY(0.5px) !important;
  }

  .site-footer .footer-copyright .star-studio-copyright {
    display: inline-flex !important;
    align-items: center !important;
    height: 17px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* MAC UI FOOTER FONT SIZE REFINEMENT */
@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-inner p,
  .footer-inner a {
    font-size: clamp(9.2px, 0.86vw, 11.4px) !important;
  }
}


/* =========================================================
   FINAL REQUEST — active work slide checkered texture
   - Adds the same subtle checkered/grid texture to the active slide
     in the Works stage, while keeping media and UI readable.
   ========================================================= */

.works-page .work-slide.active {
  position: absolute !important;
  isolation: isolate !important;
  background:
    linear-gradient(rgba(17, 17, 17, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.022) 1px, transparent 1px),
    rgba(245, 244, 239, 0.14) !important;
  background-size:
    42px 42px,
    42px 42px,
    auto !important;
  background-position:
    0 0,
    0 0,
    center !important;
}

/* Keep content above the active slide texture layer */
.works-page .work-slide.active > * {
  position: relative;
  z-index: 1;
}


/* =========================================================
   FINAL REQUEST — smooth Works hover interaction
   - Makes the View work button fade/scale in smoothly.
   - Makes the active work image scale gently instead of snapping.
   - Keeps layout and existing positions unchanged.
   ========================================================= */

.works-page .work-slide .image,
.works-page .work-slide .image-main,
.works-page .work-slide .image-side {
  transform-origin: center center !important;
  transition:
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter 0.45s ease !important;
  will-change: transform, opacity, filter !important;
}

.works-page .work-slide.active .image-main {
  transform: scale(1) !important;
}

.works-page .work-slide.active:hover .image-main {
  transform: scale(0.965) !important;
}

.works-page .work-slide .view-work {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0.82) !important;
  transition:
    opacity 0.38s ease,
    visibility 0.38s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform, opacity !important;
}

.works-page .work-slide.active:hover .view-work {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}


/* =========================================================
   FINAL REQUEST — privacy policy mobile table refinement
   - On mobile, each cookie-storage value sits directly below
     its matching label: Name, Purpose, Duration.
   ========================================================= */

@media (max-width: 767px) {
  .privacy-page table th,
  .privacy-page table td,
  .privacy-policy-page table th,
  .privacy-policy-page table td,
  main[class*="privacy"] table th,
  main[class*="privacy"] table td {
    display: table-cell !important;
    width: auto !important;
    vertical-align: top !important;
  }

  .privacy-page table th,
  .privacy-policy-page table th,
  main[class*="privacy"] table th {
    font-weight: 700 !important;
  }

  .privacy-page table td,
  .privacy-policy-page table td,
  main[class*="privacy"] table td {
    font-weight: 500 !important;
  }
}


/* =========================================================
   FINAL REQUEST — moodboard resizable speaker sticker
   - Adds the uploaded image as a smaller sticker-style moodboard card.
   - Makes the sticker resizable on desktop.
   - Keeps the layout clean and non-overlapping.
   ========================================================= */

.moodboard-page .mood-item.mood-resizable-sticker {
  width: 82% !important;
  margin-left: auto !important;
  margin-right: 6px !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07) !important;
  transform: rotate(2.2deg) !important;
}

.moodboard-page .mood-item.mood-resizable-sticker img {
  border-radius: 2px !important;
}

@media (min-width: 1024px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    resize: both !important;
    overflow: auto !important;
    min-width: 180px !important;
    max-width: min(100%, 420px) !important;
    min-height: 160px !important;
  }

  .moodboard-page .mood-item.mood-resizable-sticker::-webkit-resizer {
    background:
      linear-gradient(135deg, transparent 0 54%, rgba(17, 17, 17, 0.28) 54% 60%, transparent 60% 100%) !important;
  }
}

@media (max-width: 1023px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    width: 100% !important;
    margin-right: 0 !important;
    transform: rotate(1.1deg) !important;
  }
}


/* =========================================================
   FINAL REQUEST — moodboard sticker cleanup + mobile hide + hero logo touch refine
   - Removes the white card/background feeling from the speaker sticker.
   - Makes the speaker sticker smaller.
   - Hides moodboard stickers on mobile UI.
   - Strengthens touch drag behavior for the hero logo on mobile/tablet.
   ========================================================= */

.moodboard-page .mood-item.mood-resizable-sticker {
  width: 58% !important;
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  transform: rotate(1.8deg) !important;
}

.moodboard-page .mood-item.mood-resizable-sticker img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: multiply !important;
}

@media (min-width: 1024px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    min-width: 160px !important;
    min-height: auto !important;
    max-width: 260px !important;
    resize: both !important;
    overflow: auto !important;
  }
}

@media (max-width: 1023px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    width: 46% !important;
    max-width: 190px !important;
    margin-right: 0 !important;
    transform: rotate(1deg) !important;
  }
}

@media (max-width: 767px) {
  .moodboard-page .mood-item[data-card-type="sticker"] {
    display: none !important;
  }
}

/* Keep hero logo easy to drag repeatedly on touch devices */
@media (max-width: 1023px) {
  .cover-logo,
  .home-page .cover-logo {
    touch-action: none !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    transform:
      translate3d(var(--hero-logo-x, 0px), var(--hero-logo-y, 0px), 0)
      rotate(var(--hero-logo-rotate, 0deg))
      scale(var(--hero-logo-scale, 1)) !important;
  }

  .cover-logo.is-dragging,
  .home-page .cover-logo.is-dragging {
    transition: none !important;
  }
}


/* =========================================================
   FINAL REQUEST — stickers keep original asset shape
   - Sticker cards should not get extra poster/card styling.
   - Sticker media should preserve the original file shape/alpha.
   - Speaker sticker uses a transparent cutout asset like the other stickers.
   ========================================================= */

.moodboard-page .mood-item[data-card-type="sticker"] {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.moodboard-page .mood-item[data-card-type="sticker"] img,
.moodboard-page .mood-item[data-card-type="sticker"] video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
}

/* Keep the speaker sticker smaller while respecting the asset cutout shape */
.moodboard-page .mood-item.mood-resizable-sticker {
  width: 54% !important;
  max-width: 230px !important;
  margin-left: auto !important;
  margin-right: 10px !important;
  transform: rotate(1.8deg) !important;
}

@media (min-width: 1024px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    min-width: 150px !important;
    max-width: 230px !important;
    resize: both !important;
    overflow: auto !important;
  }
}

@media (max-width: 1023px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    width: 42% !important;
    max-width: 170px !important;
  }
}


/* =========================================================
   FINAL REQUEST — stickers always keep the source image shape
   - Every sticker keeps the exact shape of the asset file it uses.
   - PNG/WebP with transparency stay cut out.
   - JPG or other non-transparent images keep their full rectangular image shape.
   ========================================================= */

.moodboard-page .mood-item[data-card-type="sticker"] {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.moodboard-page .mood-item[data-card-type="sticker"] img,
.moodboard-page .mood-item[data-card-type="sticker"] video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Speaker sticker: keep smaller size, but preserve original JPG rectangle */
.moodboard-page .mood-item.mood-resizable-sticker {
  width: 54% !important;
  max-width: 230px !important;
  margin-left: auto !important;
  margin-right: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(1.8deg) !important;
}

@media (min-width: 1024px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    min-width: 150px !important;
    max-width: 230px !important;
    resize: both !important;
    overflow: auto !important;
  }
}

@media (max-width: 1023px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    width: 42% !important;
    max-width: 170px !important;
  }
}


/* =========================================================
   FINAL REQUEST — strict sticker source-shape fix
   - Sticker cards must display exactly in the source image shape.
   - Transparent source files keep their cutout silhouette.
   - Non-transparent source files keep their full rectangular image shape.
   - Removes any leftover mask / clip / blend / poster behavior.
   ========================================================= */

.moodboard-page .mood-item[data-card-type="sticker"] {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.moodboard-page .mood-item[data-card-type="sticker"]::before,
.moodboard-page .mood-item[data-card-type="sticker"]::after,
.moodboard-page .mood-item[data-card-type="sticker"] .wall-pin,
.moodboard-page .mood-item[data-card-type="sticker"] .paper-card {
  content: none !important;
  display: none !important;
}

.moodboard-page .mood-item[data-card-type="sticker"] img,
.moodboard-page .mood-item[data-card-type="sticker"] video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Speaker sticker should remain the original rectangular image, just smaller */
.moodboard-page .mood-item.mood-resizable-sticker {
  width: 220px !important;
  max-width: 220px !important;
  margin-left: auto !important;
  margin-right: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: rotate(1.8deg) !important;
  resize: both !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

@media (max-width: 1023px) {
  .moodboard-page .mood-item.mood-resizable-sticker {
    width: 165px !important;
    max-width: 165px !important;
    resize: none !important;
  }
}