/* Explain: Global styles, navigation, and section-specific styling. */
[x-cloak] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
}

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

/* =========================================
   GLOBAL NAVIGATION
========================================= */

.nav {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;

  display: grid;
  grid-template-columns: 2fr 2fr 4fr;
  align-items: start;

  padding: 24px var(--pad);

  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);

  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.brand {
  font-size: 27px;
  font-weight: 800;
  line-height: .8;
}

.brand span {
  font-size: 8px;
  vertical-align: top;
}

.nav-meta {
  line-height: 1.35;
}

.nav nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
}

.nav nav a:hover {
  opacity: .55;
}

.menu {
  display: none;
  border: 0;
  background: none;
  color: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

/* =========================================
   SCENE 01 — HERO
========================================= */

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

  padding:
    clamp(110px, 15vh, 150px)
    var(--pad)
    clamp(30px, 5vh, 40px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
}

.hero h1 {
  font-size: clamp(65px, 11vw, 155px);
  letter-spacing: -.085em;
  line-height: .8;

  margin: clamp(20px, 4vh, 40px) 0;

  font-weight: 700;
}

.hero h1 span {
  display: block;
}

.hero h1 .indent {
  padding-left: 14vw;
}

.hero-bottom {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: end;

  font-size: 13px;
}

.hero-bottom p {
  grid-column: 1 / 4;

  max-width: 330px;

  line-height: 1.45;
}

.hero-bottom a {
  grid-column: 10 / 13;
  text-align: right;
}

/* =========================================
   HERO MOTION LAYER (temporary)
========================================= */

.hero-motion {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
  z-index: 0;

  opacity: 0;
  transition: opacity .4s ease;
}

.hero-motion.is-ready {
  opacity: 1;
}

.hero-motion video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;
}

/* Hide the duplicated static headline only while motion plays.
   Layout dimensions are preserved (opacity, not display). */
.hero.video-active .hero-headline {
  opacity: 0;
}

/* =========================================
   SHARED PROJECT SYSTEM
========================================= */

.project,
.editorial-work,
.capabilities,
.work-index,
.studio {
  padding: 80px var(--pad);
}

/* Featured Work group rhythm (desktop) */
.project {
  padding-top: 48px;
  padding-bottom: 56px;
}

.project-meta,
.section-head {
  display: flex;
  justify-content: space-between;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;

  margin-bottom: 12px;
}

.project-visual {
  position: relative;
  display: block;
  overflow: hidden;

  min-height: 76vh;
}

/* =========================================
   FEATURED PROJECT — MUGHAMIR
========================================= */

.coral {
  background: #ff5d48;
}

.project-word.giant {
  position: absolute;

  left: -1vw;
  bottom: -2vw;

  font-size: clamp(80px, 15vw, 230px);
  letter-spacing: -.09em;
  font-weight: 800;
  line-height: .7;

  color: #111;
}

.orb {
  position: absolute;

  border: 2px solid #111;
  border-radius: 50%;
}

.orb-a {
  width: 30vw;
  height: 30vw;

  right: 7%;
  top: 8%;
}

.orb-b {
  width: 17vw;
  height: 17vw;

  right: 24%;
  top: 26%;

  background: #f2f1ec;
}

.project-stamp {
  position: absolute;

  top: 7%;
  left: 4%;

  font-size: 12px;
  font-weight: 700;
}

.project-caption {
  display: grid;
  grid-template-columns: 3fr 5fr 2fr;
  gap: 20px;

  padding-top: 14px;
}

.project-caption h2 {
  margin: 0;
  font-size: 28px;
}

.project-caption p {
  margin: 0;
  font-size: 13px;
}

.project-caption span {
  text-align: right;
  font-size: 12px;
}

/* =========================================
   SCENE 03 — EDITORIAL WORK
========================================= */

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

  padding-top: 80px;
  padding-bottom: 180px;
}

.project-card h3 {
  font-size: 22px;

  margin:
    12px
    0
    5px;
}

.project-card p {
  font-size: 12px;

  max-width: 320px;

  margin: 0;

  line-height: 1.5;
}

.project-left {
  grid-column: 1 / 8;
}

.project-right {
  grid-column: 9 / 13;
  margin-top: 38vh;
}

.project-card .project-visual {
  min-height: 0;
  aspect-ratio: 1.1;
}

/* =========================================
   NOOR PROJECT
========================================= */

.cobalt {
  background: #1836f2;
}

.vertical-type {
  position: absolute;

  left: 4%;
  top: 4%;

  font-size: clamp(60px, 9vw, 140px);
  font-weight: 800;
  letter-spacing: -.08em;

  color: white;

  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.signal {
  position: absolute;

  width: 40%;
  aspect-ratio: 1;

  border: 2px solid white;
  border-radius: 50%;

  right: 8%;
  top: 15%;

  box-shadow:
    0 0 0 3vw #1836f2,
    0 0 0 calc(3vw + 2px) white,
    0 0 0 6vw #1836f2,
    0 0 0 calc(6vw + 2px) white;
}

.microcopy {
  position: absolute;

  right: 5%;
  bottom: 5%;

  color: white;

  font-weight: 700;
  font-size: 12px;
}

/* =========================================
   HIGH DAM PROJECT
========================================= */

.acid {
  background: #d6ff38;
}

.microcopy.dark {
  color: #111;
}

.monogram {
  position: absolute;

  left: 6%;
  top: 5%;

  font-size: clamp(70px, 10vw, 150px);
  font-weight: 800;
  letter-spacing: -.08em;
}

.grid-lines {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 24.7%,
      rgba(0, 0, 0, .2) 25%,
      transparent 25.3%,
      transparent 49.7%,
      rgba(0, 0, 0, .2) 50%,
      transparent 50.3%,
      transparent 74.7%,
      rgba(0, 0, 0, .2) 75%,
      transparent 75.3%
    );
}

/* =========================================
   SCENE 04 — MANIFESTO
========================================= */

.manifesto {
  background: #080808;
  color: #f5f4ef;

  min-height: 150vh;

  padding:
    120px
    var(--pad);

  display: flex;
  align-items: center;
}

.manifesto-inner {
  width: 100%;
}

.inverse {
  color: #f5f4ef;
}

.manifesto h2 {
  font-size: clamp(65px, 11vw, 170px);
  line-height: .8;
  letter-spacing: -.075em;

  margin:
    70px
    0
    220px;
}

.manifesto-turn {
  font-size: clamp(52px, 8vw, 125px);
  line-height: .88;
  letter-spacing: -.065em;

  text-align: right;
}

.manifesto-turn em {
  font-family: Georgia, serif;
  font-weight: 400;
}

/* =========================================
   SCENE 05 — CAPABILITIES
========================================= */

.capabilities {
  padding-top: 80px;
  padding-bottom: 72px;
}

.cap-list {
  border-top: 1px solid var(--line);
}

.cap-list a {
  display: grid;

  grid-template-columns:
    1fr
    7fr
    3fr
    1fr;

  align-items: center;
  gap: 15px;

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

  padding: 32px 0;

  transition: .25s;
}

.cap-list a:hover {
  padding-left: 15px;
}

.cap-list span,
.cap-list i,
.cap-list b {
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.cap-list strong {
  font-size:
    clamp(
      30px,
      4.2vw,
      66px
    );

  letter-spacing: -.05em;
}

.cap-list b {
  text-align: right;
}

/* =========================================
   SCENE 06 — MORE SELECTED WORK
========================================= */

.work-index {
  background: #d9d8d2;

  padding-top: 110px;
  padding-bottom: 140px;
}

.index-stage {
  display: grid;

  grid-template-columns:
    7fr
    5fr;

  gap: 40px;
}

/* =========================================
   INTERACTIVE PROJECT VISUAL
========================================= */

.index-visual {
  aspect-ratio: 1.35;

  position: relative;
  overflow: hidden;
}

.index-slide {
  position: absolute;
  inset: 0;

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

  opacity: 0;

  transition: .45s;

  transform: scale(.97);

  background: #ff8b2d;
}

.index-slide:nth-child(2) {
  background: #a77cf2;
}

.index-slide:nth-child(3) {
  background: #111;
  color: white;
}

.index-slide.active {
  opacity: 1;
  transform: scale(1);
}

.index-slide span {
  font-size:
    clamp(
      70px,
      11vw,
      170px
    );

  font-weight: 800;
  letter-spacing: -.08em;
}

.index-slide small {
  position: absolute;

  bottom: 6%;
  left: 6%;

  font-weight: 700;
}

/* =========================================
   PROJECT INDEX LIST
========================================= */

.index-list {
  border-top:
    1px
    solid
    var(--line);
}

.index-list button {
  width: 100%;

  display: grid;

  grid-template-columns:
    1fr
    4fr
    3fr
    1fr;

  gap: 10px;

  padding: 25px 0;

  border: 0;

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

  background: none;

  text-align: left;

  cursor: pointer;

  opacity: .45;
}

.index-list button.active {
  opacity: 1;
}

.index-list button strong {
  font-size: 16px;
}

.index-list button span,
.index-list button i,
.index-list button b {
  font-size: 9px;
  font-style: normal;
}

/* =========================================
   SCENE 07 — STUDIO / CREDIBILITY
========================================= */

.studio {
  padding-top: 140px;
  padding-bottom: 160px;
}

.studio-statement {
  font-size:
    clamp(
      42px,
      6.2vw,
      95px
    );

  line-height: .98;
  letter-spacing: -.06em;

  max-width: 1200px;

  margin:
    110px
    0
    160px;
}

/* =========================================
   EXPERIENCE NUMBERS
========================================= */

.numbers {
  display: grid;

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

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

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

.numbers div {
  padding:
    30px
    20px
    30px
    0;

  min-height: 240px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.numbers div + div {
  border-left:
    1px
    solid
    var(--line);

  padding-left: 20px;
}

.numbers strong {
  font-size:
    clamp(
      48px,
      6vw,
      90px
    );

  line-height: .9;
  letter-spacing: -.06em;
}

.numbers span {
  font-size: 9px;
}

/* =========================================
   SELECTED CLIENT EXPERIENCE
========================================= */

.clients {
  display: grid;

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

  gap: 20px;

  align-items: end;

  padding-top: 90px;
}

.clients span {
  font-size: 9px;
}

.clients div {
  font-weight: 700;
  font-size: 15px;

  text-align: right;
}

/* =========================================
   SCENE 08 — FINAL CONTACT
========================================= */

.contact {
  background: #0a0a0a;
  color: #f3f2ed;

  min-height: 100vh;

  padding:
    100px
    var(--pad)
    30px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact h2 {
  font-size:
    clamp(
      60px,
      10.2vw,
      155px
    );

  line-height: .79;
  letter-spacing: -.075em;

  margin:
    60px
    0;
}

.contact h2 span {
  padding-left: 9vw;
}

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

.contact-link {
  font-size:
    clamp(
      24px,
      3vw,
      46px
    );

  border-bottom:
    1px
    solid
    #777;

  padding-bottom: 14px;

  align-self: flex-start;
}

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

.contact footer {
  display: grid;

  grid-template-columns:
    3fr
    6fr
    3fr;

  border-top:
    1px
    solid
    #333;

  padding-top: 18px;

  margin-top: 90px;

  font-size: 9px;
}

.contact footer div:nth-child(2) {
  display: flex;
  gap: 25px;
}

.contact footer div:last-child {
  text-align: right;
}

/* =========================================
   CUSTOM CURSOR
========================================= */

.cursor {
  position: fixed;

  width: 9px;
  height: 9px;

  background: #fff;

  border-radius: 50%;

  z-index: 99;

  pointer-events: none;

  mix-blend-mode: difference;

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

/* =========================================
   RESPONSIVE — MOBILE / SMALL TABLET
========================================= */

@media (max-width: 800px) {

  /* -----------------------------------------
     NAVIGATION
  ----------------------------------------- */

  .nav {
    grid-template-columns:
      1fr
      1fr;

    padding-top: 20px;
  }

  .nav-meta,
  .nav nav {
    display: none;
  }

  .menu {
    display: block;
    text-align: right;
  }

  /* -----------------------------------------
     HERO
  ----------------------------------------- */

  .hero {
    padding-top: 110px;
    min-height: 92vh;
  }

  .hero h1 {
    font-size: 18vw;
    line-height: .82;
  }

  .hero h1 .indent {
    padding-left: 0;
  }

  .hero-bottom {
    display: flex;

    justify-content:
      space-between;

    gap: 30px;
  }

  .hero-bottom p {
    max-width: 230px;
  }

  /* -----------------------------------------
     GLOBAL SECTION PADDING
  ----------------------------------------- */

  .project,
  .editorial-work,
  .capabilities,
  .work-index,
  .studio {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* -----------------------------------------
     FEATURED PROJECT
  ----------------------------------------- */

  .project-visual {
    min-height: 0;
    aspect-ratio: auto;
  }

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

  .project-caption p {
    grid-column: 1 / 3;
  }

  .project-caption span {
    grid-column: 2;
  }

  /* -----------------------------------------
     EDITORIAL PROJECTS
  ----------------------------------------- */

  .project {
    padding-top: 40px;
    padding-bottom: 10px;
  }

  .editorial-work {
    display: block;

    padding-top: 20px;
    padding-bottom: 60px;
  }

  .project-right {
    margin-top: 32px;
  }

  .project-card .project-visual {
    aspect-ratio: .85;
  }

  /* -----------------------------------------
     MANIFESTO
  ----------------------------------------- */

  .manifesto {
    padding:
      90px
      20px;

    min-height: 120vh;
  }

  .manifesto h2 {
    margin:
      60px
      0
      160px;

    font-size: 17vw;
  }

  .manifesto-turn {
    font-size: 13vw;
  }

  /* -----------------------------------------
     CAPABILITIES
  ----------------------------------------- */

  .cap-list a {
    grid-template-columns: 35px 1fr 24px;
    align-items: start;
    row-gap: 10px;
    column-gap: 12px;
    padding: 28px 0;
  }

  .cap-list span {
    grid-column: 1;
    grid-row: 1;
    margin-top: 5px;
  }

  .cap-list strong {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(1.5rem, 6.5vw, 2rem);
    line-height: 1.15;
    font-weight: 700;
  }

  .cap-list b {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    font-size: 0.9375rem;
    line-height: 1.5;
    font-weight: 500;
  }

  .cap-list i {
    display: block;
    grid-column: 3;
    grid-row: 1;
    margin-top: 5px;
    text-align: right;
  }

  /* -----------------------------------------
     PROJECT INDEX
  ----------------------------------------- */

  .index-stage {
    display: block;
  }

  .index-list {
    margin-top: 20px;
  }

  .index-list button {
    grid-template-columns:
      40px
      1fr
      55px;
  }

  .index-list i {
    display: none;
  }

  /* -----------------------------------------
     STUDIO
  ----------------------------------------- */

  .studio-statement {
    font-size: 11vw;

    margin:
      80px
      0
      100px;
  }

  /* -----------------------------------------
     EXPERIENCE NUMBERS
  ----------------------------------------- */

  .numbers {
    display: block;
  }

  .numbers div {
    min-height: 180px;

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

  .numbers div + div {
    border-left: 0;
    padding-left: 0;
  }

  /* -----------------------------------------
     CLIENTS
  ----------------------------------------- */

  .clients {
    grid-template-columns:
      1fr
      1fr;

    gap: 28px;
  }

  .clients span {
    grid-column: 1 / 3;
  }

  .clients div {
    text-align: left;
  }

  /* -----------------------------------------
     FINAL CONTACT
  ----------------------------------------- */

  .contact {
    padding:
      80px
      20px
      25px;
  }

  .contact h2 {
    font-size: 16vw;
  }

  .contact h2 span {
    padding-left: 0;
  }

  /* -----------------------------------------
     FOOTER
  ----------------------------------------- */

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

    gap: 30px;
  }

  .contact footer div:nth-child(2) {
    justify-content: flex-end;
  }

  .contact footer div:last-child {
    grid-column: 1 / 3;
    text-align: left;
  }

  /* -----------------------------------------
     CURSOR
  ----------------------------------------- */

  .cursor {
    display: none;
  }

}

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

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

  .hero-motion {
    display: none;
  }

  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }

}

/* =========================================
   HERO SOUND CONTROL
========================================= */

.hero-sound {
  display: none;
}

.hero-sound.is-visible {
  display: inline-flex;
  align-items: center;
}