/* =========================================================
   Abdullah Al Jajeh — Senior Art Director
   Portfolio styles
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root {
  --bg: #ece8e1;
  --bg-2: #e3ddd2;
  --ink: #141413;
  --ink-soft: #2a2926;
  --muted: #6b6760;
  --line: rgba(20, 20, 19, 0.14);
  --accent: #c44a2a;
  --invert-bg: #141413;
  --invert-ink: #ece8e1;

  --serif: "Fraunces", "Times New Roman", Times, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --container: 1480px;
  --pad: clamp(20px, 4vw, 56px);

  --ease: cubic-bezier(0.6, 0.05, 0.1, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  font-feature-settings: "ss01", "ss02", "cv01";
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section {
  /* Top + bottom only — keep .wrap's horizontal padding so the section
     never bleeds to the screen edges (especially on mobile). */
  padding-top: clamp(80px, 12vw, 180px);
  padding-bottom: clamp(80px, 12vw, 180px);
  position: relative;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ---------- Typography ---------- */
.display {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}

h1.display { font-size: clamp(56px, 12vw, 200px); }
h2.display { font-size: clamp(44px, 8vw, 128px); }
h3.display { font-size: clamp(32px, 4.5vw, 72px); }

.italic { font-style: italic; font-weight: 300; }

.lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 28ch;
}

/* ---------- Reveal primitives ---------- */
.reveal {
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

.reveal__inner {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.fade-up.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad);
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}

.nav > * { pointer-events: auto; }

.nav__brand {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.nav__brand span {
  font-style: italic;
  font-weight: 300;
  opacity: 0.7;
}

.nav__menu {
  display: flex;
  gap: 28px;
  list-style: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav__menu a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  overflow: hidden;
}

.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out);
}

.nav__menu a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (max-width: 720px) {
  .nav__menu { gap: 18px; }
  .nav__menu li:nth-child(2),
  .nav__menu li:nth-child(3) { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.hero__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(60px, 8vw, 120px);
}

.hero__role {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  max-width: 24ch;
}

.hero__title .row { display: block; }
.hero__title .row + .row { margin-top: -0.04em; }

/* =========================================================
   ROTATING REVIEWS — sits in the empty space between the
   hero title and the hero__bottom block. JS cycles through
   articles every ~7 seconds, fading them in/out.
   ========================================================= */
.hero__reviews {
  /* Floats the carousel at the vertical center of the viewport rather
     than letting it get pushed down by the flex layout above. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - clamp(40px, 8vw, 112px));
  max-width: 560px;
  margin: 0;
  z-index: 5;
  /* Height is set by JS to match the active card so each review's box
     hugs its own content rather than every card sharing the tallest one. */
  transition: height 0.5s var(--ease-out);
}

.review {
  position: absolute;
  /* No `bottom`/`inset:0` — each card's height is its natural content size,
     so the parent can resize per card. */
  top: 0;
  left: 0;
  right: 0;
  /* Solid (matches page bg) so the card is fully readable even when it
     overlaps the giant headline behind it. */
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 32px;
  box-shadow: 0 8px 32px -16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out),
              transform 0.5s var(--ease-out),
              visibility 0s linear 0.5s;
  display: flex;
  flex-direction: column;
}

.review.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.5s var(--ease-out),
              transform 0.5s var(--ease-out),
              visibility 0s linear 0s;
}

.review__stars {
  color: #d8a64a; /* warm gold */
  font-size: 14px;
  letter-spacing: 6px;
  margin-bottom: 14px;
  font-family: serif; /* render filled stars consistently */
}

.review__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 16px;
  flex: 1;
}

.review__author {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.review__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 0;
}

.reviews__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
  z-index: 2;
}

.reviews__nav:hover {
  background: var(--ink);
  color: var(--bg);
}

.reviews__nav--prev { left: -56px; }
.reviews__nav--next { right: -56px; }

.reviews__dots {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.reviews__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.reviews__dot.is-active {
  background: var(--ink);
  transform: scale(1.4);
}

@media (max-width: 720px) {
  /* On mobile, drop the absolute-center trick — let the carousel sit in
     normal flow inside the hero, sized to the active card's content. */
  .hero__reviews {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    /* Extra bottom margin reserves space for the dots row + arrow buttons
       that hang below the card, so they don't crash into the next block. */
    margin: 32px auto 80px;
    /* Override the inline height that JS sets for desktop crossfades. */
    height: auto !important;
  }

  /* Inactive cards are simply removed from layout; the active one renders
     in flow with its own natural height — full card styling intact. */
  .review {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease;
    padding: 22px 24px;
    border-radius: 18px;
  }
  .review.is-active {
    display: flex;
    transform: none;
  }

  /* On mobile, the arrows would overlap the quote text inside the card,
     so move them BELOW the card flanking the dots. The dots stay where
     they are; the arrows just shift to the same row. */
  .reviews__nav {
    top: auto;
    bottom: -42px;
    transform: none;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .reviews__nav--prev { left: calc(50% - 96px); right: auto; }
  .reviews__nav--next { right: calc(50% - 96px); left: auto; }
}

.hero__bottom {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.hero__location {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__intro {
  font-family: var(--serif);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  max-width: 48ch;
  color: var(--ink-soft);
}

.hero__scroll {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.hero__scroll .arrow {
  width: 1px;
  height: 36px;
  background: currentColor;
  display: inline-block;
  animation: scroll-pulse 2.4s var(--ease) infinite;
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; }
  50%      { transform: scaleY(1);   transform-origin: top; }
}

@media (max-width: 820px) {
  .hero__bottom { grid-template-columns: 1fr; gap: 18px; }
  .hero__top { grid-template-columns: 1fr; }
  .hero__role { text-align: left; }
}

/* =========================================================
   FULL-SCREEN PROJECT SECTIONS
   ========================================================= */

.project {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.project__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.project__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;  /* sit above the bg gradient placeholder so GIFs/videos show */
}

.project__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: kenburns 28s ease-in-out infinite alternate;
}

@keyframes kenburns {
  0%   { transform: scale(1.08) translate(-1%, -1%); }
  100% { transform: scale(1.16) translate(2%, 1.5%); }
}

.project__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.28) 70%,
    rgba(0,0,0,0.65) 100%
  );
}

.project__head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  padding: 96px var(--pad) 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
}

.project__head > * { pointer-events: auto; }

.project__index::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  margin-right: 10px;
  vertical-align: middle;
  opacity: 0.7;
}

.project__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding-bottom: clamp(28px, 5vh, 56px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}

.project__title {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.92;
  font-size: clamp(56px, 10vw, 156px);
  color: #fff;
  margin: 0 0 18px;
}

.project__title .row { display: block; }

.project__title em {
  font-style: italic;
  font-weight: 300;
  opacity: 0.95;
}

.project__desc {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.45;
  max-width: 46ch;
  color: rgba(255,255,255,0.82);
}

.project__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.project__awards {
  display: flex;
  gap: 8px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.award {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.award:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.55);
}

.award__star {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  color: #f3c14a;
}

.project__btn {
  --pad-x: 26px;
  --pad-y: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px;
  background: #fff;
  color: #141413;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease-out);
}

.project__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 999px;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease-out);
  z-index: -1;
}

.project__btn:hover { color: #fff; }
.project__btn:hover::before { transform: translateY(0); }

.project__btn-arrow {
  display: inline-block;
  transition: transform 0.5s var(--ease-out);
}

.project__btn:hover .project__btn-arrow {
  transform: translate(6px, -4px) rotate(-12deg);
}

@media (max-width: 820px) {
  .project__foot {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 32px;
  }
  .project__actions {
    align-items: flex-start;
  }
  .project__awards {
    justify-content: flex-start;
  }
  .project__title {
    font-size: clamp(44px, 13vw, 88px);
  }
  .project__head {
    padding-top: 80px;
  }
}

/* ---------- Cinematic placeholder backgrounds ---------- */

/* 01 Atrium Bank — sandstone, slow rotating rings */
.bg--atrium {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(245,230,200,0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(80,55,30,0.45) 0%, transparent 60%),
    linear-gradient(135deg, #cab48d 0%, #6a543a 100%);
}

.bg--atrium::before,
.bg--atrium::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(20,15,10,0.25);
  animation: spin-slow 60s linear infinite;
  pointer-events: none;
}

.bg--atrium::before {
  inset: 15% 15%;
  border-width: 1.5px;
  border-color: rgba(20,15,10,0.3);
  animation-duration: 80s;
}

.bg--atrium::after {
  inset: 25% 25%;
  border: 1px solid rgba(20,15,10,0.22);
  animation-duration: 100s;
  animation-direction: reverse;
}

/* 02 Lumen Press — dark editorial, drifting type */
.bg--lumen {
  background:
    radial-gradient(ellipse at 70% 30%, #2c2c2e 0%, transparent 60%),
    linear-gradient(180deg, #161617 0%, #2a2a2c 100%);
}

.bg--lumen::before {
  content: "LUMEN · PRESS · LUMEN · PRESS · LUMEN · PRESS · ";
  position: absolute;
  top: 50%;
  left: 0;
  width: 200%;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(120px, 22vw, 360px);
  color: rgba(236,232,225,0.06);
  white-space: nowrap;
  transform: translateY(-50%);
  animation: drift-x 60s linear infinite;
  letter-spacing: -0.02em;
  line-height: 1;
}

.bg--lumen::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  left: 18%;
  top: 32%;
  animation: pulse 3.2s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(196,74,42,0.45);
}

/* 03 Ferra Studios — warm desert sunset */
.bg--ferra {
  background:
    radial-gradient(circle at 28% 28%, #ffb785 0%, transparent 55%),
    radial-gradient(circle at 72% 78%, #c9472b 0%, transparent 65%),
    linear-gradient(135deg, #f1855a 0%, #6c1f10 100%);
}

.bg--ferra::before {
  content: "";
  position: absolute;
  width: 44vmin;
  height: 44vmin;
  border-radius: 50%;
  background: #1d1a14;
  right: -10%;
  bottom: -22%;
  animation: rise 22s ease-in-out infinite alternate;
  box-shadow: 0 0 120px rgba(255,140,80,0.3);
}

.bg--ferra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0.04) 3px,
    rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
}

/* 04 North Loop — handmade cream with topo lines */
.bg--north {
  background:
    radial-gradient(ellipse at 50% 30%, #d8cfb8 0%, transparent 70%),
    linear-gradient(180deg, #c4b89d 0%, #6e5d3e 100%);
}

.bg--north::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background-image:
    radial-gradient(ellipse, transparent 40%, rgba(20,15,10,0.32) 41%, rgba(20,15,10,0.32) 42%, transparent 43%),
    radial-gradient(ellipse, transparent 50%, rgba(20,15,10,0.28) 51%, rgba(20,15,10,0.28) 52%, transparent 53%),
    radial-gradient(ellipse, transparent 60%, rgba(20,15,10,0.24) 61%, rgba(20,15,10,0.24) 62%, transparent 63%),
    radial-gradient(ellipse, transparent 70%, rgba(20,15,10,0.20) 71%, rgba(20,15,10,0.20) 72%, transparent 73%);
  background-size: 100% 100%;
  animation: breathe 14s ease-in-out infinite alternate;
}

/* 05 holos. — tech, expanding signal rings */
.bg--holos {
  background: radial-gradient(circle at 50% 50%, #2a2c33 0%, #0e0f12 70%);
}

.bg--holos::before,
.bg--holos::after {
  content: "";
  position: absolute;
  width: 30vmin;
  height: 30vmin;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(236,232,225,0.4);
  transform: translate(-50%, -50%);
  animation: ping 5s ease-out infinite;
}

.bg--holos::after { animation-delay: 2.5s; }

/* 06 Maison Verde — botanical green, leaf */
.bg--verde {
  background:
    radial-gradient(ellipse at 30% 40%, #5a7251 0%, transparent 60%),
    linear-gradient(160deg, #3d4a35 0%, #1a2418 100%);
}

.bg--verde::before {
  content: "";
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  left: 10%;
  bottom: -25%;
  background: radial-gradient(ellipse at 50% 0%, #7a9168 0%, #2d3a26 70%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  transform: rotate(-12deg);
  animation: sway 16s ease-in-out infinite alternate;
  filter: blur(0.5px);
}

@keyframes spin-slow { to { transform: rotate(360deg); } }

@keyframes drift-x { to { transform: translate(-50%, -50%); } }

@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%      { transform: scale(1.4); opacity: 1; }
}

@keyframes rise {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-6%, -8%); }
}

@keyframes breathe {
  0%   { transform: scale(1);    opacity: 0.95; }
  100% { transform: scale(1.06); opacity: 1; }
}

@keyframes ping {
  0%   { width: 8vmin;   height: 8vmin;   opacity: 0.95; border-width: 2px; }
  100% { width: 110vmin; height: 110vmin; opacity: 0;    border-width: 0.5px; }
}

@keyframes sway {
  0%   { transform: rotate(-14deg) translateX(-2%); }
  100% { transform: rotate(-9deg)  translateX(2%);  }
}

@media (prefers-reduced-motion: reduce) {
  .project__bg,
  .project__bg::before,
  .project__bg::after {
    animation: none !important;
  }
}

/* =========================================================
   ABOUT
   ========================================================= */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.about__title {
  position: sticky;
  top: 120px;
}

.about__body p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

.about__body p + p { margin-top: 1em; }

.about__list {
  margin-top: 48px;
  border-top: 1px solid var(--line);
}

.about__item {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.about__item .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.about__item .role {
  font-family: var(--serif);
  font-size: clamp(18px, 1.3vw, 22px);
}

.about__item .where {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; }
  .about__title { position: static; }
  .about__item { grid-template-columns: 60px 1fr; }
  .about__item .where { grid-column: 1 / -1; text-align: left; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  background: var(--invert-bg);
  color: var(--invert-ink);
  padding: clamp(80px, 10vw, 160px) 0 40px;
  position: relative;
}

.contact .eyebrow {
  color: rgba(236,232,225,0.6);
}

.contact h2 { margin-bottom: 0.4em; }

.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 56px);
  position: relative;
  padding: 14px 4px;
}

.contact__cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
}

.contact__cta:hover::after {
  transform: scaleX(0);
  transform-origin: right center;
}

.contact__cta .arrow {
  display: inline-block;
  transition: transform 0.5s var(--ease-out);
}

.contact__cta:hover .arrow {
  transform: translate(8px, -8px) rotate(-8deg);
}

.contact__grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(236,232,225,0.16);
  padding-top: 36px;
}

/* The last card in the grid (References) shrinks to the width of its
   widest child (the paragraph) and is pushed to the right edge of its
   grid cell. Both heading and copy stay left-aligned WITHIN that box so
   the "References" title lines up with the start of the sentence. */
.contact__grid > .contact__col:last-child {
  width: max-content;
  max-width: 100%;
  justify-self: end;
  text-align: left;
}

.contact__col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236,232,225,0.55);
  margin-bottom: 14px;
  font-weight: 400;
}

.contact__col a,
.contact__col p {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
}

.contact__col a {
  transition: opacity 0.3s var(--ease-out);
}

.contact__col a:hover { opacity: 0.6; }

.colophon {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid rgba(236,232,225,0.16);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(236,232,225,0.5);
}

@media (max-width: 720px) {
  .contact__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .colophon { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__grid > .contact__col:last-child {
    width: auto;
    justify-self: stretch;
  }
}

/* Generic button */
.btn {
  --pad-x: 28px;
  --pad-y: 16px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid currentColor;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 999px;
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-out);
  z-index: -1;
}

.btn:hover { color: var(--bg); }
.btn:hover::before { transform: translateY(0); }

/* Case study page */
.case-hero {
  /* Top + bottom only — keep the horizontal padding from .wrap so this
     section's left/right edges line up exactly with the case-cover below. */
  padding-top: 160px;
  padding-bottom: 60px;
}

.case-hero__meta {
  /* Client pinned to the left edge of the media below,
     Discipline pinned to the right edge of the media below. */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 48px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.case-hero__meta > div:last-child {
  text-align: right;
}

.case-hero__meta > div:last-child .label::before {
  /* keep the eyebrow rule on the right item starting from the right side */
  content: none;
}

.case-hero__meta .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}

.case-hero__meta .value {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .case-hero__meta { grid-template-columns: 1fr 1fr; }
}

.case-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 60px 0;
}

/* Stack of 16:9 films (used on Abed Tahan), one on top of the other. */
.case-films {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 60px 0;
}

.case-films__tile {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a0a0a;
  overflow: hidden;
  border-radius: 2px;
}

.case-films__tile iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* A side-by-side pair of images at matching height. Each child's flex
   value is its aspect ratio (width / height) so that — when each img is
   width:100% / height:auto inside its column — both images render at the
   same height while keeping their natural aspect ratios. Set the two
   flex values inline per pair via --a and --b custom props. */
.case-pair {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 80px;
}

.case-pair > div {
  flex: var(--ar, 1) 1 0;
  min-width: 0;
}

.case-pair img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

@media (max-width: 720px) {
  .case-pair { flex-direction: column; }
  .case-pair > div { flex: 1 1 auto; width: 100%; }
}

/* Vertical (9:16) YouTube Shorts stacked one above the other, centered on
   the page at a phone-screen-sized width. */
.case-shorts {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 60px auto;
  max-width: 420px;
}

.case-shorts__tile {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #0a1428;
  overflow: hidden;
  border-radius: 2px;
}

.case-shorts__tile iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 720px) {
  .case-shorts { max-width: 100%; }
}

.case-content {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  margin-bottom: 80px;
}

.case-content h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.case-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.case-content p + p { margin-top: 1em; }

@media (max-width: 720px) {
  .case-content { grid-template-columns: 1fr; }
}

/* Centered Outcome / award block. Stacks the label above the award text,
   centers everything, and bumps the award size for emphasis. */
.case-content--centered {
  display: block;
  text-align: center;
  margin: 80px auto;
}

.case-content--centered h3 {
  margin-bottom: 20px;
}

.case-content--centered p {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.3;
  color: var(--ink);
}

.case-content--centered strong {
  font-weight: 400;
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}

.case-gallery > div {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
}

.case-gallery .span-7 { grid-column: span 7; aspect-ratio: 16 / 11; }
.case-gallery .span-5 { grid-column: span 5; }
.case-gallery .span-12 { grid-column: span 12; aspect-ratio: 21 / 9; }
.case-gallery .span-6 { grid-column: span 6; aspect-ratio: 4 / 5; }

/* Modifier: let every tile keep the image's NATURAL aspect ratio instead
   of being cropped into the grid's fixed boxes. Used on YahSat where the
   keyvisuals come in mixed aspect ratios. */
.case-gallery--natural { align-items: start; }
.case-gallery--natural > div,
.case-gallery--natural .span-6,
.case-gallery--natural .span-7,
.case-gallery--natural .span-5,
.case-gallery--natural .span-12 {
  aspect-ratio: auto;
  height: auto;
}
.case-gallery--natural img {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 720px) {
  .case-gallery .span-7,
  .case-gallery .span-5,
  .case-gallery .span-6,
  .case-gallery .span-12 {
    grid-column: span 12;
    aspect-ratio: 4 / 3;
  }
}

.case-pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 auto 100px;
  text-align: center;
}

.case-next {
  border-top: 1px solid var(--line);
  padding: 60px 0 100px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}

.case-next__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-next__name {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 100px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.case-next__name em { font-style: italic; }

.case-next__arrow {
  font-size: 32px;
  transition: transform 0.5s var(--ease-out);
}

.case-next:hover .case-next__arrow {
  transform: translateX(12px);
}

.viz { width: 100%; height: 100%; }
.viz--01 { background: linear-gradient(140deg, #d0c5b8 0%, #8a7e6d 100%); }
.viz--02 { background: radial-gradient(circle at 30% 30%, #f0a37a, #b3422c 70%); }
.viz--03 { background: linear-gradient(160deg, #2b2c2a 0%, #54564f 100%); }
.viz--04 { background: linear-gradient(135deg, #c4ad88 0%, #5e4a30 100%); }
.viz--05 { background: linear-gradient(135deg, #a3a8a3 0%, #2b2e2b 100%); }
.viz--06 { background: linear-gradient(135deg, #d9d6cf 0%, #948e84 100%); }

/* Cursor */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px;
  height: 12px;
  background: var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-out),
              height 0.3s var(--ease-out),
              background-color 0.3s var(--ease-out);
  mix-blend-mode: difference;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
}

.cursor.is-hover {
  width: 64px;
  height: 64px;
  background: var(--accent);
}

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--bg);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(40px, 8vw, 120px);
  letter-spacing: -0.02em;
  transition: transform 1s var(--ease) 0.2s;
}

.loader.is-out {
  transform: translateY(-100%);
  /* Once it has lifted away, stop blocking clicks underneath it. */
  pointer-events: none;
}

/* Tiny toast that appears when the user clicks any mailto: link, confirming
   the address has been copied to the clipboard. */
.mailto-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 150;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.mailto-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.loader__count { font-feature-settings: "tnum"; }

/* =========================================================
   YouTube fullscreen background (used on Heinz Hum Hum)
   ========================================================= */
.project__youtube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.project__youtube iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* always cover: at least 100vw wide AND at least 100vh tall, in 16:9 */
  width: 100vw;
  height: 56.25vw;        /* 100vw * 9/16 */
  min-width: 177.78vh;    /* 100vh * 16/9 */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* Heinz Hum Hum — tomato red placeholder behind the video */
.bg--heinz {
  background:
    radial-gradient(circle at 28% 30%, #ff5a3a 0%, transparent 55%),
    radial-gradient(circle at 78% 78%, #6f0d0d 0%, transparent 60%),
    linear-gradient(140deg, #d91f1f 0%, #4a0808 100%);
}

.bg--heinz::before {
  content: "";
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%);
  top: -10%;
  right: -10%;
  filter: blur(2px);
}

/* The YT IFrame API replaces the placeholder div with an iframe whose id
   becomes the original element id (e.g. yt-heinz). Make sure the generated
   iframe gets the same fullscreen-cover rules as our manual iframe. */
.project__youtube > div,
.project__youtube > iframe,
.project__youtube #yt-heinz {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* file:// notice — only shows when the page is opened by double-clicking
   the HTML file directly (where YouTube embeds often refuse to load). */
.file-notice {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: rgba(20, 20, 19, 0.92);
  color: #ece8e1;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 92vw;
  text-align: center;
}

html.is-file .file-notice { display: block; }

.file-notice a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #f3c14a;
}

.file-notice .x {
  display: inline-block;
  margin-left: 14px;
  cursor: pointer;
  opacity: 0.7;
}

.file-notice .x:hover { opacity: 1; }

/* =========================================================
   PRESS — "As seen on" marquee strip on case-study pages
   ========================================================= */
.press {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 60px;
  margin: 60px 0 80px;
  text-align: center;
}

.press__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 36px;
}

.press__marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.press__track {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
  animation: press-scroll 65s linear infinite;
  will-change: transform;
}

.press__track:hover {
  animation-play-state: paused;
}

.press__item {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  flex-shrink: 0;
  transition: opacity 0.4s var(--ease-out), color 0.4s var(--ease-out);
  opacity: 0.78;
}

.press__item:hover {
  opacity: 1;
  color: var(--ink);
}

.press__sep {
  color: var(--muted);
  opacity: 0.4;
  font-size: 0.6em;
  flex-shrink: 0;
}

@keyframes press-scroll {
  to { transform: translateX(-50%); }
}

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

/* --- Press logo styling (overrides earlier .press__item where logos are imgs) --- */
.press__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 32px;
}

.press__logo img {
  height: 32px;
  width: auto;
  display: block;
  /* grayscale + multiply blends white-bg JPGs/PNGs into the cream page,
     while keeping transparent SVGs visually consistent. */
  filter: grayscale(1) contrast(0.9);
  mix-blend-mode: multiply;
  opacity: 0.7;
  transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}

.press__logo:hover img {
  opacity: 1;
  filter: grayscale(0) contrast(1);
}

.press__fallback {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  opacity: 0.78;
  transition: opacity 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.press__logo:hover .press__fallback {
  opacity: 1;
  color: var(--ink);
}

/* --- Hover zoom on case-study gallery images --- */
.case-gallery > div {
  overflow: hidden;
}

.case-gallery img {
  transition: transform 0.8s var(--ease-out);
  will-change: transform;
}

.case-gallery > div:hover img {
  transform: scale(1.04);
}

/* Heinz Saudi National Day — green placeholder behind the homepage GIF */
.bg--saudi {
  background:
    radial-gradient(circle at 28% 30%, #2d8c54 0%, transparent 55%),
    radial-gradient(circle at 78% 78%, #0d3a22 0%, transparent 60%),
    linear-gradient(140deg, #19663b 0%, #061a10 100%);
}

.bg--saudi::before {
  content: "";
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  top: -10%;
  right: -10%;
  filter: blur(2px);
}

/* =========================================================
   HOMEPAGE SNAP-SCROLL — each project locks into the viewport
   ========================================================= */
html {
  scroll-snap-type: y proximity;
}

/* Major sections snap to the top of the viewport */
.hero,
.project,
#about,
#contact {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* YahSat — deep space blue placeholder behind the homepage GIF */
.bg--yahsat {
  background:
    radial-gradient(circle at 28% 26%, #2a4d7a 0%, transparent 55%),
    radial-gradient(circle at 78% 78%, #050b1c 0%, transparent 60%),
    linear-gradient(140deg, #0e1d3c 0%, #03060f 100%);
}

.bg--yahsat::before {
  content: "";
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%);
  top: -15%;
  right: -10%;
  filter: blur(2px);
}

/* Abed Tahan — warm festive placeholder behind the homepage GIF */
.bg--abed {
  background:
    radial-gradient(circle at 28% 30%, #b21e2c 0%, transparent 55%),
    radial-gradient(circle at 78% 78%, #1c4030 0%, transparent 60%),
    linear-gradient(140deg, #6e1418 0%, #0e1a14 100%);
}

/* AlMarai — fresh dairy blue with a warm cream highlight */
.bg--almarai {
  background:
    radial-gradient(circle at 28% 30%, #4a90c2 0%, transparent 55%),
    radial-gradient(circle at 78% 78%, #08263a 0%, transparent 60%),
    linear-gradient(140deg, #1f6d9a 0%, #03101c 100%);
}

.bg--almarai::before {
  content: "";
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,200,0.16) 0%, transparent 70%);
  top: -8%;
  right: -10%;
  filter: blur(2px);
}

/* ALDO — moody fashion charcoal with a warm copper highlight */
.bg--aldo {
  background:
    radial-gradient(circle at 28% 30%, #4a3c34 0%, transparent 55%),
    radial-gradient(circle at 78% 78%, #0a0907 0%, transparent 60%),
    linear-gradient(140deg, #1f1a17 0%, #060504 100%);
}

.bg--aldo::before {
  content: "";
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,128,72,0.18) 0%, transparent 70%);
  top: -10%;
  left: -10%;
  filter: blur(3px);
}

.bg--abed::before {
  content: "";
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,170,0.22) 0%, transparent 70%);
  top: -10%;
  right: -10%;
  filter: blur(2px);
}