:root {
  --gold: #c5a35f;
  --gold-soft: #d3b46f;
  --cream: #f3ecdc;
  --nav-text: #e4dfd4;
  --nav-border: rgba(218, 216, 207, 0.48);
  --page-dark: #11110f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--page-dark);
}

body {
  font-family: "Manrope", Arial, sans-serif;
  color: var(--cream);
}

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

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

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background-image: url("../assets/images/hero-home.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.site-header {
  position: absolute;
  z-index: 10;
  top: clamp(42px, 8vh, 101px);
  left: 7.15%;
  right: 7.15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  display: block;
  width: clamp(220px, 15.3vw, 313px);
  height: auto;
}

.main-nav {
  width: clamp(545px, 31.7vw, 650px);
  min-height: clamp(78px, 8.8vh, 110px);
  padding: 0 clamp(27px, 2.1vw, 44px);
  border: 1px solid var(--nav-border);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background:
    radial-gradient(circle at 43% 55%, rgba(155, 124, 66, 0.55) 0%, rgba(98, 80, 51, 0.29) 32%, rgba(49, 47, 43, 0.49) 72%),
    rgba(48, 47, 44, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.main-nav a {
  position: relative;
  white-space: nowrap;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--nav-text);
  transition: color 180ms ease, transform 180ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--gold-soft);
  transform: translateY(-1px);
}

.main-nav a.active {
  color: var(--gold-soft);
}

.menu-toggle {
  display: none;
}

.hero-copy {
  position: absolute;
  z-index: 3;
  left: 7.05%;
  top: 41.45%;
  width: min(880px, 58vw);
}

.hero-copy h1 {
  margin: 0;
  color: var(--cream);
  font-size: 55px;
  letter-spacing: -0.035em;
  line-height: 1.13;
  text-transform: uppercase;
}

.hero-copy h1 span {
  display: block;
}

.hero-title-light {
  font-weight: 300;
}

.hero-title-heavy {
  margin-top: 8px;
  font-weight: 800;
}

.hero-copy p {
  margin: 47px 0 0;
  max-width: 1000px;
  color: var(--cream);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: -0.017em;
}

.projects-button {
  margin-top: 62px;
  width: 240px;
  height: 56px;
  padding: 0 36px 0 44px;
  border: 1px solid rgba(201, 165, 92, 0.72);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  background:
    linear-gradient(90deg, rgba(164, 126, 50, 0.83) 0%, rgba(118, 93, 48, 0.56) 51%, rgba(38, 38, 35, 0.78) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 200ms ease, border-color 200ms ease, filter 200ms ease;
}

.projects-button:hover,
.projects-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(222, 187, 116, 0.96);
  filter: brightness(1.08);
}

.projects-button .arrow {
  margin-top: -2px;
  font-size: 31px;
  font-weight: 300;
  line-height: 0.7;
}

@media (max-width: 1500px) {
  .hero-copy h1 {
    font-size: clamp(43px, 3.5vw, 55px);
  }

  .hero-copy p {
    font-size: clamp(19px, 1.5vw, 24px);
  }

  .hero-copy {
    width: min(800px, 62vw);
  }
}

@media (max-width: 1050px) {
  .site-header {
    top: 42px;
    left: 6vw;
    right: 6vw;
  }

  .brand img {
    width: 230px;
  }

  .main-nav {
    width: 520px;
    min-height: 76px;
    padding-inline: 28px;
    gap: 17px;
  }

  .main-nav a {
    font-size: 13px;
  }

  .hero-copy {
    left: 6vw;
    width: 68vw;
  }

  .desktop-break {
    display: none;
  }
}

@media (max-width: 800px) {
  .hero {
    min-height: 100svh;
    background-position: 68% center;
  }

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 25px 24px;
    background: linear-gradient(180deg, rgba(13, 13, 12, 0.74), rgba(13, 13, 12, 0));
  }

  .brand {
    position: relative;
    z-index: 12;
  }

  .brand img {
    width: clamp(185px, 53vw, 235px);
  }

  .menu-toggle {
    position: relative;
    z-index: 12;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(218, 216, 207, 0.45);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(36, 36, 33, 0.54);
    cursor: pointer;
  }

  .menu-toggle span {
    position: absolute;
    width: 18px;
    height: 1px;
    background: var(--cream);
    transition: transform 180ms ease, top 180ms ease;
  }

  .menu-toggle span:first-child {
    transform: translateY(-4px);
  }

  .menu-toggle span:last-child {
    transform: translateY(4px);
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg);
  }

  .main-nav {
    position: fixed;
    z-index: 11;
    inset: 0;
    width: auto;
    min-height: 0;
    padding: 130px 30px 50px;
    border: 0;
    border-radius: 0;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    background: rgba(20, 20, 18, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .main-nav a {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 28px;
  }

  .hero-copy {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: max(60px, 8vh);
    width: auto;
  }

  .hero-copy h1 {
    max-width: 620px;
    font-size: clamp(36px, 8.5vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.045em;
  }

  .hero-title-heavy {
    margin-top: 9px;
  }

  .hero-copy p {
    max-width: 650px;
    margin-top: 28px;
    font-size: clamp(17px, 4vw, 22px);
    line-height: 1.45;
  }

  .projects-button {
    margin-top: 34px;
    width: 210px;
    height: 54px;
    padding-inline: 31px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .hero {
    background-position: 71% center;
  }

  .site-header {
    padding: 20px 18px;
  }

  .brand img {
    width: 175px;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  .hero-copy {
    left: 20px;
    right: 20px;
    bottom: max(38px, 6vh);
  }

  .hero-copy h1 {
    font-size: clamp(31px, 9.6vw, 43px);
  }

  .hero-copy p {
    margin-top: 23px;
    font-size: 16px;
  }

  .projects-button {
    margin-top: 28px;
    width: 188px;
    height: 50px;
    padding-inline: 28px;
    font-size: 15px;
  }
}

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

/* About page ------------------------------------------------------------ */
.about-page {
  background: #282824;
}

.about-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 787;
  min-height: 430px;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(10, 10, 10, 0.03), rgba(10, 10, 10, 0.08)),
    url("../assets/images/about-hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.about-content {
  position: relative;
  overflow: hidden;
  background-color: #292925;
  background-image:
    linear-gradient(rgba(42, 42, 37, 0.30), rgba(42, 42, 37, 0.50)),
    url("../assets/images/gold-texture.png");
  background-size: cover;
  background-position: center top;
}

.about-content::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 70% 42%, transparent 0 22%, rgba(20, 20, 18, 0.10) 64%, rgba(18, 18, 16, 0.18) 100%);
}

.about-inner {
  position: relative;
  z-index: 1;
  width: min(1160px, 86vw);
  margin: 0 auto;
  padding: 122px 0 158px;
}

.about-intro,
.about-section {
  text-align: center;
}

.about-intro h1 {
  margin: 0;
  color: #f5f0e5;
  font-size: clamp(46px, 4vw, 80px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.about-intro p {
  margin: 48px auto 0;
  color: #f2ede3;
  font-size: clamp(18px, 1.45vw, 26px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.about-section h2 {
  margin: 0;
  color: var(--gold-soft);
  font-size: clamp(38px, 3vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.offers {
  margin-top: 100px;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 78px;
  margin-top: 62px;
}

.offer-pill {
  min-height: 58px;
  padding: 10px 22px;
  border: 1px solid rgba(226, 223, 211, 0.55);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #efebe1;
  background: rgba(24, 24, 22, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}

.philosophy {
  margin-top: 116px;
}

.philosophy-lead {
  margin: 56px auto 0;
  color: #f5f1e8;
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.02em;
}

.philosophy-copy {
  margin: 58px auto 0;
  color: #f1ede4;
  font-size: clamp(19px, 1.38vw, 25px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.018em;
}

.people {
  margin-top: 110px;
}

.person-row {
  display: grid;
  grid-template-columns: minmax(285px, 0.92fr) minmax(0, 1.75fr);
  align-items: center;
  gap: 95px;
  margin-top: 92px;
  text-align: left;
}

.portrait-card {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 0.88;
  justify-self: end;
  border: 1px solid rgba(205, 168, 88, 0.88);
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(rgba(24, 24, 21, 0.28), rgba(24, 24, 21, 0.28)),
    url("../assets/images/gold-texture.png") center/cover;
}

.portrait-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.person-copy {
  max-width: 680px;
}

.person-role {
  margin: 0 0 22px;
  color: #f0ece2;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}

.person-copy h3 {
  margin: 0 0 48px;
  color: #f4f0e8;
  font-size: clamp(36px, 2.5vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.person-copy p:not(.person-role) {
  margin: 0 0 30px;
  color: #efeae0;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.38;
}

.advisor-row {
  grid-template-columns: minmax(0, 1.75fr) minmax(285px, 0.92fr);
  margin-top: 132px;
}

.advisor-row .person-copy {
  justify-self: start;
}

.advisor-card {
  justify-self: start;
}

.advisor-row .person-copy h3 {
  margin-bottom: 50px;
}

@media (max-width: 1200px) {
  .about-inner {
    width: min(1040px, 88vw);
  }

  .offer-grid {
    gap: 22px 34px;
  }

  .person-row {
    gap: 60px;
  }
}

@media (max-width: 900px) {
  .about-hero {
    min-height: 520px;
    aspect-ratio: auto;
    background-position: center center;
  }

  .about-inner {
    width: min(760px, 88vw);
    padding-top: 86px;
    padding-bottom: 100px;
  }

  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .person-row,
  .advisor-row {
    grid-template-columns: 1fr;
    gap: 46px;
    margin-top: 72px;
  }

  .portrait-card,
  .advisor-card {
    width: min(360px, 78vw);
    justify-self: center;
  }

  .person-copy,
  .advisor-row .person-copy {
    max-width: 680px;
    justify-self: center;
    text-align: center;
  }

  .advisor-row .person-copy {
    order: 2;
  }

  .advisor-card {
    order: 1;
  }
}

@media (max-width: 800px) {
  .about-hero .site-header {
    position: absolute;
  }

  .about-intro h1 {
    font-size: clamp(34px, 8.7vw, 48px);
  }

  .about-section h2 {
    font-size: clamp(32px, 8vw, 44px);
  }

  .offers,
  .philosophy,
  .people {
    margin-top: 80px;
  }

  .offer-grid {
    margin-top: 44px;
  }
}

@media (max-width: 560px) {
  .about-hero {
    min-height: 440px;
    background-position: 54% center;
  }

  .about-inner {
    width: calc(100% - 36px);
    padding-top: 68px;
    padding-bottom: 78px;
  }

  .about-intro p,
  .philosophy-lead,
  .philosophy-copy {
    font-size: 17px;
  }

  .desktop-break {
    display: none;
  }

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

  .offer-pill {
    min-height: 54px;
    font-size: 15px;
  }

  .philosophy-copy {
    margin-top: 38px;
  }

  .person-row,
  .advisor-row {
    gap: 34px;
  }

  .person-role {
    font-size: 20px;
  }

  .person-copy h3 {
    margin-bottom: 30px;
    font-size: 29px;
  }

  .person-copy p:not(.person-role) {
    font-size: 16px;
    line-height: 1.5;
  }

  .advisor-row {
    margin-top: 92px;
  }
}

/* Projects page --------------------------------------------------------- */
.projects-page {
  min-height: 100%;
  background: #292925;
}

.projects-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background-color: #292925;
  background-image:
    linear-gradient(rgba(38, 38, 34, 0.30), rgba(38, 38, 34, 0.34)),
    url("../assets/images/projects-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

.projects-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(25, 25, 23, 0.12);
}

.projects-header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: min(1220px, 86.5vw);
  margin: 0 auto;
  padding-top: 91px;
}

.projects-inner {
  position: relative;
  z-index: 1;
  width: min(1248px, 87.4vw);
  margin: 0 auto;
  padding: 92px 0 248px;
}

.projects-intro {
  text-align: center;
}

.projects-intro h1 {
  max-width: 1115px;
  margin: 0 auto;
  color: #f3ede1;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(42px, 4.2vw, 60px);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.project-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 109px;
}

.project-filter {
  min-width: 188px;
  height: 49px;
  padding: 0 25px;
  border: 1px solid rgba(197, 163, 95, 0.85);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #f0ebdf;
  background: rgba(44, 43, 39, 0.34);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.project-filter span {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-1px);
}

.project-filter.is-active {
  background:
    linear-gradient(90deg, rgba(166, 126, 50, 0.78), rgba(98, 78, 45, 0.43) 62%, rgba(42, 41, 38, 0.42));
}

.project-filter:hover,
.project-filter:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(222, 187, 116, 0.98);
}

.project-list {
  display: grid;
  gap: 92px;
  margin-top: 102px;
}

.project-card {
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: rgba(20, 20, 18, 0.48);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
}

.project-media {
  position: relative;
  height: clamp(330px, 34vw, 485px);
  overflow: hidden;
  background: #1a1a18;
}

.project-poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-poster-hijra {
  /* Keep the subject's hat/head fully visible, matching the Figma crop. */
  object-position: center top;
}

.project-poster-xx {
  object-position: center 48%;
}

.play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  background: transparent;
  cursor: default;
}


.native-video-play-button {
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.native-video-play-button:hover,
.native-video-play-button:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  filter: brightness(1.08);
}

.project-media.is-playing {
  background: #000;
}

.project-native-player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: cover;
  object-position: center center;
}

.play-button img {
  width: 88px;
  height: 88px;
  display: block;
}

.project-meta {
  position: relative;
  min-height: 195px;
  padding: 44px 96px 42px 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  isolation: isolate;
  background-color: rgba(12, 12, 11, 0.76);
  background-image:
    linear-gradient(90deg, rgba(13, 13, 12, 0.34), rgba(13, 13, 12, 0.14)),
    url("../assets/images/project-info-blur.png");
  background-size: cover;
  background-position: center;
}

.project-meta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(9, 9, 8, 0.15);
}

.project-copy h2 {
  margin: 0;
  color: var(--gold-soft);
  font-family: "Unbounded", Arial, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.project-copy p {
  margin: 18px 0 0;
  color: #f1ede4;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.explore-button {
  flex: 0 0 auto;
  width: 236px;
  height: 59px;
  padding: 0 39px 0 48px;
  border: 1px solid rgba(197, 163, 95, 0.76);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  color: #f3ede1;
  background: rgba(5, 5, 5, 0.92);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.explore-button:hover,
.explore-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(222, 187, 116, 0.96);
  background: rgba(15, 14, 12, 0.96);
}

.explore-button .arrow {
  font-size: 28px;
  font-weight: 300;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .projects-header,
  .projects-inner {
    width: min(920px, 88vw);
  }

  .projects-inner {
    padding-top: 78px;
  }

  .project-filters {
    gap: 18px;
  }

  .project-filter {
    min-width: 0;
    padding-inline: 22px;
    font-size: 15px;
  }

  .project-meta {
    padding-inline: 56px;
  }
}

@media (max-width: 800px) {
  .projects-shell {
    background-attachment: scroll;
  }

  .projects-header {
    position: relative;
    width: 100%;
    margin: 0;
    padding-top: 25px;
  }

  .projects-header.site-header {
    left: 0;
    right: 0;
    padding-left: 24px;
    padding-right: 24px;
  }

  .projects-inner {
    width: calc(100% - 40px);
    padding: 82px 0 110px;
  }

  .projects-intro h1 {
    font-size: clamp(34px, 8.3vw, 52px);
    line-height: 1.12;
  }

  .project-filters {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 58px;
  }

  .project-filter {
    height: 46px;
    padding: 0 18px;
    gap: 14px;
    font-size: 13px;
  }

  .project-list {
    gap: 48px;
    margin-top: 64px;
  }

  .project-card {
    border-radius: 18px 18px 0 0;
  }

  .project-media {
    height: clamp(245px, 54vw, 410px);
  }

  .play-button,
  .play-button img {
    width: 70px;
    height: 70px;
  }

  .project-meta {
    min-height: 170px;
    padding: 30px 32px;
  }

  .project-copy h2 {
    font-size: clamp(28px, 5.5vw, 38px);
  }

  .project-copy p {
    margin-top: 12px;
    font-size: clamp(19px, 3.7vw, 27px);
  }

  .explore-button {
    width: 190px;
    height: 52px;
    padding-inline: 33px 28px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .projects-header.site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .projects-inner {
    width: calc(100% - 30px);
    padding-top: 64px;
  }

  .projects-intro h1 {
    font-size: clamp(31px, 9vw, 43px);
  }

  .project-filters {
    align-items: stretch;
    flex-direction: column;
    margin: 42px auto 0;
    width: min(280px, 100%);
  }

  .project-filter {
    width: 100%;
    justify-content: space-between;
    padding-inline: 25px;
  }

  .project-media {
    height: 260px;
  }

  .project-poster-hijra {
    object-position: 35% top;
  }

  .project-poster-xx {
    object-position: 51% center;
  }

  .project-meta {
    min-height: 0;
    padding: 26px 24px 28px;
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
  }

  .project-copy h2 {
    font-size: 27px;
  }

  .project-copy p {
    font-size: 19px;
  }

  .explore-button {
    width: 176px;
    height: 48px;
    font-size: 14px;
  }
}

/* ========================================
   Individual project page — Hijra
   ======================================== */
.project-detail-page {
  margin: 0;
  background: #242423;
  color: #f2ebdd;
}

.project-detail-shell {
  min-height: 100vh;
  background:
    linear-gradient(rgba(35, 35, 34, .70), rgba(35, 35, 34, .70)),
    url('../assets/images/project-detail-bg.jpg') center top / cover fixed;
}

.project-detail-header {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: min(1560px, calc(100% - 120px));
  margin: 0 auto;
  padding-top: 78px;
}

.project-detail-inner {
  width: min(1340px, calc(100% - 160px));
  margin: 0 auto;
  padding: 165px 0 220px;
}

.detail-feature-card {
  overflow: hidden;
  border-radius: 28px;
  background: rgba(18, 18, 18, .94);
}

.detail-media {
  position: relative;
  height: 590px;
  overflow: hidden;
}

.detail-media > img:first-child {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 28%;
}

.detail-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.08));
  pointer-events: none;
}

.detail-play-button {
  z-index: 2;
}

.detail-meta {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 38px 54px 42px;
  background: rgba(24, 24, 23, .96);
}

.detail-meta h1 {
  margin: 0;
  color: #c8aa6f;
  font-family: 'Unbounded', sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.social-icons {
  display: block;
  width: 222px;
  height: 20px;
  margin-top: 24px;
}

.release-badge {
  flex: 0 0 auto;
  border: 1px solid #c8aa6f;
  border-radius: 999px;
  padding: 15px 24px 13px;
  color: #c8aa6f;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-copy {
  padding: 38px 22px 0;
}

.detail-tagline p {
  margin: 0 0 7px;
  color: #f3ede1;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.22;
}

.synopsis {
  margin-top: 82px;
}

.synopsis h2 {
  margin: 0 0 24px;
  color: #c8aa6f;
  font-family: 'Unbounded', sans-serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
}

.synopsis p {
  max-width: 1230px;
  margin: 0 0 24px;
  color: #f3ede1;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.38;
}

@media (max-width: 1100px) {
  .project-detail-header {
    width: calc(100% - 70px);
    padding-top: 48px;
  }

  .project-detail-inner {
    width: calc(100% - 80px);
    padding-top: 120px;
  }

  .detail-media {
    height: 500px;
  }

  .detail-meta {
    padding-inline: 40px;
  }

  .detail-meta h1 {
    font-size: 34px;
  }

  .release-badge {
    font-size: 12px;
  }
}

@media (max-width: 800px) {
  .project-detail-shell {
    background-attachment: scroll;
  }

  .project-detail-header.site-header {
    width: 100%;
    margin: 0;
    padding: 25px 24px 0;
  }

  .project-detail-inner {
    width: calc(100% - 40px);
    padding: 82px 0 120px;
  }

  .detail-feature-card {
    border-radius: 18px;
  }

  .detail-media {
    height: clamp(300px, 61vw, 470px);
  }

  .detail-media > img:first-child {
    object-position: 42% top;
  }

  .detail-meta {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    padding: 30px 30px 34px;
  }

  .detail-meta h1 {
    font-size: clamp(27px, 5.6vw, 36px);
  }

  .social-icons {
    width: 195px;
    height: auto;
  }

  .release-badge {
    white-space: normal;
    text-align: center;
  }

  .detail-copy {
    padding: 34px 8px 0;
  }

  .detail-tagline p {
    font-size: clamp(23px, 4.5vw, 30px);
  }

  .synopsis {
    margin-top: 62px;
  }

  .synopsis p {
    font-size: clamp(18px, 3.5vw, 23px);
  }
}

@media (max-width: 560px) {
  .project-detail-header.site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .project-detail-inner {
    width: calc(100% - 30px);
    padding-top: 64px;
  }

  .detail-media {
    height: 300px;
  }

  .detail-media > img:first-child {
    object-position: 35% top;
  }

  .detail-meta {
    padding: 25px 22px 28px;
  }

  .detail-meta h1 {
    font-size: 25px;
  }

  .detail-copy {
    padding-inline: 4px;
  }

  .detail-tagline p {
    font-size: 22px;
  }

  .synopsis h2 {
    font-size: 19px;
  }

  .synopsis p {
    font-size: 18px;
    line-height: 1.5;
  }
}

/* Awards & Festivals page ------------------------------------------------ */
.awards-page {
  min-height: 100%;
  background: #292925;
}

.awards-shell {
  min-height: 100svh;
  background: #292925;
}

.awards-hero {
  position: relative;
  min-height: clamp(610px, 36.7vw, 752px);
  overflow: hidden;
  background-image: url("../assets/images/awards-hero.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.awards-header {
  top: 88px;
  left: 7.1%;
  right: 7.1%;
}

.awards-hero-copy {
  position: absolute;
  left: 50%;
  top: 59%;
  width: min(1280px, 76vw);
  transform: translate(-50%, -50%);
  text-align: center;
}

.awards-hero-copy h1 {
  margin: 0;
  color: #f4eee2;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(42px, 3.25vw, 60px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.awards-content {
  position: relative;
  overflow: hidden;
  background-color: #2a2a27;
  background-image:
    linear-gradient(rgba(42, 42, 39, 0.56), rgba(42, 42, 39, 0.68)),
    url("../assets/images/projects-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

.awards-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(28, 28, 26, 0.20);
}

.awards-inner {
  position: relative;
  z-index: 1;
  width: min(1420px, 83.5vw);
  margin: 0 auto;
  padding: 108px 0 150px;
}

.awards-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.award-filter {
  min-width: 218px;
  height: 52px;
  padding: 0 29px;
  border: 1px solid rgba(197, 163, 95, 0.86);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  color: #f1ece1;
  background: rgba(45, 44, 40, 0.24);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.award-filter:last-child {
  min-width: 290px;
}

.award-filter span {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-1px);
}

.award-filter.is-active {
  background:
    linear-gradient(90deg, rgba(166, 126, 50, 0.80), rgba(98, 78, 45, 0.44) 62%, rgba(42, 41, 38, 0.42));
}

.award-filter:hover,
.award-filter:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(222, 187, 116, 0.98);
}

.awards-intro {
  margin: 76px 0 0;
  color: #f4eee2;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(34px, 2.42vw, 45px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: center;
}

.recognition-list {
  display: grid;
  gap: 118px;
  margin-top: 190px;
}

.recognition-item {
  width: 100%;
}

.recognition-topline {
  min-height: 65px;
  padding: 0 23px 23px;
  border-bottom: 1px solid rgba(197, 163, 95, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.recognition-topline h3,
.recognition-topline time,
.recognition-item p {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(28px, 1.94vw, 36px);
  font-weight: 500;
  line-height: 1.15;
}

.recognition-topline h3,
.recognition-topline time {
  margin: 0;
  color: var(--gold-soft);
}

.recognition-item p {
  margin: 42px 23px 0;
  color: #f2ede3;
}

@media (max-width: 1100px) {
  .awards-hero {
    min-height: 600px;
  }

  .awards-header {
    top: 54px;
    left: 6vw;
    right: 6vw;
  }

  .awards-inner {
    width: min(920px, 88vw);
  }

  .awards-filters {
    gap: 18px;
  }

  .award-filter,
  .award-filter:last-child {
    min-width: 0;
    padding-inline: 22px;
    font-size: 15px;
  }

  .recognition-list {
    margin-top: 145px;
  }
}

@media (max-width: 800px) {
  .awards-hero {
    min-height: 680px;
    background-position: 42% center;
  }

  .awards-header.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 25px 24px;
  }

  .awards-hero-copy {
    top: 63%;
    width: calc(100% - 48px);
  }

  .awards-hero-copy h1 {
    font-size: clamp(34px, 8vw, 50px);
    line-height: 1.13;
  }

  .awards-content {
    background-attachment: scroll;
  }

  .awards-inner {
    width: calc(100% - 40px);
    padding: 72px 0 100px;
  }

  .awards-filters {
    flex-wrap: wrap;
    gap: 12px;
  }

  .award-filter,
  .award-filter:last-child {
    height: 46px;
    padding: 0 18px;
    gap: 15px;
    font-size: 13px;
  }

  .awards-intro {
    margin-top: 58px;
    font-size: clamp(30px, 6vw, 40px);
  }

  .recognition-list {
    gap: 82px;
    margin-top: 110px;
  }

  .recognition-topline {
    padding-inline: 10px;
  }

  .recognition-topline h3,
  .recognition-topline time,
  .recognition-item p {
    font-size: clamp(23px, 4.4vw, 31px);
  }

  .recognition-item p {
    margin: 30px 10px 0;
  }
}

@media (max-width: 560px) {
  .awards-hero {
    min-height: 610px;
    background-position: 38% center;
  }

  .awards-header.site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .awards-hero-copy {
    top: 65%;
    width: calc(100% - 34px);
  }

  .awards-hero-copy h1 {
    font-size: clamp(31px, 9vw, 42px);
  }

  .awards-inner {
    width: calc(100% - 30px);
    padding-top: 58px;
  }

  .awards-filters {
    align-items: stretch;
    flex-direction: column;
    width: min(290px, 100%);
    margin: 0 auto;
  }

  .award-filter,
  .award-filter:last-child {
    width: 100%;
    justify-content: space-between;
    padding-inline: 24px;
  }

  .awards-intro {
    margin-top: 52px;
    font-size: 29px;
  }

  .recognition-list {
    gap: 70px;
    margin-top: 88px;
  }

  .recognition-topline {
    min-height: 0;
    padding: 0 4px 18px;
    align-items: flex-start;
    gap: 18px;
  }

  .recognition-topline h3,
  .recognition-topline time,
  .recognition-item p {
    font-size: 21px;
  }

  .recognition-topline time {
    flex: 0 0 auto;
  }

  .recognition-item p {
    margin: 24px 4px 0;
  }
}

/* Partners page ---------------------------------------------------------- */
.partners-page {
  min-height: 100%;
  background: #292925;
}

.partners-shell {
  min-height: 100svh;
  background: #292925;
}

.partners-hero {
  position: relative;
  min-height: clamp(610px, 38.5vw, 790px);
  overflow: hidden;
  background-color: #282826;
}

/* Keep content fully saturated; apply the cinematic treatment only to the hero image. */
.partners-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 24, 23, 0.30), rgba(20, 20, 19, 0.52)),
    url("../assets/images/partners-hero.png") center 54% / cover no-repeat;
  filter: grayscale(0.84) saturate(0.28) brightness(0.76);
  transform: scale(1.002);
}

.partners-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(31, 31, 30, 0.14);
}

.partners-header {
  z-index: 4;
  top: 87px;
  left: 7.15%;
  right: 7.15%;
}

.partners-hero-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 55.5%;
  width: min(1280px, 76vw);
  transform: translate(-50%, -50%);
  text-align: center;
}

.partners-hero-copy h1 {
  margin: 0;
  color: #f3ecdc;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(42px, 3.25vw, 60px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.036em;
}

.partners-content {
  position: relative;
  overflow: hidden;
  background-color: #2a2a27;
  background-image:
    linear-gradient(rgba(42, 42, 39, 0.50), rgba(42, 42, 39, 0.64)),
    url("../assets/images/projects-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

.partners-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 68% 14%, rgba(202, 166, 91, 0.06), transparent 33%), rgba(25, 25, 23, 0.10);
}

.partners-inner {
  position: relative;
  z-index: 1;
  width: min(1760px, 85vw);
  margin: 0 auto;
  padding: 150px 0 190px;
  text-align: center;
}

.partners-inner h2 {
  margin: 0;
  color: var(--gold-soft);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(42px, 3.25vw, 60px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.partner-types {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 48px 106px;
  margin-top: 74px;
}

.partner-pill {
  min-height: 90px;
  padding: 15px 28px;
  border: 1px solid rgba(220, 216, 206, 0.58);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f1ece2;
  background: rgba(25, 25, 23, 0.72);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.partner-pill:nth-child(1),
.partner-pill:nth-child(2),
.partner-pill:nth-child(3) {
  grid-column: span 2;
}

.partner-pill:nth-child(4) {
  grid-column: 2 / span 2;
}

.partner-pill:nth-child(5) {
  grid-column: 4 / span 2;
}

.partner-logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 68px;
  margin-top: 170px;
  padding: 0 36px;
}

.partner-logos img {
  display: block;
  width: min(100%, 238px);
  height: auto;
  justify-self: center;
}

.partner-contact {
  width: 300px;
  min-height: 68px;
  margin: 145px auto 0;
  padding: 0 40px;
  border: 1px solid rgba(201, 165, 92, 0.78);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f2ede3;
  background: linear-gradient(90deg, rgba(165, 126, 50, 0.76), rgba(102, 81, 46, 0.50) 58%, rgba(44, 43, 40, 0.62));
  font-family: "Manrope", Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  transition: transform 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.partner-contact:hover,
.partner-contact:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(222, 187, 116, 0.96);
  filter: brightness(1.07);
}

@media (max-width: 1280px) {
  .partners-inner {
    width: min(1120px, 88vw);
  }

  .partner-types {
    gap: 32px 50px;
  }

  .partner-pill {
    min-height: 72px;
    font-size: 19px;
  }

  .partner-logos {
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .partners-hero {
    min-height: 650px;
    background-position: 57% center;
  }

  .partners-header {
    top: 54px;
    left: 6vw;
    right: 6vw;
  }

  .partners-hero-copy {
    top: 62%;
    width: min(760px, 86vw);
  }

  .partners-inner {
    width: min(780px, 88vw);
    padding: 105px 0 130px;
  }

  .partner-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 58px;
  }

  .partner-pill:nth-child(n) {
    grid-column: auto;
  }

  .partner-pill:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 11px);
    justify-self: center;
  }

  .partner-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 38px;
    margin-top: 115px;
    padding: 0;
  }

  .partner-contact {
    margin-top: 105px;
  }
}

@media (max-width: 800px) {
  .partners-header.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 25px 24px;
  }

  .partners-content {
    background-attachment: scroll;
  }

  .partners-hero-copy h1,
  .partners-inner h2 {
    font-size: clamp(34px, 8vw, 50px);
  }
}

@media (max-width: 560px) {
  .partners-hero {
    min-height: 600px;
    background-position: 64% center;
  }

  .partners-header.site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .partners-hero-copy {
    top: 63%;
    width: calc(100% - 36px);
  }

  .partners-hero-copy h1 {
    font-size: clamp(31px, 9vw, 42px);
  }

  .partners-inner {
    width: calc(100% - 34px);
    padding: 78px 0 96px;
  }

  .partners-inner h2 {
    font-size: 34px;
  }

  .partner-types {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 44px;
  }

  .partner-pill,
  .partner-pill:last-child {
    grid-column: auto;
    width: 100%;
    min-height: 58px;
    font-size: 17px;
  }

  .partner-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 26px;
    margin-top: 86px;
  }

  .partner-logos img {
    width: min(100%, 170px);
  }

  .partner-contact {
    width: 238px;
    min-height: 58px;
    margin-top: 84px;
    font-size: 19px;
  }
}

/* Contact page ----------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-page {
  min-height: 100%;
  background: #2b2b28;
}

.contact-shell {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background-color: #2b2b28;
  /* Background artwork shown at 15% visual opacity over the base color. */
  background-image:
    linear-gradient(rgba(43, 43, 40, 0.85), rgba(43, 43, 40, 0.85)),
    url("../assets/images/projects-bg.jpg");
  background-size: cover;
  background-position: center top;
}

.contact-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 70% 23%, rgba(197, 163, 95, 0.05), transparent 34%), rgba(18, 18, 16, 0.10);
}

.contact-header {
  top: 86px;
  left: 7.1%;
  right: 7.1%;
}

.contact-content {
  width: 100%;
  min-height: 100svh;
  padding: 255px 0 120px;
}

.contact-inner {
  width: min(1630px, 79.7vw);
  margin: 0 auto;
}

.contact-inner h1 {
  max-width: 1270px;
  margin: 88px 0 0;
  color: #f4eee2;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(44px, 3.25vw, 60px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.035em;
}

.contact-lead {
  margin: 62px 0 0;
  color: #f3eee4;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(24px, 1.74vw, 32px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.contact-lead strong {
  font-weight: 700;
}

.contact-form {
  margin-top: 93px;
}

.contact-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.72fr);
  gap: 145px;
}

.contact-field {
  display: block;
}

.contact-field input {
  width: 100%;
  height: 58px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(197, 163, 95, 0.82);
  border-radius: 0;
  outline: none;
  color: #f3eee4;
  background: transparent;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.contact-field input::placeholder,
.contact-message textarea::placeholder {
  color: rgba(244, 238, 226, 0.95);
  opacity: 1;
}

.contact-field input:focus {
  border-bottom-color: #dfbf76;
}

.contact-message {
  display: block;
  margin-top: 67px;
}

.contact-message textarea {
  display: block;
  width: 100%;
  min-height: 420px;
  resize: vertical;
  padding: 38px 42px;
  border: 1px solid rgba(197, 163, 95, 0.92);
  border-radius: 27px;
  outline: none;
  color: #f3eee4;
  background: rgba(2, 2, 2, 0.28);
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  transition: border-color 180ms ease, background 180ms ease;
}

.contact-message textarea:focus {
  border-color: #dfbf76;
  background: rgba(10, 10, 9, 0.28);
}

.contact-submit {
  min-width: 280px;
  height: 76px;
  margin-top: 54px;
  padding: 0 38px;
  border: 1px solid rgba(197, 163, 95, 0.98);
  border-radius: 999px;
  color: var(--gold-soft);
  background: #020202;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  transform: translateY(-2px);
  color: #11110f;
  background: var(--gold-soft);
}

.awards-header .brand img[src$="logo-color.png"] {
  width: clamp(220px, 15.3vw, 313px);
  height: auto;
  opacity: 1;
  filter: none;
}

@media (max-width: 1100px) {
  .contact-header {
    top: 54px;
    left: 6vw;
    right: 6vw;
  }

  .contact-content {
    padding-top: 210px;
  }

  .contact-inner {
    width: min(920px, 88vw);
  }

  .contact-inner h1 {
    margin-top: 68px;
  }

  .contact-fields {
    gap: 70px;
  }
}

@media (max-width: 800px) {
  .contact-shell {
    background-position: 58% top;
  }

  .contact-header.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 25px 24px;
  }

  .contact-content {
    min-height: auto;
    padding: 165px 0 90px;
  }

  .contact-inner {
    width: calc(100% - 48px);
  }

  .contact-inner h1 {
    margin-top: 55px;
    font-size: clamp(39px, 7.2vw, 52px);
    line-height: 1.18;
  }

  .contact-lead {
    margin-top: 44px;
    font-size: clamp(22px, 4vw, 28px);
  }

  .contact-form {
    margin-top: 70px;
  }

  .contact-fields {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-message {
    margin-top: 45px;
  }

  .contact-message textarea {
    min-height: 320px;
    padding: 28px 26px;
    border-radius: 22px;
  }

  .contact-submit {
    min-width: 220px;
    height: 64px;
  }
}

@media (max-width: 560px) {
  .contact-header.site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .contact-content {
    padding-top: 130px;
  }

  .contact-inner {
    width: calc(100% - 34px);
  }

  .contact-inner h1 {
    margin-top: 44px;
    font-size: 34px;
    line-height: 1.2;
  }

  .contact-lead {
    margin-top: 35px;
    font-size: 21px;
    line-height: 1.45;
  }

  .contact-form {
    margin-top: 56px;
  }

  .contact-field input {
    height: 52px;
  }

  .contact-message {
    margin-top: 36px;
  }

  .contact-message textarea {
    min-height: 280px;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .contact-submit {
    width: 100%;
    min-width: 0;
    margin-top: 34px;
  }

  .desktop-break {
    display: none;
  }
}


/* ======================================================================
   Designer review normalization — v8.2
   Applies comments received on the reviewed v8 build while preserving
   later Contact-page content changes.
   ====================================================================== */

:root {
  --desktop-header-top: clamp(58px, 7.4vh, 78px);
  --desktop-header-side: 7.15%;
  --desktop-logo-width: clamp(195px, 13.2vw, 225px);
  --desktop-nav-width: clamp(515px, 31.5vw, 610px);
  --desktop-nav-height: clamp(74px, 8.2vh, 92px);
  --filter-bg-default: rgba(8, 8, 7, 0.15);
  --filter-bg-gold: linear-gradient(90deg, rgba(211, 180, 111, 0.72), rgba(197, 163, 95, 0.50) 58%, rgba(112, 88, 48, 0.42));
}

/* Keep logo, nav sizing and header alignment consistent across pages. */
.brand img,
.awards-header .brand img[src$="logo.svg"] {
  width: var(--desktop-logo-width);
  height: auto;
}

.main-nav {
  width: var(--desktop-nav-width);
  min-height: var(--desktop-nav-height);
}

@media (min-width: 801px) {
  .site-header,
  .awards-header,
  .partners-header,
  .contact-header {
    top: var(--desktop-header-top);
    left: var(--desktop-header-side);
    right: var(--desktop-header-side);
  }

  /* These two headers participate in document flow; use matching horizontal
     placement and vertical offset without converting them to absolute. */
  .projects-header,
  .project-detail-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    margin-left: var(--desktop-header-side);
    margin-right: var(--desktop-header-side);
    padding-top: var(--desktop-header-top);
  }
}

/* Partners review: two-line title, preserving the 60px desktop header scale. */
.partners-hero-copy h1 span {
  display: block;
}

/* Consistent filter states: neutral by default, light gold only on hover
   or when selected. This applies to Awards and Project status filters. */
.award-filter,
.project-filter {
  background: var(--filter-bg-default);
}

.award-filter.is-active,
.project-filter.is-active,
.award-filter:hover,
.award-filter:focus-visible,
.project-filter:hover,
.project-filter:focus-visible {
  background: var(--filter-bg-gold);
  border-color: rgba(222, 187, 116, 0.98);
  color: #fff5df;
}

/* Contact: actual background image layer at 15% opacity. */
.contact-shell {
  background-color: #2b2b28;
  background-image: none;
}

.contact-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/projects-bg.jpg") center top / cover no-repeat;
  opacity: 0.15;
}

.contact-shell::before {
  z-index: 1;
  background: radial-gradient(circle at 70% 23%, rgba(197, 163, 95, 0.05), transparent 34%), rgba(18, 18, 16, 0.10);
}

.contact-header,
.contact-content {
  position: relative;
  z-index: 2;
}

/* Contact message rectangle and CTA use 28% fill opacity; border/text stay
   fully opaque so the form remains readable. */
.contact-message textarea {
  background: rgba(0, 0, 0, 0.28);
}

.contact-message textarea:focus {
  background: rgba(0, 0, 0, 0.36);
}

.contact-submit {
  background: rgba(0, 0, 0, 0.28);
}

/* Preserve a clear interactive state without changing the requested resting opacity. */
.contact-submit:hover,
.contact-submit:focus-visible {
  background: var(--gold-soft);
}


/* v8.3 — Figma background fill normalization ---------------------------
   The shared Shutterstock particle texture sits against/under a #3B3B3B
   page fill in the design. Apply a consistent grey-black treatment to all
   sections that use that texture, without affecting unrelated hero images. */
:root {
  --shutterstock-fill: #3B3B3B;
  --shutterstock-overlay: rgba(59, 59, 59, 0.46);
}

/* About: vertical particle texture */
.about-content {
  background-color: var(--shutterstock-fill);
  background-image:
    linear-gradient(var(--shutterstock-overlay), var(--shutterstock-overlay)),
    url("../assets/images/gold-texture.png");
}

/* Projects: landscape particle texture */
.projects-page,
.projects-shell {
  background-color: var(--shutterstock-fill);
}

.projects-shell {
  background-image:
    linear-gradient(var(--shutterstock-overlay), var(--shutterstock-overlay)),
    url("../assets/images/projects-bg.jpg");
}

/* Individual project / HIJRA detail */
.project-detail-page,
.project-detail-shell {
  background-color: var(--shutterstock-fill);
}

.project-detail-shell {
  background-image:
    linear-gradient(var(--shutterstock-overlay), var(--shutterstock-overlay)),
    url("../assets/images/project-detail-bg.jpg");
}

/* Awards */
.awards-content {
  background-color: var(--shutterstock-fill);
  background-image:
    linear-gradient(var(--shutterstock-overlay), var(--shutterstock-overlay)),
    url("../assets/images/projects-bg.jpg");
}

/* Partners */
.partners-content {
  background-color: var(--shutterstock-fill);
  background-image:
    linear-gradient(var(--shutterstock-overlay), var(--shutterstock-overlay)),
    url("../assets/images/projects-bg.jpg");
}

/* Contact: retain the separately requested 15% texture opacity, but use the
   exact Figma fill colour behind it. */
.contact-page,
.contact-shell {
  background-color: var(--shutterstock-fill);
}

/* ======================================================================
   v8.4 — texture opacity + viewport/header corrections
   ====================================================================== */

:root {
  --texture-base: #3B3B3B;
  /* An 85% solid-colour layer leaves the source texture visually at 15%. */
  --texture-dim-15: rgba(59, 59, 59, 0.85);
}

/* Prevent accidental page-level horizontal scrolling while individual
   components remain responsive. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Shared Shutterstock / particle treatment: #3B3B3B base with the source
   image visible at approximately 15%, matching the Figma treatment. */
.about-content {
  background-color: var(--texture-base);
  background-image:
    linear-gradient(var(--texture-dim-15), var(--texture-dim-15)),
    url("../assets/images/gold-texture.png");
}

.projects-page,
.projects-shell {
  background-color: var(--texture-base);
}

.projects-shell {
  background-image:
    linear-gradient(var(--texture-dim-15), var(--texture-dim-15)),
    url("../assets/images/projects-bg.jpg");
}

.project-detail-page,
.project-detail-shell {
  background-color: var(--texture-base);
}

.project-detail-shell {
  background-image:
    linear-gradient(var(--texture-dim-15), var(--texture-dim-15)),
    url("../assets/images/project-detail-bg.jpg");
}

.awards-content {
  background-color: var(--texture-base);
  background-image:
    linear-gradient(var(--texture-dim-15), var(--texture-dim-15)),
    url("../assets/images/projects-bg.jpg");
}

.partners-content {
  background-color: var(--texture-base);
  background-image:
    linear-gradient(var(--texture-dim-15), var(--texture-dim-15)),
    url("../assets/images/projects-bg.jpg");
}

/* Contact already uses a dedicated pseudo-element so its texture opacity is
   truly 15%. Keep the same #3B3B3B base. */
.contact-page,
.contact-shell {
  background-color: var(--texture-base);
}

.contact-shell::after {
  opacity: 0.15;
}

/* The desktop header was too wide in the 801–1200px range. Compress it
   gracefully before the mobile menu breakpoint so Contact never sits outside
   the viewport and navigation never causes horizontal scrolling. */
@media (min-width: 801px) and (max-width: 1200px) {
  .site-header,
  .awards-header,
  .partners-header,
  .contact-header {
    left: 4vw;
    right: 4vw;
  }

  .projects-header,
  .project-detail-header {
    margin-left: 4vw;
    margin-right: 4vw;
  }

  .brand img,
  .awards-header .brand img[src$="logo.svg"] {
    width: clamp(150px, 18vw, 185px);
  }

  .main-nav {
    width: min(500px, 61vw);
    min-height: 70px;
    padding-inline: 22px;
    gap: 13px;
  }

  .main-nav a {
    font-size: 13px;
  }
}

/* v8.4 hotfix: the Contact header must remain absolutely positioned.
   v8.2 temporarily made it relative to establish stacking above the texture,
   which also shifted a full-width header to the right and created horizontal
   page overflow. */
.contact-header {
  position: absolute;
  z-index: 2;
}

/* Use hidden rather than clip for widest browser compatibility. */
html,
body {
  overflow-x: hidden;
}


/* ======================================================================
   v8.5 — language selector + navigation stability
   ====================================================================== */

/* Use a deterministic header flow: logo on the left, nav + language on the
   right. This removes the remaining chance of the language/nav cluster
   pushing the viewport sideways at intermediate desktop widths. */
.site-header {
  justify-content: flex-start;
}

.site-header .brand {
  margin-right: auto;
}

.main-nav {
  flex: 0 0 auto;
}

.language-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-left: 26px;
  color: #f3ecdc;
  font-family: "Inter", Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.language-switch .lang-current {
  font-weight: 700;
}

.language-switch .lang-option {
  font-weight: 400;
}

.language-switch .lang-separator {
  font-weight: 400;
  opacity: 0.8;
}

/* Ensure the document itself can never retain an inherited horizontal
   scroll range when following navigation links between local/static pages. */
html,
body,
main {
  width: 100%;
  max-width: 100%;
}

/* Intermediate desktop: reserve explicit room for EN | عربي. */
@media (min-width: 801px) and (max-width: 1200px) {
  .main-nav {
    width: min(440px, 54vw);
    min-height: 68px;
    padding-inline: 18px;
    gap: 10px;
  }

  .main-nav a {
    font-size: 12px;
  }

  .language-switch {
    margin-left: 15px;
    gap: 5px;
    font-size: 16px;
  }
}

/* Mobile/tablet: language stays visible beside the hamburger while the nav
   itself remains in the existing dropdown. */
@media (max-width: 800px) {
  .site-header {
    justify-content: flex-start;
  }

  .site-header .brand {
    margin-right: auto;
  }

  .language-switch {
    order: 2;
    margin-left: 0;
    margin-right: 13px;
    font-size: 20px;
  }

  .menu-toggle {
    order: 3;
    margin-left: 0;
  }

  .main-nav {
    order: 4;
  }
}

@media (max-width: 430px) {
  .language-switch {
    gap: 4px;
    margin-right: 9px;
    font-size: 17px;
  }
}


/* ======================================================================
   v8.6 — contact click-layer fix + language hover/focus states
   ====================================================================== */

/* Contact bug fix: the content section was painted at the same z-index as
   the header and comes later in the DOM, so its transparent box intercepted
   pointer events over the visible navigation. Keep the header definitively
   above all Contact content and decorative layers. */
.contact-header {
  z-index: 20;
  pointer-events: auto;
}

.contact-content {
  z-index: 2;
}

.contact-header .main-nav,
.contact-header .brand,
.contact-header .language-switch,
.contact-header .menu-toggle {
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

/* Language selector is intentionally visual-only until Arabic content is
   supplied, but both choices should clearly respond to hover/focus. */
.language-switch .lang-current,
.language-switch .lang-option {
  cursor: pointer;
  transition: color 160ms ease, font-weight 160ms ease, opacity 160ms ease;
}

.language-switch .lang-current:hover,
.language-switch .lang-current:focus-visible,
.language-switch .lang-option:hover,
.language-switch .lang-option:focus-visible {
  color: var(--gold-soft);
  font-weight: 700;
  outline: none;
}


/* v8.6 refinement: real language controls + stronger visible interaction. */
.language-switch button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 4px 1px;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.language-switch button:hover,
.language-switch button:focus-visible {
  color: var(--gold-soft);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(211, 180, 111, 0.26);
  outline: none;
}

.language-switch button:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Keep English visually selected until Arabic pages are introduced. */
.language-switch .lang-current {
  font-weight: 700;
}

.language-switch .lang-option {
  font-weight: 400;
}

/* Absolute guarantee that Contact navigation remains above the full-page
   content box at all desktop and mobile breakpoints. */
.contact-shell > .contact-header {
  position: absolute !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

.contact-shell > .contact-content {
  position: relative;
  z-index: 2;
}

.contact-shell::before,
.contact-shell::after {
  pointer-events: none !important;
}

/* ======================================================================
   v8.7 — Arabic / RTL pages
   ====================================================================== */

/* Language controls are links now so each language has a shareable page. */
.language-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 1px;
  color: inherit;
  font-family: "Inter", "Noto Sans Arabic", Arial, sans-serif;
  font-size: inherit;
  line-height: 1;
  text-decoration: none;
}

.language-switch a:hover,
.language-switch a:focus-visible {
  color: var(--gold-soft);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(211, 180, 111, 0.26);
  outline: none;
}

.language-switch a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Arabic typography. Noto Sans Arabic is used as the Arabic counterpart to
   the Latin display/body families while retaining the same size hierarchy. */
body.arabic-page,
body.arabic-page h1,
body.arabic-page h2,
body.arabic-page h3,
body.arabic-page p,
body.arabic-page a:not(.language-switch a),
body.arabic-page button,
body.arabic-page input,
body.arabic-page textarea,
body.arabic-page time,
body.arabic-page .offer-pill,
body.arabic-page .partner-pill,
body.arabic-page .release-badge {
  font-family: "Noto Sans Arabic", Arial, sans-serif !important;
}

/* Keep the physical header composition identical to English: logo left,
   navigation + language control right. Arabic text itself remains RTL. */
body.arabic-page .site-header {
  direction: ltr;
}

body.arabic-page .main-nav {
  direction: ltr;
}

body.arabic-page .main-nav a {
  direction: rtl;
  font-family: "Noto Sans Arabic", Arial, sans-serif !important;
  font-weight: 400;
}

body.arabic-page .language-switch {
  direction: ltr;
  font-family: "Inter", "Noto Sans Arabic", Arial, sans-serif;
}

/* Arabic is the selected language on Arabic pages. */
body.arabic-page .language-switch .lang-current {
  font-weight: 700;
}

body.arabic-page .language-switch .lang-option {
  font-weight: 400;
}

/* Home: retain the image-safe left copy zone but align Arabic naturally. */
body.arabic-page .hero-copy {
  direction: rtl;
  text-align: right;
}

body.arabic-page .hero-copy h1 {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

body.arabic-page .hero-title-light { font-weight: 400; }
body.arabic-page .hero-title-heavy { font-weight: 800; }

body.arabic-page .hero-copy p {
  max-width: 820px;
  line-height: 1.75;
  letter-spacing: 0;
}

body.arabic-page .projects-button,
body.arabic-page .explore-button {
  direction: rtl;
}

/* About */
body.arabic-page .about-intro h1,
body.arabic-page .about-section h2,
body.arabic-page .philosophy-lead,
body.arabic-page .philosophy-copy {
  letter-spacing: 0;
}

body.arabic-page .about-intro p,
body.arabic-page .philosophy-lead,
body.arabic-page .philosophy-copy {
  line-height: 1.75;
}

body.arabic-page .person-row {
  text-align: right;
  direction: ltr;
}

body.arabic-page .person-copy {
  direction: rtl;
  text-align: right;
}

body.arabic-page .person-role,
body.arabic-page .person-copy h3,
body.arabic-page .person-copy p:not(.person-role) {
  letter-spacing: 0;
}

body.arabic-page .person-copy p:not(.person-role) {
  line-height: 1.75;
}

/* Projects */
body.arabic-page .projects-intro h1,
body.arabic-page .project-copy h2,
body.arabic-page .project-copy p {
  letter-spacing: 0;
}

body.arabic-page .projects-intro h1 { line-height: 1.5; }
body.arabic-page .project-filters { direction: rtl; }
body.arabic-page .project-filter { direction: rtl; }
body.arabic-page .project-meta { flex-direction: row-reverse; }
body.arabic-page .project-copy { text-align: right; }

/* Project detail */
body.arabic-page .detail-meta {
  flex-direction: row-reverse;
  direction: rtl;
}

body.arabic-page .detail-meta > div { text-align: right; }
body.arabic-page .detail-meta h1 { letter-spacing: 0; }
body.arabic-page .social-icons { margin-left: 0; margin-right: 0; }
body.arabic-page .release-badge {
  direction: rtl;
  text-transform: none;
  letter-spacing: 0;
}

body.arabic-page .detail-copy {
  direction: rtl;
  text-align: right;
}

body.arabic-page .detail-tagline p,
body.arabic-page .synopsis p {
  line-height: 1.75;
}

body.arabic-page .synopsis h2 { letter-spacing: 0; }
body.arabic-page .synopsis p { max-width: 1230px; }

/* Awards */
body.arabic-page .awards-hero-copy,
body.arabic-page .awards-intro { direction: rtl; }
body.arabic-page .awards-hero-copy h1,
body.arabic-page .awards-intro { letter-spacing: 0; }
body.arabic-page .awards-filters { direction: rtl; }
body.arabic-page .award-filter { direction: rtl; }
body.arabic-page .recognition-list { direction: rtl; }
body.arabic-page .recognition-topline { flex-direction: row-reverse; }
body.arabic-page .recognition-topline h3,
body.arabic-page .recognition-item p { text-align: right; letter-spacing: 0; }

/* Partners */
body.arabic-page .partners-hero-copy,
body.arabic-page .partners-inner { direction: rtl; }
body.arabic-page .partners-hero-copy h1,
body.arabic-page .partners-inner h2 { letter-spacing: 0; }
body.arabic-page .partner-pill { white-space: normal; }

/* Contact */
body.arabic-page .contact-inner {
  direction: rtl;
  text-align: right;
}
body.arabic-page .contact-inner h1,
body.arabic-page .contact-lead { letter-spacing: 0; }
body.arabic-page .contact-lead { line-height: 1.7; }
body.arabic-page .contact-fields { direction: rtl; }
body.arabic-page .contact-field input,
body.arabic-page .contact-message textarea {
  direction: rtl;
  text-align: right;
}
body.arabic-page .contact-submit { float: right; }

@media (max-width: 800px) {
  body.arabic-page .main-nav {
    text-align: right;
  }
  body.arabic-page .main-nav a {
    width: 100%;
    text-align: right;
  }
  body.arabic-page .hero-copy p,
  body.arabic-page .about-intro p,
  body.arabic-page .philosophy-copy,
  body.arabic-page .synopsis p,
  body.arabic-page .contact-lead {
    line-height: 1.65;
  }
  body.arabic-page .project-meta,
  body.arabic-page .detail-meta {
    flex-direction: column;
    align-items: stretch;
  }
  body.arabic-page .explore-button,
  body.arabic-page .release-badge {
    align-self: flex-start;
  }
}


/* v8.14: autoplay teaser previews on Projects page */
.project-teaser {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #111;
}
.project-teaser-hijra { object-position: center center; }
.detail-media > video:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #111;
}
.project-copy h2 { max-width: 900px; }
@media (max-width: 800px) {
  .project-copy h2 { line-height: 1.15; }
}


/* ======================================================================
   v8.15 — project detail trailers, PDF downloads and expanded synopsis
   ====================================================================== */
.detail-youtube-media {
  background: #080808;
}

.detail-youtube-player {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Do not place the legacy image treatment above the interactive player. */
.detail-youtube-media::after {
  display: none;
}

.download-pdf-button {
  flex: 0 0 auto;
  min-width: 270px;
  height: 50px;
  padding: 0 34px;
  border: 1px solid #c8aa6f;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c8aa6f;
  background: rgba(0, 0, 0, .70);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.download-pdf-button:hover,
.download-pdf-button:focus-visible {
  color: #f4eee2;
  background: rgba(197, 163, 95, .25);
  transform: translateY(-2px);
  outline: none;
}

.synopsis-subtitle {
  max-width: 1230px;
  margin: 0 0 30px !important;
  color: #f3ede1 !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.synopsis-emphasis {
  color: #f3ede1 !important;
  font-weight: 700 !important;
}

.arabic-page .download-pdf-button {
  font-family: 'Noto Sans Arabic', sans-serif;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.arabic-page .synopsis-subtitle {
  font-family: 'Noto Sans Arabic', sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
}

@media (max-width: 800px) {
  .download-pdf-button {
    min-width: 220px;
    height: 48px;
  }

  .synopsis-subtitle {
    font-size: clamp(23px, 4.5vw, 29px) !important;
  }
}

@media (max-width: 560px) {
  .download-pdf-button {
    width: 100%;
    min-width: 0;
  }

  .synopsis-subtitle {
    font-size: 22px !important;
  }
}

/* ======================================================================
   v8.17 — mobile header / language / menu overlap fix
   Keep the three mobile controls in a dedicated top bar so page copy can
   never occupy the same visual space as the logo or language selector.
   ====================================================================== */
@media (max-width: 800px) {
  .site-header,
  .about-hero .site-header,
  .projects-header.site-header,
  .project-detail-header.site-header,
  .awards-header.site-header,
  .partners-header.site-header,
  .contact-header.site-header,
  .contact-shell > .contact-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 78px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    column-gap: 10px !important;
    direction: ltr !important;
    background: linear-gradient(180deg, rgba(43, 43, 40, .98) 0%, rgba(43, 43, 40, .94) 78%, rgba(43, 43, 40, .88) 100%) !important;
    border-bottom: 1px solid rgba(197, 163, 95, .12);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    z-index: 5000 !important;
    overflow: visible !important;
  }

  .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0 !important;
    position: relative;
    z-index: 5002;
    justify-self: start;
  }

  .site-header .brand img,
  .awards-header .brand img[src$="logo.svg"],
  .awards-header .brand img[src$="logo-color.png"] {
    width: min(145px, 37vw) !important;
    max-width: 145px !important;
    height: auto !important;
  }

  .site-header .language-switch {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    position: relative;
    z-index: 5002;
    justify-self: end;
    white-space: nowrap;
  }

  .site-header .language-switch a {
    min-width: 0;
    padding: 6px 1px;
  }

  .site-header .menu-toggle {
    grid-column: 3;
    grid-row: 1;
    order: initial;
    display: grid !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 5003;
    justify-self: end;
  }

  .site-header .main-nav {
    position: fixed !important;
    z-index: 4999 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 112px 28px 42px !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
    background: rgba(24, 24, 22, .985) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none !important;
  }

  .site-header .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-header .main-nav a,
  body.arabic-page .site-header .main-nav a {
    width: auto !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  /* Flow pages previously reserved only ~64–82px before their content.
     Account for the fixed 78px header explicitly. */
  .projects-inner,
  .project-detail-inner {
    padding-top: 112px !important;
  }

  .contact-content {
    padding-top: 112px !important;
  }

  .contact-inner h1 {
    margin-top: 22px !important;
  }

  /* Slightly tighter mobile contact typography prevents awkward three/four
     line breaks while preserving the hierarchy of the Figma design. */
  .contact-inner h1 {
    font-size: clamp(32px, 8.2vw, 43px) !important;
    line-height: 1.16 !important;
  }

  .contact-lead {
    font-size: clamp(19px, 5vw, 24px) !important;
    line-height: 1.48 !important;
  }

  body.arabic-page .contact-inner h1 {
    font-size: clamp(31px, 8vw, 42px) !important;
    line-height: 1.45 !important;
  }

  body.arabic-page .contact-lead {
    font-size: clamp(18px, 4.8vw, 23px) !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 430px) {
  .site-header,
  .about-hero .site-header,
  .projects-header.site-header,
  .project-detail-header.site-header,
  .awards-header.site-header,
  .partners-header.site-header,
  .contact-header.site-header,
  .contact-shell > .contact-header {
    height: 72px !important;
    padding: 11px 12px !important;
    column-gap: 7px !important;
  }

  .site-header .brand img,
  .awards-header .brand img[src$="logo.svg"],
  .awards-header .brand img[src$="logo-color.png"] {
    width: min(122px, 33vw) !important;
    max-width: 122px !important;
  }

  .site-header .language-switch {
    gap: 3px !important;
    font-size: 14px !important;
  }

  .site-header .menu-toggle {
    width: 38px !important;
    height: 38px !important;
  }

  .site-header .main-nav {
    padding-top: 100px !important;
  }

  .projects-inner,
  .project-detail-inner,
  .contact-content {
    padding-top: 98px !important;
  }

  .contact-inner h1 {
    margin-top: 12px !important;
    font-size: 31px !important;
  }

  .contact-lead {
    margin-top: 30px !important;
    font-size: 19px !important;
  }

  body.arabic-page .contact-inner h1 {
    font-size: 30px !important;
  }

  body.arabic-page .contact-lead {
    font-size: 18px !important;
  }
}

@media (max-width: 360px) {
  .site-header .brand img,
  .awards-header .brand img[src$="logo.svg"],
  .awards-header .brand img[src$="logo-color.png"] {
    width: 108px !important;
  }

  .site-header .language-switch {
    font-size: 13px !important;
  }

  .site-header .menu-toggle {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ======================================================================
   v8.18 — desktop visual consistency pass
   ====================================================================== */

/* About should use the same dark particle treatment as Partners. */
.about-content {
  background-color: var(--texture-base, #3B3B3B);
  background-image:
    linear-gradient(var(--texture-dim-15, rgba(59, 59, 59, 0.85)), var(--texture-dim-15, rgba(59, 59, 59, 0.85))),
    url("../assets/images/projects-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

/* About / Partners / Awards hero images occupy the full first viewport,
   matching the Home-page treatment. The particle background only begins
   after the visitor scrolls beyond the hero. */
.about-hero,
.partners-hero,
.awards-hero {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  aspect-ratio: auto;
}

/* Refine profile typography now that Chadi carries a full biography. */
.person-role {
  margin-bottom: 14px;
  font-size: clamp(22px, 1.35vw, 28px);
  line-height: 1.2;
}

.person-copy h3 {
  margin-bottom: 28px;
  font-size: clamp(28px, 1.85vw, 38px);
  line-height: 1.1;
}

.person-copy p:not(.person-role) {
  margin-bottom: 20px;
  font-size: clamp(17px, 1.05vw, 20px);
  line-height: 1.52;
}

.advisor-row .person-copy h3 {
  margin-bottom: 28px;
}

/* Chadi's supplied portrait should fill the frame; keep the top of the
   portrait and allow the lower body to crop where necessary. */
.advisor-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 1201px) {
  /* Increase the logo relative to the navigation capsule. */
  .site-header .brand img,
  .awards-header .brand img[src$="logo.svg"],
  .awards-header .brand img[src$="logo-color.png"] {
    width: clamp(240px, 14.8vw, 280px);
    max-width: 280px;
  }

  /* Match EN | عربي to the 14px desktop navigation text. */
  .site-header .language-switch {
    margin-left: 24px;
    gap: 6px;
    font-size: 14px;
  }
}

@media (min-width: 801px) and (max-width: 1200px) {
  /* Keep the larger-logo intent without reintroducing header overflow at
     intermediate desktop/tablet widths. */
  .site-header .brand img,
  .awards-header .brand img[src$="logo.svg"],
  .awards-header .brand img[src$="logo-color.png"] {
    width: clamp(185px, 19vw, 220px);
    max-width: 220px;
  }

  .site-header .language-switch {
    margin-left: 12px;
    gap: 5px;
    font-size: 12px;
  }
}

@media (max-width: 800px) {
  /* Full-screen hero remains consistent on mobile while the v8.17 fixed
     header continues to sit above it. */
  .about-hero,
  .partners-hero,
  .awards-hero {
    height: 100svh;
    min-height: 100svh;
  }

  .about-content {
    background-attachment: scroll;
  }
}


/* ======================================================================
   v8.19 — exact opening-frame posters for YouTube project trailers
   The YouTube iframe is created only after a user click, preventing
   YouTube's generated thumbnail from appearing before playback.
   ====================================================================== */
.detail-poster-media {
  position: relative;
  background: #080808;
}

.detail-trailer-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}

.detail-trailer-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  background: transparent;
  cursor: pointer;
  z-index: 3;
  transition: transform 180ms ease, filter 180ms ease;
}

.detail-trailer-play img {
  width: 88px;
  height: 88px;
  display: block;
}

.detail-trailer-play:hover,
.detail-trailer-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  filter: brightness(1.08);
  outline: none;
}

.detail-poster-media.is-playing .detail-trailer-poster,
.detail-poster-media.is-playing .detail-trailer-play {
  display: none;
}

.detail-poster-media .detail-youtube-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 2;
}

@media (max-width: 800px) {
  .detail-trailer-play,
  .detail-trailer-play img {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 480px) {
  .detail-trailer-play,
  .detail-trailer-play img {
    width: 62px;
    height: 62px;
  }
}


/* ======================================================================
   v8.20 — About hero copy repositioning
   Move the lead statement onto the hero image, keep the central circular
   Badr composition unobstructed, and let the supporting line lead the
   scrolled content so the page becomes shorter naturally.
   ====================================================================== */
.about-hero-copy {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 78%;
  width: min(1040px, 78vw);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.about-hero-copy h1 {
  margin: 0;
  color: #f5f0e5;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(42px, 3.45vw, 64px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

/* The supporting sentence now occupies the first text position below the
   hero, using its existing typography rather than inheriting headline size. */
.about-intro p {
  margin-top: 0;
}

/* Removing the former intro headline already shortens the page substantially;
   trim the surrounding vertical padding slightly so following sections rise
   in proportion without compressing their internal rhythm. */
.about-inner {
  padding-top: 88px;
  padding-bottom: 128px;
}

.offers {
  margin-top: 82px;
}

body.arabic-page .about-hero-copy {
  direction: rtl;
}

body.arabic-page .about-hero-copy h1 {
  font-family: "Noto Sans Arabic", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.32;
}

@media (max-width: 900px) {
  .about-hero-copy {
    top: 77%;
    width: min(760px, 86vw);
  }

  .about-hero-copy h1 {
    font-size: clamp(34px, 7vw, 48px);
  }

  .about-inner {
    padding-top: 72px;
    padding-bottom: 96px;
  }
}

@media (max-width: 560px) {
  .about-hero-copy {
    top: 74%;
    width: calc(100% - 36px);
  }

  .about-hero-copy h1 {
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.18;
  }

  body.arabic-page .about-hero-copy h1 {
    font-size: clamp(28px, 8.6vw, 38px);
    line-height: 1.32;
  }

  .about-inner {
    padding-top: 56px;
    padding-bottom: 74px;
  }

  .offers {
    margin-top: 64px;
  }
}

/* ======================================================================
   v8.21 — Arabic composition + About hero + Arabic project metadata
   ====================================================================== */

/* Arabic desktop navigation follows the natural RTL reading order:
   الرئيسية → من نحن → شركاؤنا → الجوائز → تواصل معنا, starting at the
   right-hand side of the navigation capsule. */
@media (min-width: 801px) {
  body.arabic-page .main-nav {
    direction: rtl;
  }

  /* Arabic Home mirrors the cinematic hero so Badr moves to the left,
     leaving the right-hand side free for RTL copy. */
  body.arabic-page > main.hero,
  body.arabic-page main.hero {
    background-image: none;
  }

  body.arabic-page main.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../assets/images/hero-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transform: scaleX(-1);
    transform-origin: center;
    pointer-events: none;
  }

  body.arabic-page .hero-copy {
    left: auto;
    right: 7.05%;
    text-align: right;
  }

  /* Move the circular Badr composition left on both About pages so the
     centered statement has a clear visual zone. The source image is much
     wider than the viewport, so shifting the crop is sufficient. */
  .about-hero {
    background-position: 72% center;
  }
}

/* Mirror Arabic Home consistently on tablet/mobile as well. */
@media (max-width: 800px) {
  body.arabic-page main.hero {
    background-image: none;
  }

  body.arabic-page main.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../assets/images/hero-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 32% center;
    transform: scaleX(-1);
    transform-origin: center;
    pointer-events: none;
  }

  body.arabic-page .hero-copy {
    text-align: right;
  }
}

@media (max-width: 480px) {
  body.arabic-page main.hero::before {
    background-position: 29% center;
  }
}

/* Arabic project-detail metadata: film title + social icons on the right,
   PDF download button on the left. Avoid combining row-reverse with RTL,
   which previously cancelled the intended visual reversal. */
@media (min-width: 801px) {
  body.arabic-page.project-detail-page .detail-meta {
    flex-direction: row;
    direction: rtl;
  }

  body.arabic-page.project-detail-page .detail-meta > div {
    text-align: right;
  }

  body.arabic-page.project-detail-page .download-pdf-button {
    direction: rtl;
  }
}


/* ======================================================================
   v8.22 — About hero scale + Arabic Projects metadata mirror
   ====================================================================== */

/* Desktop About hero: zoom the full cave composition so Badr/circle is
   substantially larger, then crop it toward the left. Keep the headline
   centered in the open middle area rather than beneath the subject. */
@media (min-width: 901px) {
  .about-hero {
    background-size: 100% 100%, auto 172%;
    background-position: center center, 66% center;
  }

  .about-hero-copy {
    left: 50%;
    top: 54%;
    width: min(930px, 54vw);
    transform: translate(-50%, -50%);
    text-align: center;
  }
}

/* Arabic Projects cards are a true mirror of English on desktop:
   title/subheading on the right, CTA on the left. Explicit LTR on the flex
   container prevents the page-level RTL direction from cancelling the
   row-reverse layout. */
@media (min-width: 801px) {
  body.arabic-page.projects-page .project-meta {
    direction: ltr;
    flex-direction: row-reverse;
  }

  body.arabic-page.projects-page .project-copy {
    direction: rtl;
    text-align: right;
  }

  body.arabic-page.projects-page .explore-button {
    direction: rtl;
    width: 222px;
    padding-inline: 28px;
    font-size: 15px;
    white-space: nowrap;
  }

  body.arabic-page.projects-page .explore-button .arrow {
    font-size: 25px;
  }
}


/* ======================================================================
   v8.23 — 22 Sep 2026 content/visual update
   ====================================================================== */

/* About: use the supplied uncropped hero artwork. On desktop the image is
   contained rather than zoomed/cropped; the surrounding fill stays dark and
   the lead statement remains centred. */
.about-hero {
  background-color: #2b2b29;
  background-image:
    linear-gradient(rgba(35, 35, 33, 0.48), rgba(30, 30, 29, 0.56)),
    url("../assets/images/about-hero-220926.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%, contain;
  background-position: center center, center center;
}

.about-hero-copy {
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Service/category chips should read as labels, not clickable buttons. */
.offer-pill,
.partner-pill {
  border: 0;
  box-shadow: none;
}

/* Keep the two temporarily hidden project-stage filters in the desktop layout
   so COMPLETED stays in exactly the same position. */
.project-filter.is-temporarily-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* News page: only the Press download remains. Remove button-like arrow spacing
   and shorten the now-empty lower portion of the page. */
.press-download {
  min-width: 218px;
  text-decoration: none;
  gap: 0;
}

.awards-inner {
  padding-bottom: 86px;
}

.awards-intro {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  /* Full-bleed mobile composition is preferable to letterboxing; the supplied
     16:9 image remains uncropped on standard desktop viewports. */
  .about-hero {
    background-size: 100% 100%, cover;
    background-position: center center, center center;
  }

  /* On small screens, remove the hidden stage controls completely so they do
     not create empty rows. */
  .project-filter.is-temporarily-hidden {
    display: none;
  }

  .awards-inner {
    padding-bottom: 72px;
  }
}

@media (max-width: 560px) {
  .awards-inner {
    padding-bottom: 58px;
  }
}

/* ======================================================================
   v8.24 — About hero full-view + #3B3B3B cinematic overlay
   ====================================================================== */
/* The supplied About image should fill the entire first viewport without
   letterboxing or cropping. Stretching is intentional here so the complete
   composition remains visible edge-to-edge on different desktop ratios. */
.about-hero {
  background-color: #3B3B3B;
  background-image:
    linear-gradient(rgba(59, 59, 59, 0.54), rgba(59, 59, 59, 0.54)),
    url("../assets/images/about-hero-220926.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-position: center center, center center;
}

/* Preserve the same full-frame treatment on tablet/mobile instead of
   reverting to cover, which would crop the supplied artwork. */
@media (max-width: 800px) {
  .about-hero {
    background-size: 100% 100%, 100% 100%;
    background-position: center center, center center;
  }
}

/* ======================================================================
   v8.25 — About hero cinematic shade correction
   ====================================================================== */
/* Keep the v8.24 full-frame image treatment, but move the dark treatment
   into a dedicated #3B3B3B multiply overlay. This produces the same
   cinematic darkening used elsewhere without washing the image brighter. */
.about-hero {
  position: relative;
  isolation: isolate;
  background-color: #3B3B3B;
  background-image: url("../assets/images/about-hero-220926.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #3B3B3B;
  opacity: 0.62;
  mix-blend-mode: multiply;
}

/* Keep the header and hero statement above the cinematic overlay. */
.about-hero .site-header {
  z-index: 10;
}

.about-hero-copy {
  z-index: 4;
}

@media (max-width: 800px) {
  .about-hero {
    background-size: 100% 100%;
    background-position: center center;
  }
}

/* ======================================================================
   v8.26 — About hero: stronger cinematic treatment to match site heroes
   ====================================================================== */
/* Keep the complete supplied About image visible edge-to-edge, but treat
   the image itself like Partners/News: darker, less saturated, then add a
   dedicated #3B3B3B shade above it. */
.about-hero {
  position: relative;
  isolation: isolate;
  background-color: #3B3B3B;
  background-image: none !important;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/about-hero-220926.jpg") center center / 100% 100% no-repeat;
  filter: grayscale(0.78) saturate(0.34) brightness(0.66) contrast(1.04);
  opacity: 1;
  mix-blend-mode: normal;
}

.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(59, 59, 59, 0.52);
  mix-blend-mode: multiply;
}

/* Header and hero copy remain fully legible above both image-treatment layers. */
.about-hero .site-header {
  position: absolute;
  z-index: 10;
}

.about-hero-copy {
  position: absolute;
  z-index: 4;
}

@media (max-width: 800px) {
  .about-hero::before {
    background-size: 100% 100%;
    background-position: center center;
  }
}


/* ======================================================================
   v8.27 — 24 Sep 2026 Projects tabs, Into the Silence, News report row
   ====================================================================== */

/* Project-stage controls now behave as tabs. Stage buttons no longer carry
   arrows; selected state retains the established Madlja gold treatment. */
.project-filter {
  gap: 0;
}

.project-list {
  display: block;
  gap: 0;
}

.project-stage-panel {
  display: grid;
  gap: 92px;
}

.project-stage-panel[hidden] {
  display: none !important;
}

/* The In Progress tab is intentionally visually empty for now while keeping
   enough vertical breathing room that switching tabs does not feel broken. */
.project-stage-panel-empty {
  min-height: 360px;
}

/* Utility for accessible copy that should not appear visually. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Project-detail pages now use YouTube's own thumbnail/player directly. */
.detail-youtube-media {
  background: #080808;
}

.detail-youtube-player {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Into the Silence PDF control is shown for layout continuity but remains
   inactive until the project PDF is supplied. */
.download-pdf-button.is-disabled {
  opacity: 0.48;
  cursor: default;
  pointer-events: none;
}

/* News: PRESS is a static category label; the download lives on the report row. */
.press-static {
  min-width: 218px;
  cursor: default;
  user-select: none;
}

.press-static:hover,
.press-static:focus-visible {
  transform: none;
  border-color: rgba(197, 163, 95, 0.86);
}

.news-report-list {
  margin-top: 112px;
}

.news-report-row {
  min-height: 126px;
  padding: 28px 12px;
  border-top: 1px solid rgba(197, 163, 95, 0.72);
  border-bottom: 1px solid rgba(197, 163, 95, 0.72);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.news-report-title {
  margin: 0;
  color: var(--gold-soft);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(24px, 1.8vw, 34px);
  font-weight: 500;
  line-height: 1.25;
}

.news-report-download {
  flex: 0 0 auto;
  min-width: 270px;
  height: 56px;
  padding: 0 34px;
  border: 1px solid rgba(197, 163, 95, 0.88);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f1ece1;
  background: rgba(12, 12, 11, 0.72);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.news-report-download:hover,
.news-report-download:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(222, 187, 116, 0.98);
  background: rgba(20, 19, 17, 0.90);
}

body.arabic-page .news-report-row {
  direction: rtl;
}

body.arabic-page .news-report-title {
  direction: rtl;
  text-align: right;
  letter-spacing: 0;
}

body.arabic-page .news-report-download {
  direction: rtl;
}

@media (max-width: 800px) {
  .project-stage-panel {
    gap: 48px;
  }

  .project-stage-panel-empty {
    min-height: 260px;
  }

  .news-report-list {
    margin-top: 78px;
  }

  .news-report-row {
    min-height: 0;
    padding: 28px 4px;
    gap: 24px;
  }

  .news-report-title {
    font-size: clamp(21px, 4.2vw, 29px);
  }

  .news-report-download {
    min-width: 210px;
    height: 50px;
    padding-inline: 26px;
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  /* Keep the three stages visible on mobile; they are functional tabs now. */
  .project-filters {
    width: min(310px, 100%);
  }

  .project-filter {
    justify-content: center;
  }

  .project-stage-panel-empty {
    min-height: 210px;
  }

  .news-report-list {
    margin-top: 58px;
  }

  .news-report-row,
  body.arabic-page .news-report-row {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .news-report-title,
  body.arabic-page .news-report-title {
    text-align: inherit;
  }

  .news-report-download {
    width: 100%;
    min-width: 0;
  }
}


/* ======================================================================
   v8.28 — 25 Sep 2026 hero assets + label treatments + Precious Quarter
   ====================================================================== */

/* About hero now uses dedicated desktop/mobile artwork. Preserve the same
   darker cinematic treatment and keep the lead statement centred. */
.about-hero {
  position: relative;
  isolation: isolate;
  background: #3B3B3B !important;
}

.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/about-hero-desktop-250926.jpg") center center / cover no-repeat;
  filter: grayscale(0.72) saturate(0.48) brightness(0.60) contrast(1.06);
  opacity: 1;
  mix-blend-mode: normal;
}

.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(59, 59, 59, 0.52);
  mix-blend-mode: multiply;
}

.about-hero .site-header { z-index: 10; }
.about-hero-copy {
  left: 50%;
  top: 54%;
  z-index: 4;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* What We Offer and Partner categories are labels on the page background,
   not button-like boxes. */
.offer-pill,
.partner-pill {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* News hero uses the supplied responsive artwork while retaining the same
   cinematic dark treatment as the other hero pages. */
.awards-hero {
  position: relative;
  isolation: isolate;
  background: #3B3B3B !important;
}

.awards-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/news-hero-desktop-250926.jpg") center center / cover no-repeat;
  filter: grayscale(0.72) saturate(0.48) brightness(0.60) contrast(1.06);
}

.awards-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(59, 59, 59, 0.50);
  mix-blend-mode: multiply;
}

.awards-hero .site-header { z-index: 10; }
.awards-hero-copy { z-index: 4; }

/* The Precious Quarter synopsis now contains full copy, so keep paragraph
   spacing aligned with the other individual project pages. */
.project-detail-page .synopsis p + p {
  margin-top: 18px;
}

@media (max-width: 800px) {
  .about-hero::before {
    background-image: url("../assets/images/about-hero-mobile-250926.jpg");
    background-position: center center;
    background-size: cover;
  }

  .about-hero-copy {
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .awards-hero::before {
    background-image: url("../assets/images/news-hero-mobile-250926.jpg");
    background-position: center center;
    background-size: cover;
  }
}

/* ======================================================================
   v8.29 — 25 Sep 2026 mobile-only hero/header refinements
   ====================================================================== */
@media (max-width: 800px) {
  /* Slightly enlarge the Madlja lockup so it has the right visual weight
     beside the EN | عربي control and hamburger. Desktop is unchanged. */
  .site-header .brand img,
  .awards-header .brand img[src$="logo.svg"],
  .awards-header .brand img[src$="logo-color.png"] {
    width: min(160px, 42vw) !important;
    max-width: 160px !important;
  }

  /* Dedicated mobile Home artwork keeps the climber fully present in the
     portrait viewport instead of relying on a crop of the desktop hero. */
  body:not(.arabic-page) main.hero {
    background-image: url("../assets/images/hero-home-mobile-250926.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Arabic Home keeps its mirrored composition, but now uses the same
     dedicated mobile artwork rather than the desktop source. */
  body.arabic-page main.hero::before {
    background-image: url("../assets/images/hero-home-mobile-250926.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Dedicated mobile Partners artwork keeps Badr visible in the first
     viewport. The supplied image already contains the intended dark grade. */
  .partners-hero::before {
    background: url("../assets/images/partners-hero-mobile-250926.png") center center / cover no-repeat !important;
    filter: none !important;
    transform: none !important;
  }

  /* PRESS is a static category label; keep it optically centred on mobile. */
  .awards-filters .press-static {
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  .site-header .brand img,
  .awards-header .brand img[src$="logo.svg"],
  .awards-header .brand img[src$="logo-color.png"] {
    width: min(142px, 39vw) !important;
    max-width: 142px !important;
  }
}

@media (max-width: 360px) {
  .site-header .brand img,
  .awards-header .brand img[src$="logo.svg"],
  .awards-header .brand img[src$="logo-color.png"] {
    width: 128px !important;
    max-width: 128px !important;
  }
}

/* v8.30 — Partner logos (30/09/2026) ------------------------------------ */
/* Keep the logo row centered and easy to extend with more partners later. */
.partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 74px 110px;
  margin-top: 128px;
  padding: 0 36px;
}

.partner-logos img {
  display: block;
  width: auto;
  height: 76px;
  max-width: min(42vw, 440px);
  object-fit: contain;
  flex: 0 0 auto;
}

.partner-contact {
  margin-top: 118px;
}

@media (max-width: 900px) {
  .partner-logos {
    gap: 52px 68px;
    margin-top: 105px;
    padding: 0;
  }

  .partner-logos img {
    height: 60px;
    max-width: min(44vw, 340px);
  }

  .partner-contact {
    margin-top: 94px;
  }
}

@media (max-width: 560px) {
  .partner-logos {
    flex-wrap: nowrap;
    gap: 28px;
    margin-top: 78px;
  }

  .partner-logos img {
    height: 40px;
    max-width: calc(70vw - 14px);
  }

  .partner-contact {
    margin-top: 72px;
  }
}

/* ======================================================================
   v8.32 — Contact form delivery + Cloudflare Turnstile
   ====================================================================== */
.contact-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.contact-turnstile {
  width: min(100%, 390px);
  min-height: 1px;
  margin-top: 30px;
}

.contact-form-status {
  min-height: 24px;
  margin: 20px 0 0;
  color: #f3eee4;
  font-family: "Instrument Sans", "Noto Sans Arabic", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

.contact-form-status[data-state="success"] {
  color: #dfbf76;
}

.contact-form-status[data-state="error"] {
  color: #f2c5bc;
}

.contact-form-status[data-state="setup"] {
  color: rgba(244, 238, 226, 0.72);
}

.contact-submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

body.arabic-page .contact-turnstile {
  margin-inline-start: auto;
}

body.arabic-page .contact-form-status {
  text-align: right;
}

@media (max-width: 800px) {
  .contact-turnstile {
    width: 100%;
    margin-top: 26px;
  }

  .contact-form-status {
    margin-top: 16px;
    font-size: 14px;
  }
}