/* ============================================================
   ICONIK SOCIAL STUDIO — style.css
   
   Colors:
     --bone:     #EEDBC1   (cream)
     --black:    #0A0A0A   (page background)
     --burgundy: #4D0000   (accent)
     --electric: #1800AD   (accent)

   Fonts (three, and only three render):
     Boldino           — display headlines, 28px and up
     DenimINK Heavy    — nav and mid-weight labels, 19-38px
     DenimINK SemiBold — body and all small text, 21px and down

   To change colors: edit the :root custom properties below.
   ============================================================ */

/* ---------- Custom Fonts ---------- */
@font-face {
  font-family: 'DenimINK Heavy';
  src: url('assets/fonts/DenimINK-TRIAL-Heavy.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'DenimINK SemiBold';
  src: url('assets/fonts/DenimINK-TRIAL-SemiBold.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Boldino';
  src: url('assets/fonts/Boldino.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bone: #EEDBC1;
  --bone-dark: #E8E0D8;
  --black: #0A0A0A;
  --burgundy: #4D0000;
  /* Six percent lighter, hue and saturation untouched. The step is small on
     purpose; anything brighter drifts out of burgundy and into plain red,
     because the base sits at full saturation. */
  --burgundy-light: #6C0000;
  --electric: #1800AD;
  --burnt-orange: #DF6334;
  --mustard: #DCA738;
  --white: #FFFFFF;

  /* Three faces render on this site: Boldino for display, DenimINK Heavy for
     mid-weight, DenimINK SemiBold for everything small. --font-body used to
     point at SquidBoy, which 204 elements inherited but none ever displayed,
     so it downloaded ~102KB on every visit and rendered nothing. It now falls
     back to the text face so nothing can land on a system font. */
  --font-heading: 'Boldino', sans-serif;
  --font-body: 'DenimINK SemiBold', sans-serif;
  --font-body-weight: 400;
  --font-mono: 'DenimINK SemiBold', sans-serif;

  /* One size for the small uppercase item lists. They previously ran at three
     sizes — the service list at 13px on desktop and 15px in the mobile
     carousel, for identical words — with two hardcoded in rem and only one
     fluid. Display type is deliberately NOT tokenised: those headlines are set
     at their limits on purpose and carry the brutalist weight. */
  --type-list: clamp(11px, 0.95vw, 14px);

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --footer-height: 36vh;
}

html {
  font-size: 21px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
  cursor: none;
}

/* Touch devices must scroll natively. `scroll-behavior: smooth` animates every
   programmatic scroll, and on iOS that fights the browser's own momentum and
   drags the page toward a target the user never asked for. On desktop Lenis
   cancels it via `.lenis-smooth { scroll-behavior: auto }`, so this rule is
   what covers phones, where Lenis deliberately does not run. */
@media (pointer: coarse) {
  html { scroll-behavior: auto; }
}

::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }

body {
  font-family: var(--font-body);
  font-weight: 100;
  background-color: var(--black);
  color: var(--black);
  overflow-x: hidden;
  line-height: 1.6;
  overscroll-behavior: none;
  padding-bottom: var(--footer-height, 55vh);
}

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

ul {
  list-style: none;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
  border: none;
  outline: none;
}

button {
  font-family: inherit;
  cursor: auto;
  background: none;
  border: none;
  color: inherit;
}

/* ---------- Custom Cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 72px;
  height: 44px;
  border-radius: 0;
  background: transparent url('assets/images/yellow_cursor.png') center / contain no-repeat;
  pointer-events: none;
  z-index: 10000;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  transition: width 0.35s var(--ease-out-expo),
    height 0.35s var(--ease-out-expo),
    opacity 0.3s ease;
  mix-blend-mode: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.cursor .cursor-text {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out-expo);
  pointer-events: none;
  white-space: nowrap;
}

.cursor.hovering {
  width: 100px;
  height: 60px;
  opacity: 0.85;
}

.cursor.hovering .cursor-text {
  opacity: 1;
  transform: scale(1);
  color: var(--bone);
}

.cursor.hovering-link {
  width: 55px;
  height: 34px;
  opacity: 0.7;
}

/* ---------- Loader / Intro Screen ---------- */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9000;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Video layer sits behind everything */
#loader .video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

#loader .video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56.25vh;
  /* 9:16 Aspect Ratio */
  height: 100vh;
  min-width: 100vw;
  min-height: 177.77vw;
  /* 9:16 Aspect Ratio */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* Canvas overlay: JS draws black fill with text cutout using compositing */
#loader .mask-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: var(--black);
}

#loader .mask-overlay canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Wordmark container — initially shows the text, JS fades it out when canvas mask is ready */
#loader .wordmark-container {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  pointer-events: none;
}

#loader .wordmark-svg {
  width: clamp(300px, 60vw, 900px);
  height: auto;
  overflow: visible;
}

#loader .wordmark-svg text {
  fill: var(--white);
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: -0.02em;
}

#loader .tagline-loader {
  margin-top: 1.5rem;
  overflow: hidden;
}

#loader .tagline-loader span {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  color: var(--bone);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  transform: translateY(100%);
  opacity: 0;
}

/* Progress bar */
#loader .progress-bar {
  display: none;
}

/* Loader hidden state */
#loader.hidden {
  pointer-events: none;
}

/* Returning visitor inside the 5-minute window. The class is set on <html> by the
   inline head script, so this applies on the first paint and the loader never flashes. */
html.loader-skipped #loader {
  display: none;
}

/* ---------- Main Content ---------- */
#main-content {
  position: relative;
  z-index: 1;
  background: var(--black);
  opacity: 0;
  visibility: hidden;
}

#main-content.visible {
  opacity: 1;
  visibility: visible;
}

/* ---------- Header / Navigation ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 0.6rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--bone);
  background: transparent;
  transition: background 0.4s ease;

  /* FIXED: Set baseline states so it is completely hidden on load */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-40px);
  will-change: transform, opacity;
}

.header.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header nav,
.header .logo {
  transition: opacity 0.6s ease;
}

.header.near-footer nav,
.header.near-footer .logo {
  opacity: 0;
  pointer-events: none;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* SNUG & PERFECTLY PROPORTIONED GAP */
}

.header .logo {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.logo-3d-container {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 20px;
  position: relative;
  perspective: 400px;
  transform: translateY(-1px);
}

.header .logo-3d-container {
  width: 36px;
  height: 24px;
}

.logo-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out-expo);
}

.header .logo {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.header .logo:hover {
  opacity: 0.4;
  transform: translateY(-3px);
}

.logo-eye-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
  transform: translateZ(0px);
  backface-visibility: hidden;
  pointer-events: none;
}

.logo-globe-core {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
  animation: logo-globe-spin 9s linear infinite;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* ─── 11. Custom Branding Graphic System (Way.tv Uniform Alignment) ─── */

/* Navigation Header Graphic Alignment */
.header .logo .brand-wordmark-svg {
  height: clamp(84px, 7.2vw, 114px);
  width: auto;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  margin-left: -7px;
  transform: translateY(-3px);
}

/* @media (max-width: 768px) {
  .brand-wordmark-large {
    display: none !important;
  }

  .brand-wordmark-medium-small {
    display: inline-block !important;
  }
} */

/* Way.tv Giant Signature Bottom Bar Layout */
.hero-main-title .hero-wordmark-graphic {
  width: clamp(200px, 32vw, 480px);
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  color: var(--bone);
}

/* Footer Brand Container Alignment */
.footer .logo .brand-wordmark-svg {
  height: 50px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  /* Keeps asset pristine bone color (brand color) */
  object-fit: contain;
  margin-left: -5px;
  /* Compensate for internal SVG left padding */
  transform: translateY(-2px);
  /* Center-align with the left globe icon */
}

/* Ensures layout scaling changes retain exact sharpness across devices */
.brand-wordmark-svg,
.hero-wordmark-graphic,
.footer-wordmark-graphic {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@keyframes logo-globe-spin {
  0% {
    transform: translateZ(3px) rotateY(0deg);
  }

  100% {
    transform: translateZ(3px) rotateY(360deg);
  }
}

.header nav ul {
  display: flex;
  gap: 3.5rem;
  align-items: center;
}

.header nav a {
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.header nav a:hover {
  opacity: 0.4;
  transform: translateY(-3px);
}

.header nav a.nav-page-active {
  text-decoration: underline;
  text-decoration-color: var(--electric);
  text-underline-offset: 5px;
  opacity: 1;
}

#nav-work.nav-page-active    { text-decoration-color: var(--burgundy-light); }
#nav-about.nav-page-active   { text-decoration-color: var(--mustard); }
#nav-contact.nav-page-active { text-decoration-color: var(--burnt-orange); }

/* Menu toggle — mobile only */
.menu-toggle {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: none;
  padding: 0.55rem 1.3rem;
  position: relative;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.menu-toggle-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.menu-toggle:hover { opacity: 0.5; }

/* ============================================================
   HERO SECTION — WAY.TV Canvas Pixel-Block Reveal
   Layer stack (z-index):
     0  .hero-video-stage   full-bleed iframe stack
     2  #hero-canvas        canvas pixel-block overlay
     4  .hero-vignette      edge gradient
     5  .hero-ui            corner text (pointer-events: none base)
     6  .hero-bottom        bottom bar
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  /* min() so a short window never gets a hero taller than itself. A phone in
     landscape is ~393px tall, and a flat 600px min-height overflowed it by
     207px, hiding the wordmark below the fold. */
  min-height: min(600px, 100vh);
  background: var(--black);
  overflow: hidden;
}

/* svh excludes the mobile browser chrome, so the hero stops resizing every
   time iOS shows or hides the address bar */
@supports (height: 100svh) {
  .hero { height: 100svh; min-height: min(600px, 100svh); }
}

/* ── Video Stage ── */
.hero-video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-video-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-video-item.is-active {
  opacity: 1;
}

/* Responsive Background Videos Override */
@media (min-width: 769px) {
  .hero-video-desktop {
    opacity: 1 !important;
    display: block !important;
  }

  .hero-video-mobile {
    opacity: 0 !important;
    display: none !important;
  }
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .hero-video-desktop {
    opacity: 0 !important;
    display: none !important;
  }

  .hero-video-mobile {
    opacity: 1 !important;
    display: block !important;
  }
}

.hero-video-item iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cover viewport maintaining 16:9 ratio */
  width: 177.78vh;
  height: 100vh;
  min-width: 100%;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ── Grain Overlay ── */
.hero-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hero-grain-shift 0.14s steps(1) infinite;
}

@keyframes hero-grain-shift {
  0%   { transform: translate(0,0); }
  12%  { transform: translate(-2%,-3%); }
  25%  { transform: translate(3%,1%); }
  37%  { transform: translate(-1%,2%); }
  50%  { transform: translate(2%,-2%); }
  62%  { transform: translate(-3%,1%); }
  75%  { transform: translate(1%,3%); }
  87%  { transform: translate(3%,-1%); }
  100% { transform: translate(-1%,-2%); }
}

/* ── Canvas Overlay ── */
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* canvas only receives events via JS on the section */
}

/* ── Vignette ── */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(to bottom,
      rgba(11, 11, 11, 0.60) 0%,
      rgba(11, 11, 11, 0.00) 22%,
      rgba(11, 11, 11, 0.00) 68%,
      rgba(11, 11, 11, 0.80) 100%),
    linear-gradient(to right,
      rgba(11, 11, 11, 0.30) 0%,
      rgba(11, 11, 11, 0.00) 18%,
      rgba(11, 11, 11, 0.00) 82%,
      rgba(11, 11, 11, 0.30) 100%);
  pointer-events: none;
}

/* ── Corner UI ── */
.hero-ui {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Bottom-right, where it is findable but never in front of the wordmark.
   pointer-events stays off so it can never intercept the very gesture it is
   asking for. */
.hero-hint {
  position: absolute;
  left: clamp(1.5rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  z-index: 6;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.42);
  pointer-events: none;
  opacity: 0;
  animation: hero-hint-in 0.8s ease 2.6s forwards;
  transition: opacity 0.6s ease;
}

/* Held back until the intro has settled. Arriving with everything else, it
   competes with the wordmark at the one moment the wordmark should be alone. */
@keyframes hero-hint-in {
  to { opacity: 1; }
}

/* A slow pulse, because a static line of small type beside moving video is
   the easiest thing on the page to miss. */
.hero-hint-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bone);
  opacity: 0.5;
  animation: hero-hint-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-hint-pulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.5); }
}

/* Gone once the tiles have answered, but not the instant they do — it lingers
   so the connection between the gesture and the result has time to register.
   Written as its own animation rather than as a transition because the
   entrance uses animation-fill-mode: forwards, and removing that snaps the
   value rather than easing it. The timing that guarantees the entrance has
   finished first lives in script.js. */
.hero.has-explored .hero-hint {
  animation: hero-hint-out 0.9s ease forwards;
}

@keyframes hero-hint-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.hero-hint-touch { display: none; }

@media (hover: none) {
  .hero-hint-pointer { display: none; }
  .hero-hint-touch   { display: inline; }
}

/* On a phone the bottom corner belongs to the wordmark — the hint was landing
   about ten pixels under it. Moved to the clear band under the header, and
   centred, because the mobile layout is centred while the desktop one is not. */
@media (max-width: 768px) {
  .hero-hint {
    top: clamp(116px, 26vw, 152px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-hint     { animation: none; opacity: 1; }
  .hero-hint-dot { animation: none; opacity: 0.5; }
}

.hero-ui-topleft,
.hero-ui-topright {
  position: absolute;
  top: clamp(1.2rem, 2.2vw, 2rem);
  pointer-events: auto;
}

.hero-ui-topright {
  top: clamp(5.5rem, 9vw, 7rem);
}

.hero-ui-topleft {
  left: clamp(1.5rem, 2.5vw, 2.5rem);
  top: clamp(5rem, 8vw, 7rem);
}

.hero-ui-topleft .brand-wordmark-svg {
  height: 60px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  color: var(--bone);
  object-fit: contain;
  margin-left: -7px;
  /* Compensate for internal SVG left padding */
  transform: translateY(-3px);
  /* Perfectly center-align with the left globe icon */
}

.hero-ui-topright {
  right: clamp(1.5rem, 2.5vw, 2.5rem);
  text-align: right;
  max-width: 300px;
}

.hero-descriptor {
  display: block;
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.8;
}

.hero-about-copy {
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 1.3vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.5;
  margin-bottom: 0.85rem;
}

/* Mobile-only tagline shown at bottom of hero */
.hero-mobile-about {
  display: none;
}

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

.hero-view-more {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgundy);
  border-bottom: 1px solid var(--burgundy);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.hero-view-more:hover {
  color: var(--white);
  border-color: var(--white);
}

/* ── Bottom Bar ── */
.hero-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: transparent;
  pointer-events: auto;
}

.hero-bottom-left {
  flex: 1;
}

.hero-bottom-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.hero-bottom-right h6 {
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 1.1vw, 0.7rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--bone);
  text-transform: uppercase;
  margin: 0;
  opacity: 0.6;
}

.hero-contact {
  flex: 1;
  display: flex;
  color: var(--bone);
  justify-content: flex-end;
}

.hero-socials a {
  font-size: 0.58rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s ease;
}

.hero-socials a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease-out-expo);
}

.hero-socials a:hover {
  color: var(--white);
}

.hero-socials a:hover::after {
  width: 100%;
}

.hero-main-title {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  line-height: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
}

/* The homepage h1. Taken out of the visual layout without being hidden from
   assistive technology, which display:none or visibility:hidden would do.
   A 1px clipped box is the technique that keeps it announced and indexed. */
.hero-title-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero-studio-label {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(10px, 0.9vw, 14px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.55);
  text-align: center;
  margin: 2px 0 0;
}

.hero-main-title .studio {
  display: block;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 0.33em;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  margin-top: 0.38rem;
  color: rgba(255, 255, 255, 0.42);
}

.hero-contact a {
  font-size: 0.9rem;
  letter-spacing: 0.10em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.3s ease;
}

.hero-contact a:hover {
  color: var(--white);
}

.hero-contact-arrow {
  font-size: 0.48rem;
  color: var(--burgundy);
}

/* ── Hardware-Accelerated True Black & White Video Grid ── */
.hero-filter-grid {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  z-index: 1;
  /* Sits directly beneath the Canvas layout overlay */
  pointer-events: none;
}

.hero-filter-tile {
  position: relative;
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.1s linear;
}

/* When a tile is selected as black-and-white, it renders a grayscale filter over the video below it */
.hero-filter-tile.is-bw {
  backdrop-filter: grayscale(100%) contrast(115%);
  -webkit-backdrop-filter: grayscale(100%) contrast(115%);
  background-color: rgba(0, 0, 0, 0.05);
  /* Adds a subtle dark tint to match the site's design */
}

/* ── Freestyle Stacking & Overlapping Filter Grid Parameters ── */
.hero-filter-grid-freestyle {
  position: absolute;
  z-index: 1;
  /* Renders perfectly underneath the solid Canvas mask overlay */
  pointer-events: none;
  overflow: transparent;
}

.hero-freestyle-tile {
  position: absolute;
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: center center;
  /* Zoom pops outwards from individual tile center positions */
  transition: opacity 0.1s linear;
}

/* Grayscale desaturation filter applies flawlessly to underlying stacked videos */
.hero-freestyle-tile.is-bw {
  backdrop-filter: grayscale(100%) contrast(120%);
  -webkit-backdrop-filter: grayscale(100%) contrast(120%);
  background-color: rgba(0, 0, 0, 0.04);
}

/* Warm sepia tint — amber/film-print feel */
.hero-freestyle-tile.is-warm {
  backdrop-filter: sepia(45%) saturate(130%) contrast(110%);
  -webkit-backdrop-filter: sepia(45%) saturate(130%) contrast(110%);
  background-color: rgba(0, 0, 0, 0.03);
}

/* Cool desaturated — slight contrast pull, muted palette */
.hero-freestyle-tile.is-cool {
  backdrop-filter: saturate(70%) contrast(115%) brightness(0.95);
  -webkit-backdrop-filter: saturate(70%) contrast(115%) brightness(0.95);
  background-color: rgba(0, 0, 0, 0.05);
}

/* ── Legacy nulls (nothing breaks if old classes appear) ── */
.hero-bg,
.hero-overlay,
.hero-spotlight-overlay,
.hero-videos,
.hero-center,
.hero-copy,
.hero-tagline,
.hero-heading,
.hero-description,
.hero-cta,
.hero-project-list,
.hero-fragment-grid {
  /* reset */
}



/* (old hero styles merged into new block above) */

/* ---------- Section Divider ---------- */
.section-divider {
  width: 100%;
  height: 1px;
  background: rgba(11, 11, 11, 0.12);
  margin: 0;
}

/* ---------- Our Work Section ---------- */
.our-work {
  position: relative;
  padding: 6rem 2.5rem;
  background: #080909;
  color: var(--bone);
  overflow: hidden;
}

/* Grain overlay — matches archive page static texture */
.wc-grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: wc-grain-shift 0.14s steps(1) infinite;
}
@keyframes wc-grain-shift {
  0%   { transform: translate(0,0); }
  12%  { transform: translate(-2%,-3%); }
  25%  { transform: translate(3%,1%); }
  37%  { transform: translate(-1%,2%); }
  50%  { transform: translate(2%,-2%); }
  62%  { transform: translate(-3%,1%); }
  75%  { transform: translate(1%,3%); }
  87%  { transform: translate(3%,-1%); }
  100% { transform: translate(-1%,-2%); }
}

/* ── Video Carousel ── */
.wc-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2.5rem 0 0;
  width: 100%;
}

.wc-btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: clamp(5rem, 8vw, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(238,219,193,0.45);
  padding: 1rem 0;
  transition: color 0.2s, transform 0.2s;
  align-self: stretch;
}
.wc-btn:hover { color: var(--bone); }
.wc-btn--prev:hover { transform: translateX(-3px); }
.wc-btn--next:hover { transform: translateX(3px); }

.wc-arrow-icon {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

.wc-btn-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.wc-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 72vh;
  overflow: hidden;
}

.wc-video {
  position: relative;
  transition: opacity 0.35s ease;
  overflow: hidden;
}
.wc-video.is-fading { opacity: 0; }
.wc-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

/* Meta bar below carousel */
.wc-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(238,219,193,0.1);
  margin-top: 2.5rem;
}

.wc-counter {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: rgba(238,219,193,0.4);
  transition: opacity 0.25s;
}

.wc-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.wc-name {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bone);
  transition: opacity 0.25s;
}

.wc-sep {
  color: rgba(238,219,193,0.25);
  font-size: 0.8rem;
}

.wc-cat {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.4);
  transition: opacity 0.25s;
}

.wc-archive-link {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--burgundy);
  text-decoration: none;
  transition: opacity 0.2s;
}
.wc-archive-link:hover { opacity: 0.6; }

.wc-meta-fading .wc-counter,
.wc-meta-fading .wc-name,
.wc-meta-fading .wc-cat { opacity: 0; }

/* Mobile carousel */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .wc-btn-label { display: none; }
  .wc-btn { width: 2.8rem; }
  .wc-stage { min-height: 40vh; }
  .wc-meta { flex-wrap: wrap; gap: 0.8rem; }
  .wc-info { order: -1; width: 100%; }
  .wc-name { font-size: 1.1rem; }
}

/* View all archive link */
.archive-view-all {
  padding: 3.5rem 0 1rem;
  border-top: 1px solid rgba(11,11,11,0.1);
  margin-top: 3rem;
}
.archive-view-all-link {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--black);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: opacity 0.2s;
}
.archive-view-all-link span { transition: transform 0.25s ease; display: inline-block; }
.archive-view-all-link:hover { opacity: 0.55; }
.archive-view-all-link:hover span { transform: translateX(5px); }

/* Archive page — no loader, page and header visible immediately */
body.no-loader #main-content { opacity: 1; visibility: visible; }
body.no-loader .header {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Work Grid — Editorial Masonry */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  row-gap: 3rem;
}

.work-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--black);
  cursor: none;
}

/* Aspect ratios */
.work-card.landscape {
  grid-column: span 7;
}

.work-card.portrait {
  grid-column: span 5;
}

.work-card.square {
  grid-column: span 5;
}

/* Alternating pattern */
.work-card:nth-child(odd).landscape {
  grid-column: 1 / span 7;
}

.work-card:nth-child(odd).portrait {
  grid-column: 8 / span 5;
}

.work-card:nth-child(even).landscape {
  grid-column: 6 / span 7;
}

.work-card:nth-child(even).portrait {
  grid-column: 1 / span 5;
}

.work-card .card-video {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.work-card.portrait .card-video {
  aspect-ratio: 9 / 16;
}

.work-card.landscape .card-video {
  aspect-ratio: 16 / 9;
}

.work-card.square .card-video {
  aspect-ratio: 4 / 5;
}

.work-card .card-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  transform: translate(-50%, -50%) scale(1);
  border: 0;
  pointer-events: none;
  transition: transform 0.8s var(--ease-out-expo);
}

.work-card:hover .card-video iframe {
  transform: translate(-50%, -50%) scale(1.05);
}

.work-card .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 11, 11, 0.75) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.work-card:hover .card-overlay {
  opacity: 1;
}

.work-card .card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  z-index: 2;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.5s var(--ease-out-expo);
}

.work-card:hover .card-info {
  transform: translateY(0);
  opacity: 1;
}

.work-card .card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.02em;
}

.work-card .card-category {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.35rem;
}

/* ---------- CTA / About Section ---------- */
.about-cta {
  padding: 8rem 2.5rem;
  background: var(--black);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.globe-axis-tilt {
  display: block;
  margin: 0 auto 2.5rem;
  width: 90px;
  transform: rotate(-34deg);
}

.about-cta .spinning-globe {
  width: 90px;
  height: auto;
  display: block;
  filter: invert(1);
  opacity: 0.8;
  animation: spin-globe 25s linear infinite;
}

@keyframes spin-globe {
  from {
    transform: rotate(0deg);
  }

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

.about-cta .cta-label {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--burgundy-light);
  margin-bottom: 2rem;
}

.about-cta .cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.3;
  max-width: 800px;
  margin: 0 auto;
  letter-spacing: -0.01em;
  text-transform: none;
}

.about-cta .cta-heading em {
  font-style: italic;
  color: var(--burgundy-light);
}

.about-cta .cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
  padding: 1rem 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  transition: all 0.4s var(--ease-out-expo);
}

.about-cta .cta-button:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.about-cta .cta-button .arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform 0.3s ease;
}

.about-cta .cta-button:hover .arrow {
  transform: translateX(4px);
}

/* ========================================
   WORLD BUILDING SECTION
   ======================================== */

.wb-section {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 580px;
  background: var(--black);
  color: var(--bone);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rem 0 10rem;
  /* The cards are deliberately allowed out of the box and the lowest one
     hangs about 64px below it, so the generous bottom padding above buys no
     actual separation — it sits inside a fixed height. Margin is what the
     next section can actually see. */
  margin-bottom: clamp(56px, 8vw, 110px);
}

/* Globe background video — transparent alpha, sits behind all cards */
.wb-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(380px, 58%, 720px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
  mix-blend-mode: screen;
}

/* Center text */
.wb-center {
  position: relative;
  z-index: 15;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
.wb-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.35);
  margin-bottom: 1rem;
}
.wb-headline {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.88;
  color: var(--bone);
  margin: 0 0 3.5rem;
  transition: color 0.3s ease;
}
.wb-sub {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: rgba(238,219,193,0.65);
  text-transform: uppercase;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}

.mob-br { display: none; }

/* Scattered cards */
.wb-card {
  position: absolute;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  cursor: none;
  transition: box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.wb-card img,
.wb-card iframe,
.wb-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
  pointer-events: none;
  border: none;
}
.wb-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
  z-index: 20 !important;
}

/* Card positions — 9:16 portrait, width only, height flows from aspect-ratio */
.wb-card--1 { width: clamp(160px,15vw,220px); top: -50px;    left: -25px;   z-index: 5; transform: perspective(800px) rotate(-11deg); }
.wb-card--2 { width: clamp(145px,14vw,200px); bottom: -55px; left: 55px;    z-index: 6; transform: perspective(800px) rotate(7deg); }
.wb-card--3 { width: clamp(155px,15vw,215px); top: -20px;    left: 18%;     z-index: 9; transform: perspective(800px) rotate(-5deg); }
.wb-card--4 { width: clamp(170px,16vw,240px); height: clamp(210px,20vw,290px); aspect-ratio: unset; bottom: -30px; left: 22%; z-index: 9; transform: perspective(800px) rotate(13deg); }
.wb-card--5 { width: clamp(150px,14vw,205px); top: -15px;    right: 17%;    z-index: 9; transform: perspective(800px) rotate(-8deg); }
.wb-card--6 { width: clamp(170px,16vw,240px); aspect-ratio: unset; bottom: -25px; right: 26%; z-index: 9; background: transparent !important; box-shadow: none; overflow: visible; transform: perspective(800px) rotate(4deg); }
.wb-card--6:hover { z-index: 9 !important; box-shadow: none; }
.wb-card--6 img { object-fit: contain; background: transparent !important; }
.wb-card--7 { width: clamp(160px,15vw,220px); top: -45px;    right: -15px;  z-index: 5; transform: perspective(800px) rotate(-14deg); }
.wb-card--8 { width: clamp(145px,14vw,200px); bottom: -50px; right: 50px;   z-index: 6; transform: perspective(800px) rotate(9deg); }

/* Decorative marks */
.wb-deco {
  position: absolute;
  pointer-events: none;
}
.wb-deco--1 {
  width: 100px;
  bottom: 12%;
  left: 18%;
  opacity: 0.06;
  transform: rotate(15deg);
  filter: invert(1);
}
.wb-deco--2 {
  width: 140px;
  top: 10%;
  right: 12%;
  opacity: 0.07;
  transform: rotate(-8deg);
  filter: invert(1);
}

/* Mobile */
/* Also catches a phone held sideways: it is ~852px wide, so a width-only
   query hands it the desktop layout and all nine videos on a 393px screen. */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .wb-section {
    height: auto;
    min-height: 520px;
    padding: 5rem 0 5rem;
    overflow: hidden;
  }

  .wb-headline { font-size: clamp(3rem, 14vw, 5rem); }
  .wb-sub { font-size: 0.6rem; letter-spacing: 0.08em; max-width: 220px; margin: 0.75rem auto 0; position: relative; z-index: 20; }

  /* Hide all cards by default */
  .wb-card { display: none !important; }

  /* Remove gray placeholder */
  .wb-card img,
  .wb-card iframe,
  .wb-card video { background: transparent; }

  /* Show only outer left pair */
  .wb-card--1 {
    display: block !important;
    width: 28vw;
    top: 50%;
    transform: translateY(-60%) rotate(-8deg);
    left: 2vw;
    z-index: 5;
  }
  .wb-card--2 {
    display: block !important;
    width: 26vw;
    top: 50%;
    transform: translateY(0%) rotate(6deg);
    left: 4vw;
    z-index: 4;
  }

  /* Show only outer right pair */
  .wb-card--7 {
    display: block !important;
    width: 28vw;
    top: 50%;
    transform: translateY(-60%) rotate(8deg);
    right: 2vw;
    left: auto;
    z-index: 5;
  }
  .wb-card--3 {
    display: block !important;
    width: 26vw;
    top: 50%;
    transform: translateY(0%) rotate(-6deg);
    right: 4vw;
    left: auto;
    z-index: 4;
  }

  /* No hover effects on touch */
  .wb-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    z-index: inherit;
  }

  .wb-bg-video {
    width: 72vw;
    max-width: 300px;
  }

  .wb-center {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 15;
    text-align: center;
  }
}

/* ========================================
   SOCIALS COLLAGE SECTION
   ======================================== */

.socials-collage {
  position: relative;
  width: 100%;
  height: 560px;
  background-color: var(--bone);
  overflow: hidden;
}

/* Center pill */
.socials-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: var(--black);
  border-radius: 999px;
  padding: 1.4rem 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  box-shadow: 0 4px 40px rgba(0,0,0,0.25);
}
.socials-pill-text {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
}
.socials-pill-handle {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(238,219,193,0.45);
  text-transform: uppercase;
}

/* Photo cards */
.socials-photo {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,0.22);
}
.socials-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #2a2a2a;
}

.socials-photo--1 {
  width: 200px; height: 260px;
  top: 30px; left: 2%;
  transform: rotate(-7deg);
  z-index: 4;
}
.socials-photo--2 {
  width: 220px; height: 180px;
  top: 180px; left: 8%;
  transform: rotate(5deg);
  z-index: 3;
}
.socials-photo--3 {
  width: 180px; height: 230px;
  top: 50px; left: 20%;
  transform: rotate(9deg);
  z-index: 5;
}
.socials-photo--4 {
  width: 190px; height: 240px;
  top: 260px; left: 28%;
  transform: rotate(-4deg);
  z-index: 4;
}
.socials-photo--5 {
  width: 210px; height: 200px;
  top: 60px; right: 20%;
  transform: rotate(-8deg);
  z-index: 5;
}
.socials-photo--6 {
  width: 200px; height: 250px;
  top: 230px; right: 8%;
  transform: rotate(6deg);
  z-index: 3;
}
.socials-photo--7 {
  width: 185px; height: 210px;
  top: 20px; right: 2%;
  transform: rotate(-11deg);
  z-index: 4;
}

/* Brand marks */
.socials-brand {
  position: absolute;
  pointer-events: none;
  opacity: 0.12;
}
.socials-brand--1 {
  width: 160px;
  bottom: 30px;
  left: 3%;
  transform: rotate(-6deg);
  filter: invert(1);
}
.socials-brand--2 {
  width: 80px;
  top: 20px;
  right: 14%;
  transform: rotate(12deg);
  opacity: 0.08;
}

/* Mobile */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .socials-collage { height: 420px; }
  .socials-photo--1 { width: 130px; height: 170px; left: 1%; top: 20px; }
  .socials-photo--2 { width: 140px; height: 115px; top: 160px; left: 5%; }
  .socials-photo--3 { width: 115px; height: 150px; top: 30px; left: 24%; }
  .socials-photo--4 { display: none; }
  .socials-photo--5 { width: 135px; height: 130px; top: 40px; right: 22%; }
  .socials-photo--6 { width: 130px; height: 160px; top: 200px; right: 5%; }
  .socials-photo--7 { width: 120px; height: 135px; top: 10px; right: 1%; }
  .socials-pill { padding: 1rem 2rem; }
  .socials-pill-text { font-size: clamp(1.2rem, 6vw, 1.8rem); }
}

/* ---------- Footer ---------- */
/* ── Scroll-reveal footer (fixed behind #main-content) ── */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-height);
  z-index: 0;
  background: var(--black);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: clamp(18px, 2.5vw, 36px) clamp(24px, 4vw, 56px);
  box-sizing: border-box;
  overflow: hidden;
}

.footer-wordmark-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(6px, 0.8vw, 12px);
  flex-shrink: 0;
}

.footer-logo-row {
  display: block;
  /* .footer-mark is inline-block, so without this the row's strut leaves ~9px
     of descender space under the wordmark that was not there before. */
  line-height: 0;
}

.footer-year-mob {
  display: none;
}

.footer-ig-mob {
  display: none;
}

.footer-wordmark {
  height: clamp(112px, 25vh, 280px);
  width: auto;
  display: block;

}

/* Shrink-wraps the letters so the globe canvas has something to sit against. */
.footer-mark {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

/* Placement only — the drawing lives in script.js under .iconik-globe, which
   has no opinion about size or surroundings. The wordmark art is 1920x1080
   and the globe it used to contain filled a 519x541 box centred on (792, 494);
   these percentages are that box, so the live globe lands exactly where the
   printed one did. Redraw the letters and only these five numbers change. */
.footer-globe {
  position: absolute;
  left: 41.25%;
  top: 45.74%;
  width: 27.03%;
  height: 50.09%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.footer-credit {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(8px, 0.6vw, 11px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
}

/* Where the studio works, said plainly on every page. Structured data alone
   will not rank a page for a city: the words have to be readable on the page
   for the machine to believe them. Set quieter than the credit above it so it
   reads as a footnote rather than a claim competing with the mark. */
.footer-areas {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(7px, 0.52vw, 9.5px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.62);
  line-height: 1.9;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 18px);
  margin-left: auto;
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 44px);
}

.footer-email {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(11px, 0.9vw, 16px);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--bone);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-email:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer-nav-link {
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(0.9rem, 1.3vw, 1.4rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-nav-link:hover,
.footer-nav-link.active {
  text-decoration: underline;
  text-decoration-color: var(--electric);
  text-underline-offset: 4px;
}

.footer-nav-link:nth-child(2):hover { text-decoration-color: var(--burgundy-light); }
.footer-nav-link:nth-child(3):hover { text-decoration-color: var(--mustard); }
.footer-nav-link:nth-child(4):hover { text-decoration-color: var(--burnt-orange); }

.footer-nav-year {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(11px, 0.85vw, 15px);
  letter-spacing: 0.2em;
  color: var(--bone);
}

/* ── @iconiksocialstudio page ticker (sits above fixed footer) ── */
a.page-ticker {
  display: block;
  text-decoration: none;
}

a.page-ticker:hover .page-ticker-track {
  animation-play-state: paused;
}

.page-ticker {
  overflow: hidden;
  border-top: 2px solid rgba(238, 219, 193, 0.35);
  border-bottom: 2px solid rgba(238, 219, 193, 0.35);
  padding: clamp(10px, 1vw, 14px) 0;
  background: var(--black);
  user-select: none;
}

.page-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: page-ticker-scroll 20s linear infinite;
}

.page-ticker-item {
  display: block;
  height: clamp(28px, 3.5vh, 45px);
  width: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
  margin-right: clamp(20px, 3vw, 40px);
}

@keyframes page-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  body {
    padding-bottom: 0;
  }
  .footer {
    position: static;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(20px, 5vw, 28px);
    padding: clamp(24px, 5vw, 40px) clamp(20px, 5vw, 32px);
  }
  .footer-right {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    gap: 8px;
    width: 100%;
  }
  .footer-wordmark-wrap {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 6px;
  }
  .footer-logo-row {
    width: 100%;
  }
  .footer-credit {
    font-size: clamp(7px, 2vw, 10px);
    text-align: center;
  }
  .footer-year-mob {
    text-align: center;
  }
  .footer-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .footer-nav-link {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }
  .footer-ig-desk {
    display: none;
  }
  .footer-nav-year {
    display: none;
  }
  .footer-email {
    order: 3;
    font-size: clamp(13px, 3.5vw, 18px);
  }
  .footer-nav {
    order: 1;
  }
  .footer-ig-mob {
    order: 2;
    display: block;
  }
  .footer-wordmark {
    height: clamp(80px, 18vh, 140px);
  }
  .footer-wordmark {
    width: 100%;
    height: auto;
  }
  .footer-mark {
    display: block;
    width: 100%;
  }
  .footer-year-mob {
    display: inline;
    font-family: 'DenimINK SemiBold', sans-serif;
    font-size: clamp(10px, 3vw, 14px);
    letter-spacing: 0.1em;
    color: rgba(238,219,193,0.6);
  }
}

/* ---------- Mobile Menu Overlay ---------- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(11,11,11,0.97);
  z-index: 9500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 10vw;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu .mobile-link {
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 9vw, 8rem);
  font-weight: 400;
  color: var(--bone);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.05;
  padding: 0.15em 0;
  transition: opacity 0.2s ease;
  display: block;
}

.mobile-menu .mobile-link:hover {
  opacity: 0.38;
}

.mobile-menu .close-menu {
  position: absolute;
  top: 1.75rem;
  right: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone);
  background: transparent;
  border: none;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.mobile-menu .close-menu:hover { opacity: 0.55; }

/* ---------- Scroll Reveal Utility ---------- */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 45% 55%;
  }

  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    row-gap: 2rem;
  }

  .work-card.landscape,
  .work-card.portrait,
  .work-card.square {
    grid-column: span 1;
  }

  .work-card:nth-child(odd).landscape,
  .work-card:nth-child(odd).portrait,
  .work-card:nth-child(even).landscape,
  .work-card:nth-child(even).portrait {
    grid-column: span 1;
  }
}

/* Mobile */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  body {
    cursor: auto;
  }

  .cursor {
    display: none;
  }

  .header {
    padding: 0.6rem 1.5rem;
  }

  .header nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
  }

  /* Header — always visible on mobile, no blend-mode */
  .header {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    mix-blend-mode: normal;
    color: var(--bone);
  }

  .header .logo-eye-frame,
  .header .logo-globe-core {
    filter: invert(1);
  }

  /* Hero — mobile */
  .hero {
    height: 100dvh;
  }

  .hero-ui {
    display: none !important;
  }

  /* Hide top-right about copy on mobile */
  .hero-ui-topright {
    display: none;
  }

  /* Move descriptor from top-left to bottom-center on mobile */
  .hero-ui-topleft {
    top: auto;
    left: 50%;
    bottom: 2.5rem;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    pointer-events: none;
  }

  .hero-ui-topleft .hero-descriptor {
    font-size: clamp(0.75rem, 3.2vw, 0.95rem);
    letter-spacing: 0.18em;
    color: var(--burgundy);
    text-align: center;
    line-height: 1.7;
  }

  /* Hide the entire bottom bar on mobile */
  .hero-bottom {
    display: none;
  }

  .hero-mobile-wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2.5vh, 16px);
    position: absolute;
    bottom: clamp(32px, 8vh, 56px);
    left: 0;
    right: 0;
    z-index: 7;
    pointer-events: none;
  }

  .hero-mobile-wordmark img {
    width: clamp(200px, 72vw, 320px);
    height: auto;
    object-fit: contain;
  }

  .hmw-tagline {
    font-family: var(--font-mono);
    font-size: clamp(8px, 2.4vw, 11px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(238, 219, 193, 0.5);
    text-align: center;
  }

  .hmw-categories {
    font-family: var(--font-mono);
    font-size: clamp(7px, 2.1vw, 10px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(238, 219, 193, 0.38);
    text-align: center;
  }

  /* Show tagline at bottom-center of hero on mobile */
  .hero-mobile-about {
    display: block;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    color: var(--bone);
    font-size: clamp(0.7rem, 3.5vw, 0.9rem);
    letter-spacing: 0.12em;
    line-height: 1.7;
    z-index: 7;
    pointer-events: none;
  }

  .our-work {
    padding: 4rem 1.5rem;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .work-card.landscape,
  .work-card.portrait,
  .work-card.square,
  .work-card:nth-child(odd).landscape,
  .work-card:nth-child(odd).portrait,
  .work-card:nth-child(even).landscape,
  .work-card:nth-child(even).portrait {
    grid-column: 1 / -1;
  }

  .work-card .card-overlay {
    opacity: 1;
  }

  .work-card .card-info {
    transform: translateY(0);
    opacity: 1;
  }

  .about-cta {
    padding: 5rem 1.5rem;
  }

}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bone);
}

::-webkit-scrollbar-thumb {
  background: rgba(11, 11, 11, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(11, 11, 11, 0.4);
}

/* ---------- Selection ---------- */
::selection {
  background: var(--burgundy);
  color: var(--white);
}

/* ========================================
   SYSTEM SECTION — The System Behind the Feeling
   ======================================== */

.system-section {
  position: relative;
  background: var(--bone);
  padding: 5rem 2.5rem 4.5rem;
  overflow: hidden;
}

.sys-mono {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Wireframe grid bg */
.sys-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 49px, rgba(11,11,11,0.05) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(11,11,11,0.05) 50px);
  pointer-events: none;
}

/* Corner markers */
.sys-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.sys-corner--tl { top: 1.2rem; left: 1.2rem; border-top: 1px solid rgba(11,11,11,0.45); border-left: 1px solid rgba(11,11,11,0.45); }
.sys-corner--tr { top: 1.2rem; right: 1.2rem; border-top: 1px solid rgba(11,11,11,0.45); border-right: 1px solid rgba(11,11,11,0.45); }
.sys-corner--bl { bottom: 1.2rem; left: 1.2rem; border-bottom: 1px solid rgba(11,11,11,0.45); border-left: 1px solid rgba(11,11,11,0.45); }
.sys-corner--br { bottom: 1.2rem; right: 1.2rem; border-bottom: 1px solid rgba(11,11,11,0.45); border-right: 1px solid rgba(11,11,11,0.45); }

/* Metadata bar */
.sys-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(11,11,11,0.15);
  margin-bottom: 3.5rem;
  color: rgba(11,11,11,0.4);
}

/* Two-column layout */
.sys-layout {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 4rem;
  align-items: start;
}

/* Left column */
.sys-left {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: sticky;
  top: 6rem;
}

.sys-eyebrow {
  color: var(--burgundy);
}

.sys-headline {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
}

.sys-intro {
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 1.1vw, 0.8rem);
  letter-spacing: 0.07em;
  line-height: 1.9;
  color: rgba(11,11,11,0.55);
  text-transform: uppercase;
}

.sys-status-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.sys-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #4D0000;
  border-radius: 50%;
  flex-shrink: 0;
  animation: sys-pulse 2.6s ease-in-out infinite;
}

@keyframes sys-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.65); }
}

.sys-status-text { color: #4D0000; }

.sys-coord-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: rgba(11,11,11,0.3);
}

/* Diagram container */
.sys-diagram-wrap { width: 100%; }

.sys-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 560;
}

.sys-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* SVG lines */
.sys-line {
  stroke: rgba(11,11,11,0.2);
  stroke-width: 0.8;
  fill: none;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, stroke-opacity 0.35s ease;
}

.sys-line--output {
  stroke: #4D0000;
  stroke-opacity: 0.45;
  stroke-width: 0.9;
  stroke-dasharray: 5 4;
}

.sys-line.is-active {
  stroke: var(--black);
  stroke-width: 1.4;
  stroke-opacity: 1;
}

.sys-line.is-dim {
  stroke-opacity: 0.06;
}

.sys-arrow-head {
  fill: none;
  stroke: #4D0000;
  stroke-opacity: 0.45;
  stroke-width: 0.9;
}

.sys-orbit {
  fill: none;
  stroke: rgba(11,11,11,0.45);
  stroke-width: 2.5;
  stroke-dasharray: 3 7;
  transform-box: fill-box;
  transform-origin: center;
  animation: sys-orbit-spin 22s linear infinite;
}

@keyframes sys-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Nodes */
.sys-node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid rgba(11,11,11,0.28);
  background: var(--bone);
  min-width: 108px;
  max-width: 148px;
  z-index: 2;
  cursor: default;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sys-node:hover {
  border-color: rgba(11,11,11,0.7);
  box-shadow: 2px 2px 0 rgba(11,11,11,0.08);
}

.sys-node-num {
  color: rgba(11,11,11,0.38);
  font-size: 0.5rem;
  letter-spacing: 0.13em;
  line-height: 1.2;
}

.sys-node-name {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.25;
  color: var(--black);
  text-transform: uppercase;
}

.sys-node-desc {
  font-family: var(--font-body);
  font-size: 0.54rem;
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: rgba(11,11,11,0.5);
  text-transform: uppercase;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.3s ease;
}

.sys-node--service:hover .sys-node-desc {
  max-height: 60px;
  opacity: 1;
  margin-top: 5px;
}

/* Center node */
.sys-node--center {
  border: 1.5px solid rgba(11,11,11,0.65);
  min-width: 118px;
}

.sys-node--center .sys-node-name {
  font-size: 0.78rem;
}

.sys-node--center .sys-node-num {
  color: rgba(11,11,11,0.45);
}

/* Output node */
.sys-node--output {
  border: 1px solid #4D0000;
  border-width: 1.5px;
}

.sys-node--output .sys-node-num {
  color: #4D0000;
}

.sys-node--output .sys-node-name {
  color: #4D0000;
  font-size: 0.76rem;
}

.sys-node--output .sys-node-desc {
  max-height: 50px;
  opacity: 0.55;
  margin-top: 4px;
}

/* Floating micro labels */
.sys-float {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  color: rgba(11,11,11,0.25);
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  pointer-events: none;
  white-space: nowrap;
}

.sys-float--active {
  color: #4D0000;
  opacity: 0.55;
}

/* Closing strip */
.sys-closing {
  display: flex;
  gap: 2.5rem;
  align-items: baseline;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(11,11,11,0.15);
}

.sys-closing-line {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
}

.sys-closing-line--accent { color: #4D0000; }

/* Mobile flow (hidden on desktop) */
.sys-mobile-flow { display: none; }

/* ── Responsive ─────────────────────────── */
@media (max-width: 1024px) {
  .sys-layout {
    grid-template-columns: 38% 1fr;
    gap: 2.5rem;
  }
  .sys-left { position: static; }
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .system-section { padding: 3.5rem 1.5rem 3rem; }

  .sys-meta-bar { margin-bottom: 2rem; }
  .sys-meta-center { display: none; }

  .sys-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .sys-left { position: static; }
  .sys-headline { font-size: clamp(2.6rem, 11vw, 3.8rem); }

  .sys-diagram-wrap { display: none; }

  .sys-mobile-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .sys-mobile-services {
    border: 1px solid rgba(11,11,11,0.22);
  }

  .sys-mobile-node {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(11,11,11,0.1);
  }

  .sys-mobile-node:last-child { border-bottom: none; }

  .sys-mobile-node span:first-child {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.13em;
    color: rgba(11,11,11,0.4);
    text-transform: uppercase;
  }

  .sys-mobile-node span:last-child {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--black);
  }

  .sys-mobile-arrow {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(11,11,11,0.3);
    padding: 0.65rem 0;
    letter-spacing: 0.1em;
  }

  .sys-mobile-center,
  .sys-mobile-output {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 15px;
  }

  .sys-mobile-center {
    border: 1.5px solid rgba(11,11,11,0.6);
  }

  .sys-mobile-output {
    border: 1.5px solid #4D0000;
  }

  .sys-mobile-center span:first-child,
  .sys-mobile-output span:first-child {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.13em;
    color: rgba(11,11,11,0.4);
    text-transform: uppercase;
  }

  .sys-mobile-output span:first-child { color: #4D0000; }

  .sys-mobile-center span:last-child {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--black);
  }

  .sys-mobile-output span:last-child {
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4D0000;
  }

  .sys-closing {
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin-top: 3rem;
  }

  .sys-closing-line { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

/* ========================================
   FEATURED VIDEO SECTION
   ======================================== */

.feat-video-section {
    background: var(--black);
    width: 100%;
    padding: 2.5rem 0 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The clip's background is #000 while the page is #0A0A0A, so its rectangle
   shows as a slightly darker block against the section. Screen blending makes
   black resolve to whatever is behind it, so the edges disappear into the page
   instead of being matched by hand and drifting the next time either colour
   changes. Same technique the globe in World Building already uses. */
.tv-overlay-video {
    width: 88%;
    max-width: 1100px;
    height: auto;
    display: block;
    mix-blend-mode: screen;
}

/* Blending can only hide the clip's black once there is a frame to blend. In
   the gap between the box being laid out and the first frame decoding, the
   element paints as a plain black rectangle, and on a cold cache that gap is
   long enough to see. Held back until a frame exists; .is-ready is set from
   the video's own loadeddata. */
.tv-overlay-video,
.feat-mobile-video {
    opacity: 0;
    transition: opacity 0.45s ease;
}

.tv-overlay-video.is-ready,
.feat-mobile-video.is-ready {
    opacity: 1;
}

.feat-mobile-wrap {
    display: none;
}

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

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .tv-overlay-video {
        display: none;
    }
    .feat-mobile-wrap {
        display: block;
        position: relative;
        width: 100%;
        background: transparent;
    }
    .feat-mobile-video {
        display: block;
        width: 100%;
        height: auto;
        mix-blend-mode: screen;   /* same reason as .tv-overlay-video */
    }
    .feat-mobile-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: transparent;
    }
    .feat-video-section {
        padding: 3rem 0 3rem;
        overflow: hidden;
    }
}

.feat-video-wrap {
    position: relative;
    width: 85%;
    margin: 0 auto;
    padding-top: calc(56.25% * 0.85);
    overflow: hidden;
}

.feat-video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.feat-video-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: default;
}

/* ── Vintage TV (SVG frame overlay) ── */

/* Container matches real photo aspect ratio: 933/1400 = 0.6664 */
.vintage-tv {
    position: relative;
    width: 82%;
    max-width: 960px;
    margin: 0 auto;
    padding-top: calc(82% * 0.6664);
}

/* Real photo frame — transparent background + screen hole (processed PNG) */
.tv-frame-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 10;
    filter: drop-shadow(0 14px 36px rgba(0,0,0,0.85));
}

/* Screen slot — measured from actual photo pixels:
   left=24.7%, top=18.4%, width=52.9%, height=65.4% of image */
.tv-screen-slot {
    position: absolute;
    left: 24.7%;
    top: 18.4%;
    width: 52.9%;
    height: 65.4%;
    overflow: hidden;
    border-radius: 4%;
    background: #000;
}

/* Override standalone feat-video-wrap sizing inside TV */
.vintage-tv .feat-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding-top: 0;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

/* Scale 16:9 video to fill the 1.22:1 CRT screen — fill height, crop sides */
.vintage-tv .feat-video-wrap iframe {
    position: absolute;
    top: 0;
    height: 100%;
    width: 146%;
    left: -23%;
    border: 0;
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .vintage-tv {
        width: 96%;
        padding-top: calc(96% * 0.6664);
    }
}

/* ── VHS Overlay ── */
.vhs-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

/* Scanlines */
.vhs-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.1) 3px,
        rgba(0, 0, 0, 0.1) 4px
    );
}

/* Film grain */
.vhs-overlay::after {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: vhs-grain 0.12s steps(1) infinite;
}

@keyframes vhs-grain {
    0%   { transform: translate(0,    0);  }
    20%  { transform: translate(-3%, -2%); }
    40%  { transform: translate(2%,   3%); }
    60%  { transform: translate(-2%,  1%); }
    80%  { transform: translate(3%,  -1%); }
    100% { transform: translate(-1%,  2%); }
}

/* Tracking sweep line */
.vhs-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.04) 60%,
        transparent
    );
    animation: vhs-track-sweep 7s linear infinite;
}

@keyframes vhs-track-sweep {
    from { transform: translateY(-80px); }
    to   { transform: translateY(1500px); }
}

/* ========================================
   ECO RECOGNITION SECTION — black bg, 3D animated wireframe globe
   ======================================== */

.eco-section {
  position: relative;
  background: var(--black);
  /* The bottom was 2rem, which left the ring hint almost touching the next
     section's heading. The orbit needs room to read as a whole object. */
  padding: 5rem 4rem clamp(72px, 8vw, 130px) 4rem;
  overflow: hidden;
  color: var(--bone);
}

/* Same type as .svc-label so the two section headings read as one system.
   Its own class rather than that one because the space below it belongs to
   this section's rhythm. The max-width matches .eco-body so the label starts
   on the same line as the content under it. */
.eco-label {
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
  max-width: 1400px;
  /* Close to the orbit on purpose. The label sits far left while the globe is
     centred, so any vertical gap on top of that horizontal distance leaves it
     floating unattached to the thing it names. */
  margin: 0 auto clamp(2px, 0.6vw, 10px);
}

/* Quiet enough to be an aside rather than a caption. It has a job to do once
   and then wants to disappear. */
.eco-hint {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.34);
  transition: opacity 0.5s ease;
}

/* On a mouse, one hover teaches the whole set and the hint can go. On touch
   it stays: a tap only ever reveals the ring that was tapped, so the
   invitation still applies to the other three. */
@media (hover: hover) {
  .eco-section.has-explored .eco-hint {
    opacity: 0;
    pointer-events: none;
  }
}

.eco-hint-touch { display: none; }

@media (hover: none) {
  .eco-hint-pointer { display: none; }
  .eco-hint-touch   { display: inline; }
}

.eco-mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.32);
}

.eco-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.eco-corner--tl { top: 1.5rem; left: 1.5rem; border-top: 1px solid rgba(238,219,193,0.18); border-left: 1px solid rgba(238,219,193,0.18); }
.eco-corner--tr { top: 1.5rem; right: 1.5rem; border-top: 1px solid rgba(238,219,193,0.18); border-right: 1px solid rgba(238,219,193,0.18); }
.eco-corner--bl { bottom: 1.5rem; left: 1.5rem; border-bottom: 1px solid rgba(238,219,193,0.18); border-left: 1px solid rgba(238,219,193,0.18); }
.eco-corner--br { bottom: 1.5rem; right: 1.5rem; border-bottom: 1px solid rgba(238,219,193,0.18); border-right: 1px solid rgba(238,219,193,0.18); }

.eco-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(238,219,193,0.09);
}

.eco-header {
  margin-bottom: 3.5rem;
  max-width: 640px;
}

.eco-eyebrow { margin-bottom: 0.8rem; }

.eco-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin-bottom: 1.2rem;
}

.eco-intro {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: rgba(238,219,193,0.45);
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: none;
}

/* ── Body: services left | globe right ── */
.eco-body {
  display: grid;
  grid-template-columns: 0.5fr 1.2fr 0.5fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 4rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.eco-services-right {
  text-align: left;
}

.eco-diagram-wrap {
  width: 100%;
  position: relative;
}

/* ── Ring video overlays ── */
.eco-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* was image-rendering: pixelated, which held the half-size render at
     hard edges. The canvas now draws at the screen's real density,
     so it wants normal smoothing. */
}

/* ── Service list ── */
.eco-services {
  display: flex;
  flex-direction: column;
}

.eco-service-item {
  padding: 1rem 0;
  cursor: none;
}

.eco-service-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* ── Inline service dropdown ── */
.eco-service-drop {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.38s ease, opacity 0.28s ease;
}
.eco-service-item:hover .eco-service-drop,
.eco-service-item.is-active .eco-service-drop {
  max-height: 200px;
  opacity: 1;
}

.eco-drop-list {
  list-style: none;
  padding: 0.6rem 0 0.2rem 2.8rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.eco-drop-list li {
  position: relative;
  padding-left: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--type-list);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.45);
  transition: color 0.2s;
}
.eco-drop-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--burgundy-light);
}
.eco-service-item:hover .eco-drop-list li,
.eco-service-item.is-active .eco-drop-list li { color: rgba(238,219,193,0.72); }


.eco-service-mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.42rem;
  transition: transform 0.28s ease;
}
.eco-service-item[data-ring="0"] .eco-service-mark { background: rgb(74, 14, 27); }
.eco-service-item[data-ring="1"] .eco-service-mark { background: rgb(24, 0, 173); }
.eco-service-item[data-ring="2"] .eco-service-mark { background: var(--burnt-orange); }
.eco-service-item[data-ring="3"] .eco-service-mark { background: var(--mustard); }
.eco-service-item:hover .eco-service-mark { transform: scale(1.5); }

.eco-service-body { flex: 1; }

.eco-service-name {
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 0.4rem;
  transition: color 0.22s;
}
.eco-service-item[data-ring="0"]:hover .eco-service-name,
.eco-service-item[data-ring="0"].is-active .eco-service-name { color: rgb(74, 14, 27); }
.eco-service-item[data-ring="1"]:hover .eco-service-name,
.eco-service-item[data-ring="1"].is-active .eco-service-name { color: rgb(24, 0, 173); }
.eco-service-item[data-ring="2"]:hover .eco-service-name,
.eco-service-item[data-ring="2"].is-active .eco-service-name { color: var(--burnt-orange); }
.eco-service-item[data-ring="3"]:hover .eco-service-name,
.eco-service-item[data-ring="3"].is-active .eco-service-name { color: var(--mustard); }

.eco-service-desc {
  font-family: 'DenimINK SemiBold', sans-serif;
  font-size: clamp(0.6rem, 0.85vw, 0.78rem);
  letter-spacing: 0.14em;
  color: rgba(238,219,193,0.45);
  line-height: 1.5;
  transition: color 0.22s;
  text-transform: uppercase;
}
.eco-service-item:hover .eco-service-desc,
.eco-service-item.is-active .eco-service-desc { color: rgba(238,219,193,0.65); }

#eco-detail-service { display: none; }

.eco-detail-num {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  color: rgba(238,219,193,0.45);
  display: block;
  margin-bottom: 0.4rem;
}

.eco-detail-name {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin-bottom: 0.6rem;
}

.eco-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.eco-detail-list li {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.32);
  padding-left: 0.9rem;
  position: relative;
}
.eco-detail-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--burgundy-light);
}

/* ── Closing lines ── */
.eco-closing {
  display: flex;
  gap: 1.2rem 3rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.eco-closing-line {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(238,219,193,0.1);
}
.eco-closing-line--accent { color: var(--burgundy-light); }

/* ── Mobile (canvas hidden, grid shown) ── */
.eco-mobile-services { display: none; }
.eco-mobile-detail   { display: none; }

/* ─── ECO RESPONSIVE ─── */
@media (max-width: 960px) {
  .eco-body { grid-template-columns: 0.5fr 1.2fr 0.5fr; gap: 2rem; }
}

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .eco-section { padding: 3.5rem 1.25rem clamp(56px, 14vw, 90px); }

  .eco-meta-bar { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .eco-meta-center { display: none; }

  .eco-body { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .eco-services { display: none; }
  .eco-services-right { display: none; }

  .eco-diagram-wrap { margin-bottom: 0; max-width: 360px; margin-left: auto; margin-right: auto; }
  .eco-canvas { aspect-ratio: 1 / 1; max-height: none; }

  .eco-mobile-services { display: none !important; }
  .eco-mobile-detail   { display: none; }

  .eco-mobile-service {
    background: var(--black);
    padding: 1.4rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .eco-mobile-service-num {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: rgba(238,219,193,0.25);
  }

  .eco-mobile-service-name {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bone);
  }

  .eco-mobile-service-desc {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: rgba(238,219,193,0.38);
    line-height: 1.4;
    text-transform: none;
  }

  .eco-mobile-service { cursor: pointer; transition: background 0.15s; }
  .eco-mobile-service.is-active { background: rgba(238,219,193,0.05); }
  .eco-mobile-service.is-active .eco-mobile-service-name { color: var(--bone); opacity: 1; }

  .eco-mobile-inline-drop {
    background: rgba(238,219,193,0.03);
    border-bottom: 1px solid rgba(238,219,193,0.09);
    padding: 1rem 1.2rem 1.2rem;
  }
  .eco-mobile-drop-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .eco-mobile-drop-list li {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(238,219,193,0.55);
    padding-left: 1.1rem;
    position: relative;
  }
  .eco-mobile-drop-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--burgundy-light);
  }

  .eco-mobile-detail {
    display: none;
    padding: 1.75rem 1.2rem 2rem;
    border: 1px solid rgba(238,219,193,0.12);
    margin-bottom: 2.5rem;
  }
  .eco-mobile-detail.is-visible { display: block; }

  .eco-mobile-detail-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(238,219,193,0.4);
    margin-bottom: 0.6rem;
  }

  .eco-mobile-detail-name {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.9;
    color: var(--bone);
    margin: 0 0 1rem;
  }

  .eco-mobile-detail-desc {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(238,219,193,0.48);
    margin: 0 0 1.2rem;
  }

  .eco-mobile-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .eco-mobile-detail-list li {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(238,219,193,0.45);
    padding-left: 1.1rem;
    position: relative;
  }

  .eco-mobile-detail-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--burgundy-light);
  }

  .eco-closing { gap: 0.6rem 2rem; margin-top: 1rem; }
  .eco-closing-line { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

/* ── Canvas tap popup (mobile only) ── */

.eco-tap-popup {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 1.25rem;
  border-top: 1px solid transparent;
  transition: max-height 0.45s ease, opacity 0.3s ease, padding 0.45s ease;
  pointer-events: none;
}
.eco-tap-popup.is-visible {
  max-height: 500px;
  opacity: 1;
  padding: 1.5rem 0 1.75rem;
  pointer-events: auto;
}
.eco-tap-popup-num {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: rgba(238,219,193,0.35);
  margin-bottom: 0.4rem;
}
.eco-tap-popup-name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--bone);
  margin: 0 0 0.8rem;
}
.eco-tap-popup-desc {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(238,219,193,0.5);
  margin: 0 0 1rem;
}
.eco-tap-popup-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.eco-tap-popup-list li {
  font-family: var(--font-mono);
  font-size: var(--type-list);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.5);
  padding-left: 1rem;
  position: relative;
}
.eco-tap-popup-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--burgundy-light);
}

/* ── Orbital ring tab bar (mobile only) ── */
.eco-tab-bar {
  display: none;
}

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .eco-tab-bar {
    display: flex;
    width: 100%;
    border-top: 1px solid rgba(238,219,193,0.1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .eco-tab-bar::-webkit-scrollbar { display: none; }
  .eco-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(238,219,193,0.35);
    background: none;
    border: none;
    border-right: 1px solid rgba(238,219,193,0.08);
    padding: 0.75rem 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .eco-tab:last-child { border-right: none; }
  .eco-tab.is-active {
    color: var(--black);
    background: var(--bone);
  }

  .eco-carousel-track {
    display: flex;
    width: 100%;
    transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
  }
  .eco-carousel-track.is-dragging {
    transition: none;
  }
  .eco-carousel-slide {
    flex: 0 0 100%;
    padding: 0 1.25rem;
  }
}

/* ========================================
   STUDIO SECTION — brutalist editorial broadsheet
   ======================================== */

.stu-section {
  position: relative;
  background: var(--black);
  color: var(--bone);
  padding: clamp(5rem, 8vw, 9rem) 0 clamp(5rem, 8vw, 9rem);
  overflow: hidden;
}

/* ── Full-bleed poster container ── */
.stu-poster {
  padding: 0 3vw;
  overflow: visible;
}

/* ── Each broadsheet row: justified — first flush left, last flush right, gaps distribute ── */
.stu-pr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 0.05em;
}

/* ── Large display type ── */
.stu-big {
  font-family: var(--font-heading);
  font-size: 7vw;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.88;
  color: var(--bone);
  white-space: nowrap;
  flex-shrink: 0;
}

/* .stu-pr--wide base size — JS fitter will override per-row to fill container */
.stu-pr--wide .stu-big { font-size: 6.3vw; }

/* Paragraph break — extra top margin opens space between paragraphs */
.stu-pr--para { margin-top: clamp(2rem, 4vw, 5rem); }

/* Second paragraph — Boldino */
.stu-big--p2 {
  font-family: 'Boldino', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

/* P2 glitch state — chromatic split during animation */
.stu-big--p2.is-glitching {
  text-shadow: 5px 0 rgba(255, 0, 60, 0.55), -5px 0 rgba(0, 220, 255, 0.55);
}

/* P1 tail glitch — only the key words */
.stu-gw {
  display: inline;
}
.stu-gw.is-glitching {
  text-shadow: 5px 0 rgba(255, 0, 60, 0.45), -5px 0 rgba(0, 220, 255, 0.45);
}

/* ── VHS overlay ── */
.stu-vhs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

/* Horizontal scan lines */
.stu-vhs-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.10) 4px
  );
}

/* Animated grain — same pattern as hero-grain */
.stu-vhs-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: stu-grain-shift 0.14s steps(1) infinite;
}

@keyframes stu-grain-shift {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-2%, -3%); }
  25%  { transform: translate(3%, 1%); }
  37%  { transform: translate(-1%, 2%); }
  50%  { transform: translate(2%, -2%); }
  62%  { transform: translate(-3%, 1%); }
  75%  { transform: translate(1%, 3%); }
  87%  { transform: translate(-2%, -1%); }
}

/* VHS tracking bar — slowly rolls from top to bottom */
.stu-vhs-track {
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.06) 50%,
    transparent
  );
  filter: blur(1px);
  animation: stu-vhs-roll 9s linear infinite;
}

@keyframes stu-vhs-roll {
  0%   { top: -2%; }
  100% { top: 102%; }
}


/* ── Small mono annotation ── */
.stu-anno {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.52;
  color: rgba(0,0,0,0.42);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 0.5rem;
  align-self: center;
}

/* ── Small video box (replaces inline annotations) ── */
.stu-video-box {
  flex-shrink: 0;
  width: 5vw;
  min-width: 44px;
  max-width: 72px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  position: relative;
  align-self: flex-end;
}
.stu-video-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* ── Inline globe image ── */
.stu-globe {
  width: 5vw;
  min-width: 2.4rem;
  height: auto;
  flex-shrink: 0;
  margin: 0 1.2rem 0.12em;
  display: block;
}

@media (max-width: 900px) {
  /* Tablet: desktop font (7vw) still fits at this width — only tighten annotations */
  .stu-anno { font-size: 0.5rem; padding: 0 0.5rem; }
}

@media (max-width: 600px) {
  /* Mobile: reduce side padding so text fills the screen, scale fonts to prevent clipping */
  .stu-poster { padding: 0 4vw; }
  .stu-big { font-size: 8vw; }
  .stu-pr--wide .stu-big { font-size: 7.5vw; }
  .stu-anno { font-size: 0.44rem; padding: 0 0.3rem; line-height: 1.4; }
  .stu-video-box { width: 9vw; min-width: 36px; }
}

/* ========================================
   ORBITAL SYSTEM SECTION — dark, orbital layout
   ======================================== */

.orbital-section {
  position: relative;
  background: var(--black);
  padding: 5rem 2.5rem 4.5rem;
  overflow: visible;
  color: var(--bone);
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .orbital-section {
    overflow-x: hidden;
    overflow-y: visible;
  }
}

.orb-mono {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.4);
}

.orb-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 49px, rgba(238,219,193,0.04) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(238,219,193,0.04) 50px);
  pointer-events: none;
}

.orb-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.orb-corner--tl { top: 1.2rem; left: 1.2rem; border-top: 1px solid rgba(238,219,193,0.25); border-left: 1px solid rgba(238,219,193,0.25); }
.orb-corner--tr { top: 1.2rem; right: 1.2rem; border-top: 1px solid rgba(238,219,193,0.25); border-right: 1px solid rgba(238,219,193,0.25); }
.orb-corner--bl { bottom: 1.2rem; left: 1.2rem; border-bottom: 1px solid rgba(238,219,193,0.25); border-left: 1px solid rgba(238,219,193,0.25); }
.orb-corner--br { bottom: 1.2rem; right: 1.2rem; border-bottom: 1px solid rgba(238,219,193,0.25); border-right: 1px solid rgba(238,219,193,0.25); }

.orb-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(238,219,193,0.1);
  margin-bottom: 3.5rem;
}

.orb-layout {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 4rem;
  align-items: start;
}

.orb-left {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: sticky;
  top: 6rem;
}

.orb-eyebrow { color: #4D0000; opacity: 0.85; }

.orb-headline {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
}

.orb-intro {
  font-family: var(--font-body);
  font-size: clamp(0.65rem, 1.1vw, 0.8rem);
  letter-spacing: 0.07em;
  line-height: 1.9;
  color: rgba(238,219,193,0.5);
  text-transform: uppercase;
}

.orb-status-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.orb-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #4D0000;
  border-radius: 50%;
  flex-shrink: 0;
  animation: orb-dot-pulse 2.6s ease-in-out infinite;
}

@keyframes orb-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.65); }
}

.orb-status-text { color: #4D0000; }

.orb-coord-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: rgba(238,219,193,0.22);
}

/* Diagram */
.orb-diagram-wrap { width: 100%; }

.orb-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 580;
}

.orb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Orbital rings */
.orb-ring {
  fill: none;
  stroke: rgba(77,0,0,0.55);
  stroke-width: 4;
}

.orb-ring--inner {
  stroke-dasharray: 4 6;
  animation: orb-inner-breathe 3.5s ease-in-out infinite;
}

@keyframes orb-inner-breathe {
  0%, 100% { stroke-opacity: 0.55; }
  50%       { stroke-opacity: 0.12; }
}

.orb-ring--outer {
  stroke-dasharray: 2 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: orb-outer-spin 30s linear infinite;
}

@keyframes orb-outer-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Curved paths */
.orb-path {
  fill: none;
  stroke: rgba(238,219,193,0.16);
  stroke-width: 0.8;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, stroke-opacity 0.35s ease;
}

.orb-path.is-active {
  stroke: rgba(238,219,193,0.72);
  stroke-width: 1.3;
}

.orb-path.is-dim {
  stroke-opacity: 0.04;
}

/* Nodes shared base */
.orb-node {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: none;
}

/* Center node: circular */
.orb-node--center {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid #4D0000;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  gap: 5px;
}

.orb-node--center::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(77,0,0,0.7);
  animation: orb-center-ring 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes orb-center-ring {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.2; transform: scale(1.07); }
}

.orb-node-sublabel {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: #4D0000;
  line-height: 1;
}

.orb-node--center .orb-node-title {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.25;
}

.orb-node-subdesc {
  font-family: var(--font-body);
  font-size: 0.54rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.38);
  line-height: 1.5;
}

/* Service nodes */
.orb-node--service {
  background: var(--black);
  border: 1px solid rgba(238,219,193,0.18);
  padding: 10px 13px;
  min-width: 132px;
  max-width: 162px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.3s ease;
}

.orb-node--service:hover {
  border-color: rgba(238,219,193,0.5);
}

.orb-node-num {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: rgba(238,219,193,0.32);
  line-height: 1.2;
}

.orb-node--service .orb-node-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.25;
}

.orb-node-descriptor {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: rgba(238,219,193,0.42);
  text-transform: uppercase;
}

.orb-node-items {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-top 0.3s ease;
}

.orb-node--service:hover .orb-node-items {
  max-height: 130px;
  opacity: 1;
  margin-top: 6px;
}

.orb-node-items li {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(238,219,193,0.45);
  line-height: 1.85;
  padding-left: 10px;
  position: relative;
}

.orb-node-items li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #4D0000;
  font-size: 0.44rem;
}

/* Float labels */
.orb-float {
  position: absolute;
  left: var(--ofx);
  top: var(--ofy);
  color: rgba(238,219,193,0.18);
  font-size: 0.47rem;
  letter-spacing: 0.16em;
  pointer-events: none;
  white-space: nowrap;
}

.orb-float--accent { color: #4D0000; opacity: 0.6; }

/* Closing */
.orb-closing {
  display: flex;
  gap: 2.5rem;
  align-items: baseline;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(238,219,193,0.1);
}

.orb-closing-line {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
}

.orb-closing-line--accent { color: #4D0000; }

/* SVG labels: hidden on desktop (HTML nodes handle it), shown on mobile */
.orb-svg-labels { display: none; }

.orb-svg-num {
  font-family: var(--font-mono);
  font-size: 20px;
  fill: rgba(238,219,193,0.38);
  letter-spacing: 0.1em;
}

.orb-svg-name {
  font-family: var(--font-body);
  font-size: 32px;
  fill: rgba(238,219,193,0.9);
  letter-spacing: 0.06em;
}

/* Mobile: hidden on desktop */
.orb-mobile { display: none; }

/* Responsive */
@media (max-width: 1024px) {
  .orb-layout { grid-template-columns: 38% 1fr; gap: 2.5rem; }
  .orb-left { position: static; }
}

@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
  .orbital-section { padding: 5rem 1.5rem 2rem; overflow: visible; }
  .orb-meta-bar { margin-bottom: 2rem; }
  .orb-meta-center { display: none; }
  .orb-layout { grid-template-columns: 1fr; gap: 2rem; }
  .orb-left { position: static; }
  .orb-headline { font-size: clamp(2.6rem, 11vw, 3.8rem); }

  /* Show the live SVG diagram instead of static list */
  .orb-diagram-wrap { display: block; }
  .orb-svg-labels   { display: block; }

  /* Hide HTML overlay nodes — too large at mobile scale */
  .orb-node { display: none !important; }

  .orb-mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    margin-top: 0.5rem;
  }

  .orb-mobile-recognition {
    width: 158px;
    height: 158px;
    border-radius: 50%;
    border: 1px solid #4D0000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    gap: 5px;
    margin: 0 auto;
  }

  .orb-mobile-recognition .orb-mono {
    font-size: 0.46rem;
    color: #4D0000;
  }

  .orb-mobile-recog-title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bone);
    line-height: 1.2;
  }

  .orb-mobile-recog-desc {
    font-family: var(--font-body);
    font-size: 0.48rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(238,219,193,0.38);
    line-height: 1.5;
  }

  .orb-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(238,219,193,0.08);
    border: 1px solid rgba(238,219,193,0.08);
  }

  .orb-mobile-node {
    background: var(--black);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .orb-mobile-node .orb-mono {
    font-size: 0.48rem;
    color: rgba(238,219,193,0.32);
  }

  .orb-mobile-node p {
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
    line-height: 1.4;
  }

  .orb-mobile-node ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .orb-mobile-node ul li {
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(238,219,193,0.38);
    line-height: 1.85;
    padding-left: 9px;
    position: relative;
  }

  .orb-mobile-node ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #4D0000;
    font-size: 0.42rem;
  }

  .orb-closing {
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin-top: 3rem;
  }

  .orb-closing-line { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

/* ---------- Lenis Smooth Scroll ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overflow: clip;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Deactivate iframe mouse events during scroll to protect FPS */
html.lenis-scrolling iframe {
  pointer-events: none !important;
}

/* Perspective context for 3D card tilt transformations */
.work-grid {
  perspective: 1200px;
}

.work-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s ease-out;
  /* subtle micro-damping for rotation */
}

/* ========================================
   CULTURE INDEX SECTION
   ======================================== */

.ci-section {
  background: var(--bone);
  color: var(--black);
  padding: clamp(80px, 10vw, 140px) clamp(32px, 8vw, 120px) clamp(64px, 8vw, 100px);
}

.ci-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(48px, 8vw, 120px);
  margin-bottom: clamp(64px, 10vh, 120px);
  align-items: stretch;
}

.ci-left {
  display: flex;
  flex-direction: column;
}

.ci-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.8vw, 5.8rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: clamp(24px, 4vh, 40px);
}

.ci-category {
  cursor: default;
}

.ci-divider-line {
  width: 100%;
  height: 1px;
  background: rgba(11, 11, 11, 0.12);
  transition: background 0.35s ease;
}

.ci-category:hover .ci-divider-line {
  background: rgba(11, 11, 11, 0.35);
}

.ci-cat-inner {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vh, 32px) 0;
  align-items: start;
}

.ci-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(11, 11, 11, 0.3);
  padding-top: 6px;
  transition: color 0.35s ease;
}

.ci-category:hover .ci-num {
  color: rgba(77, 0, 0, 0.5);
}

.ci-cat-name {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 4.8rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.3em;
  transition: color 0.35s ease;
}

.ci-category:hover .ci-cat-name {
  color: #4D0000;
}

.ci-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ci-cat-list li {
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  line-height: 1.75;
  color: rgba(11, 11, 11, 0.4);
  text-transform: none;
  padding-left: 1.1em;
  position: relative;
  transition: color 0.35s ease;
}

.ci-cat-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(11, 11, 11, 0.25);
  transition: color 0.35s ease;
}

.ci-category:hover .ci-cat-list li {
  color: rgba(11, 11, 11, 0.65);
}

.ci-category:hover .ci-cat-list li::before {
  color: #4D0000;
}

.ci-category.is-active .ci-divider-line { background: rgba(11,11,11,0.35); }
.ci-category.is-active .ci-num { color: rgba(77,0,0,0.5); }
.ci-category.is-active .ci-cat-name { color: #4D0000; }
.ci-category.is-active .ci-cat-list li { color: rgba(11,11,11,0.65); }
.ci-category.is-active .ci-cat-list li::before { color: #4D0000; }

/* Tablet */
@media (max-width: 1023px) {
  .ci-grid { grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 64px); }
  .ci-headline { font-size: clamp(2rem, 5vw, 3.5rem); }
  .ci-cat-name { font-size: clamp(1.8rem, 4.5vw, 3.2rem); }
}

/* Mobile */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .ci-section { padding: 64px 24px 52px; }
  .ci-grid { grid-template-columns: 1fr; gap: 48px; margin-bottom: 0; }
  .ci-headline { font-size: clamp(2.2rem, 9vw, 3rem); }
  .ci-cat-name { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  .ci-cat-tag { opacity: 1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ci-headline, .ci-category { opacity: 1 !important; transform: none !important; }
}

.ci-tower-canvas {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 260px;
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .ci-left { flex-direction: column; }
  .ci-tower-canvas { min-height: 300px; margin-top: 24px; }
}

/* ========================================
   MANIFESTO SECTION
   ======================================== */

.mfst-section {
  position: relative;
  width: 100%;
  min-height: 90vh;
  background: #0c0c0c;
  color: var(--bone);
  padding: 64px clamp(32px, 8vw, 120px) 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-transform: uppercase;
}

.mfst-grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: mfst-grain-shift 0.14s steps(1) infinite;
}
@keyframes mfst-grain-shift {
  0%   { transform: translate(0,0); }
  14%  { transform: translate(-3%,2%); }
  28%  { transform: translate(2%,-1%); }
  42%  { transform: translate(-1%,3%); }
  57%  { transform: translate(3%,-2%); }
  71%  { transform: translate(-2%,1%); }
  85%  { transform: translate(1%,-3%); }
  100% { transform: translate(0,0); }
}

.mfst-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(52px, 9vh, 96px);
}

.mfst-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(238, 219, 193, 0.35);
  font-weight: 400;
  text-transform: uppercase;
}

.mfst-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4D0000;
  flex-shrink: 0;
}

.mfst-poster {
  position: relative;
  z-index: 2;
  flex: 1;
}

.mfst-claims {
  margin-bottom: clamp(40px, 6vh, 72px);
}

.mfst-claim {
  font-family: var(--font-heading);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-transform: uppercase;
  margin-bottom: 0.05em;
}

.mfst-claims .mfst-claim:nth-child(1) { font-size: clamp(3.2rem, 6.8vw, 8rem); }
.mfst-claims .mfst-claim:nth-child(2) { font-size: clamp(2rem, 4.2vw, 5rem); color: rgba(238, 219, 193, 0.75); }

.mfst-stanza {
  margin-left: 0;
  margin-bottom: clamp(56px, 9vh, 100px);
}

.mfst-stanza p {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.35rem);
  line-height: 1.7;
  color: rgba(238, 219, 193, 0.55);
  text-transform: none;
  letter-spacing: 0.015em;
}

.mfst-rule {
  width: clamp(60px, 8vw, 110px);
  height: 1px;
  background: rgba(238, 219, 193, 0.18);
  margin-bottom: clamp(36px, 5vh, 60px);
  transform-origin: left center;
}


.mfst-closing {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 3.4rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--bone);
  text-transform: uppercase;
  font-style: normal;
  margin-top: clamp(56px, 9vh, 100px);
  margin-bottom: clamp(52px, 8vh, 100px);
}

.mfst-accent {
  color: #4D0000;
  font-style: normal;
}

.mfst-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(238, 219, 193, 0.1);
  padding: clamp(20px, 3vh, 28px) 0 clamp(44px, 7vh, 80px);
  display: flex;
  gap: clamp(28px, 6vw, 96px);
  flex-wrap: wrap;
}

.mfst-footer p {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.14em;
  color: var(--bone);
  text-transform: uppercase;
  font-weight: 400;
  font-style: normal;
}

.mfst-accent-strong {
  color: inherit;
  font-weight: 400;
  letter-spacing: inherit;
}

@media (max-width: 1023px) {
  .mfst-claims .mfst-claim:nth-child(1) { font-size: clamp(2.6rem, 6.5vw, 4.8rem); }
  .mfst-claims .mfst-claim:nth-child(2) { font-size: clamp(1.7rem, 4.2vw, 3rem); }
  .mfst-closing { font-size: clamp(1.4rem, 3vw, 2.6rem); }
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .mfst-section { padding: 48px 24px 0; min-height: auto; }
  .mfst-top { margin-bottom: 48px; }
  .mfst-claims .mfst-claim:nth-child(1) { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .mfst-claims .mfst-claim:nth-child(2) { font-size: clamp(1.5rem, 6vw, 2rem); }
  .mfst-closing { font-size: clamp(1.3rem, 5.5vw, 2rem); margin-bottom: 48px; }
  .mfst-stanza p { font-size: 0.95rem; }
  .mfst-footer { flex-direction: column; gap: 14px; padding-bottom: 52px; }
  .mfst-footer p { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mfst-grain { animation: none; }
  .mfst-label, .mfst-dot, .mfst-claim,
  .mfst-stanza p, .mfst-rule,
  .mfst-closing, .mfst-footer { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES SECTION — BRUTALIST
   ═══════════════════════════════════════════════════════════════ */

.svc-section {
  background: var(--black);
  padding: clamp(24px, 3vw, 40px) clamp(24px, 5vw, 72px) 0 clamp(80px, 12vw, 180px);
  overflow: hidden;
}

.svc-label {
  font-family: 'DenimINK Heavy', sans-serif;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 clamp(28px, 4vw, 52px);
}

.svc-block {
  display: block;
}

.svc-hosp-bottom {
  display: flex;
  align-items: flex-start;
  gap: clamp(48px, 7vw, 110px);
}

.svc-hosp-bottom .svc-block[data-svc="1"] {
  padding-left: 0;
  margin: 0;
  flex-shrink: 0;
}

.svc-block[data-svc="2"] {
  padding-left: clamp(60px, 10vw, 140px);
}

.svc-clip {
  overflow: hidden;
  line-height: 1;
}

.svc-name {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--bone);
  margin: 0;
  line-height: 0.92;
  letter-spacing: -0.02em;
  display: block;
}

.svc-block[data-svc="0"] .svc-name { font-size: clamp(4.5rem, 13vw, 15rem); color: var(--burgundy); }
.svc-block[data-svc="1"] .svc-name { font-size: clamp(3.5rem, 10vw, 11.5rem); color: var(--electric); }
.svc-block[data-svc="2"] .svc-name { font-size: clamp(4.5rem, 12.5vw, 14rem); color: var(--mustard); }

.svc-name-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 40px);
}

.svc-sub {
  list-style: none;
  margin: clamp(10px, 1.2vw, 18px) 0 0;
  padding: 0;
}

.svc-sub li {
  font-family: var(--font-mono);
  font-size: var(--type-list);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 219, 193, 0.65);
  line-height: 2.2;
}

/* EXPERIENTIAL list runs horizontally */
.svc-block[data-svc="2"] .svc-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(20px, 2.5vw, 40px);
}

.svc-block[data-svc="2"] .svc-sub li {
  line-height: 1.8;
}

/* List sits beside LIFESTYLE at name midline */
.svc-sub--beside {
  margin-top: 0;
  padding-top: clamp(10px, 1.5vw, 20px);
  align-self: center;
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .svc-section { padding: 40px 20px 0; overflow: hidden; }
  .svc-hosp-bottom { flex-direction: column; gap: 12px; }
  .svc-block[data-svc="2"] { padding-left: 8px; }
  .svc-block[data-svc="0"] .svc-name { font-size: clamp(3.8rem, 16vw, 5.5rem); }
  .svc-block[data-svc="1"] .svc-name { font-size: clamp(3rem,  13vw, 4.5rem); }
  .svc-hosp-bottom .svc-block[data-svc="1"] { margin-left: -8px; }
  .svc-block[data-svc="2"] .svc-name { font-size: clamp(3.5rem, 14.5vw, 5rem); }
  .client-logo { height: 36px; width: auto; min-width: unset; }
  .client-ticker-track { gap: 28px; }
}

/* Client logo ticker */
.client-ticker-wrap {
  margin-top: clamp(48px, 7vw, 96px);
  margin-left: calc(-1 * clamp(80px, 12vw, 180px));
  margin-right: calc(-1 * clamp(24px, 5vw, 72px));
  width: auto;
  padding: clamp(20px, 2.5vw, 32px) 0;
  overflow: hidden;
  border: none;
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .client-ticker-wrap {
    margin-left: -20px;
    margin-right: -20px;
    border: none;
  }
}

.client-ticker {
  overflow: hidden;
}

.client-ticker-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  width: max-content;
  animation: ticker-scroll 28s linear infinite;
}

.client-logo {
  height: clamp(72px, 9vw, 130px);
  width: clamp(140px, 18vw, 260px);
  object-fit: contain;
  filter: opacity(0.85);
  flex-shrink: 0;
  transition: filter 0.3s ease;
}

.client-logo:hover {
  filter: opacity(1);
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .client-ticker-track { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-name  { transform: none !important; opacity: 1 !important; }
  .svc-sub   { opacity: 1 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER CTA SECTION
   ═══════════════════════════════════════════════════════════════ */

.ftcta-section {
  position: relative;
  background: var(--bone);
  padding: clamp(40px, 6vw, 80px) clamp(16px, 3vw, 48px) clamp(40px, 6vw, 80px);
  overflow: hidden;
}

.ftcta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
}

.ftcta-body {
  display: flex;
  flex-direction: column;
  gap: 0.02em;
}

.ftcta-globe {
  width: clamp(140px, 18vw, 300px);
  height: auto;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

.ftcta-line {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 10.2vw, 14rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
}

/* ( ) wrapper */
.ftcta-cta-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.ftcta-paren {
  font-family: var(--font-heading);
  font-size: 1em;
  line-height: inherit;
  color: var(--black);
}

.ftcta-cta-link {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: 0em;
  text-transform: uppercase;
  color: var(--burgundy);
  text-decoration: none;
  padding: 0 clamp(1px, 0.2vw, 4px);
  line-height: 1.3;
  text-align: left;
  transition: opacity 0.25s ease;
}

.ftcta-cta-link:hover { opacity: 0.6; }

/* matches the arrow on About and Contact. Inherits rather than hardcoding a
   colour, because this block sits on bone while the others sit on black. */
.ftcta-arrow {
  color: inherit;
  opacity: 0.45;
  margin-left: 0.22em;
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .ftcta-section { padding: clamp(32px, 6vw, 56px) 20px; }
  .ftcta-inner { flex-direction: column; align-items: flex-start; gap: 0; }
  .ftcta-globe { display: none; }
  .ftcta-body { width: 100%; text-align: left; }
  .ftcta-line { font-size: clamp(2.6rem, 12.5vw, 4rem); white-space: nowrap; }
  /* Three stacked lines have to sit inside the brackets. Box-fitting is not
     enough here: the bracket is a curve, so its opening is narrowest at the
     top and bottom and the first and last lines run into it long before the
     boxes actually overlap. At 15.6px/1 the block filled 82% of the bracket
     and read as jammed in. This sits nearer 64%, and the leading is pulled
     under 1 so the three words group as one mark rather than three lines. */
  .ftcta-cta-link {
    font-size: clamp(11px, 3.5vw, 16px);
    line-height: 0.88;
    padding: 0 3px;
    text-align: left;
  }
}