/* ================= ANU STUDIO — brand: antique gold on charcoal black ================= */

:root {
  --black: #0a0a0b;
  --black-2: #121213;
  --black-3: #1a1a1c;
  --line: #2a2a2c;

  --gold: #c9a24d;
  --gold-light: #e8ca82;
  --gold-dark: #8a6d2f;

  --cream: #f3ecdc;
  --gray: #a19a8c;
  --gray-dim: #6f6a60;

  --font-display: 'Cinzel', serif;
  --font-body: 'Jost', sans-serif;

  --container: 1180px;
  --radius: 14px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

html[lang="ar"] {
  --font-display: 'Tajawal', sans-serif;
  --font-body: 'Tajawal', sans-serif;
}
html[lang="ar"] * {
  letter-spacing: normal !important;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* ---------- Casual-copy deterrents (public site only — not real DRM) ----------
   This only removes the easy paths: right-click "Save Image As" and
   drag-to-desktop. The underlying file is still reachable via devtools,
   the network tab, or a screenshot regardless — nothing client-side can
   prevent that. Paired with contextmenu/dragstart handlers in script.js. */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

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

ul { list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.section { padding: 130px 0; position: relative; }

.text-gold { color: var(--gold); }

/* ---------- typography ---------- */

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 18px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.25;
  color: var(--cream);
  letter-spacing: .01em;
}

.section-sub {
  color: var(--gray);
  max-width: 560px;
  margin-top: 18px;
  font-size: 1.05rem;
}

.section-head { max-width: 700px; margin-bottom: 64px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 34px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .03em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
  color: #16130a;
  box-shadow: 0 8px 24px -8px rgba(201,162,77,.55);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(201,162,77,.75); }

.btn-outline {
  border-color: var(--line);
  color: var(--cream);
  background: transparent;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

.btn-sm { padding: 11px 22px; font-size: .85rem; }
.btn-block { width: 100%; padding: 16px; margin-top: 6px; }

/* ---------- reveal-on-scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ================= HEADER ================= */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  padding: 14px 0;
  background: rgba(10,10,11,.85);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 42px; height: 42px; object-fit: contain; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .12em;
  color: var(--cream);
  font-weight: 600;
}
.brand-name em { color: var(--gold); font-style: normal; }

.main-nav { display: flex; gap: 38px; }
.nav-link {
  font-size: .92rem;
  color: var(--gray);
  position: relative;
  padding: 4px 0;
  transition: color .3s;
}
.nav-link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width .3s var(--ease);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 18px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--cream);
  transition: transform .3s, opacity .3s;
}

/* ================= HERO ================= */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 160px 0 80px;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -20%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201,162,77,.16) 0%, rgba(201,162,77,0) 65%);
  pointer-events: none;
}

.hero-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 1400px; height: 1400px;
  transform: translate(-50%, -50%);
  background:
    repeating-conic-gradient(from 0deg, rgba(201,162,77,.05) 0deg 2deg, transparent 2deg 45deg);
  border-radius: 50%;
  pointer-events: none;
  animation: spin 120s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.hero-inner { position: relative; text-align: center; }

.hero .eyebrow { display: block; text-align: center; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: 26px;
}

.hero-sub {
  max-width: 620px;
  margin: 0 auto 42px;
  color: var(--gray);
  font-size: 1.1rem;
}

.hero-cta {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 90px;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  padding-top: 46px;
  border-top: 1px solid var(--line);
}

.stat { text-align: center; }
.stat-num, .stat-plus {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--gold);
  font-weight: 700;
}
.stat-label {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--gray);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.scroll-cue {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.scroll-cue span {
  width: 4px; height: 8px;
  background: var(--gold);
  border-radius: 2px;
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(10px); opacity: 0; }
  100% { opacity: 0; }
}

/* ================= MARQUEE ================= */

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 26px 0;
  background: var(--black-2);
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  gap: 18px;
  animation: marquee 32s linear infinite;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .05em;
  color: var(--gray);
}
.marquee-track .dot { color: var(--gold); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
html[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* ================= SERVICES ================= */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-card {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 32px;
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-dark);
  background: var(--black-3);
}

.service-icon {
  position: relative;
  width: 64px; height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.service-icon svg,
.service-icon img {
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6)) drop-shadow(0 0 0 rgba(201,162,77,0));
  transition: transform .4s var(--ease), filter .4s var(--ease);
}
.service-card:hover .service-icon svg,
.service-card:hover .service-icon img {
  transform: translateY(-3px) scale(1.08);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.65)) drop-shadow(0 0 16px rgba(201,162,77,.55));
}
/* -- per-icon hover animation (one simple motion each) -- */

@keyframes icoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.75); } }
@keyframes icoNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
@keyframes icoClap { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); } }
@keyframes icoPropSpin { to { transform: rotate(360deg); } }
@keyframes icoTilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
@keyframes icoSpin { to { transform: rotate(180deg); } }

.ico-pulse, .ico-nudge, .ico-prop {
  transform-box: fill-box;
  transform-origin: center;
}
.ico-clap { transform-box: fill-box; transform-origin: 3px 11px; }
.ico-tilt { transform-box: fill-box; transform-origin: 5px 8px; }
.ico-spin { transform-box: fill-box; transform-origin: center; }

.service-card:hover .ico-pulse { animation: icoPulse .8s ease-in-out 1; }
.service-card:hover .ico-nudge { animation: icoNudge .8s ease-in-out 1; }
.service-card:hover .ico-clap { animation: icoClap .8s ease-in-out 1; }
.service-card:hover .ico-prop { animation: icoPropSpin .6s ease-in-out 1; }
.service-card:hover .ico-tilt { animation: icoTilt 1s ease-in-out 1; }
.service-card:hover .ico-spin { animation: icoSpin .8s ease-in-out 1; }

.service-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 12px;
  color: var(--cream);
  font-weight: 600;
}
.service-card p { color: var(--gray); font-size: .95rem; }

/* ================= ABOUT ================= */

.about-inner {
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
}
.about-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(201,162,77,.18), transparent 70%);
}
.about-emblem {
  position: relative;
  width: 78%;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.6));
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.about-text { color: var(--gray); margin: 20px 0; font-size: 1.02rem; }
.about-text strong { color: var(--gold); font-weight: 600; }

.about-list { margin: 28px 0 34px; }
.about-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  font-size: .98rem;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.about-list li:last-child { border-bottom: none; }
.check {
  color: var(--gold);
  font-weight: 700;
}

/* ================= TEAM ================= */

.team {
  background:
    radial-gradient(ellipse at 75% 30%, rgba(201,162,77,.07), transparent 55%),
    var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow-x: hidden;
}

.team-showcase {
  display: grid;
  grid-template-columns: 88px 1fr 1.15fr;
  align-items: center;
  gap: 56px;
  min-height: 460px;
}

/* -- avatar rail -- */
.team-list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 10px 0;
}
.team-list::before {
  content: '';
  position: absolute;
  top: 4px; bottom: 4px; left: 50%;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
  z-index: 0;
}

.team-avatar {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: transform .35s var(--ease);
}
.team-avatar:hover { transform: scale(1.08); }

.avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.team-avatar.active .avatar-ring {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,162,77,.12);
}

.avatar-fill {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* shows through if the uploaded photo has no background (transparent PNG) */
  background: radial-gradient(circle at 50% 35%, rgba(201,162,77,.25), var(--black-3) 75%);
  filter: grayscale(1);
  opacity: .55;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.team-avatar.active .avatar-fill,
.team-avatar:hover .avatar-fill {
  filter: grayscale(0);
  opacity: 1;
}

/* -- info column -- */
.team-info { max-width: 380px; transition: opacity .2s ease; }
.team-name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--cream);
  font-weight: 600;
  margin-bottom: 10px;
}
.team-role {
  display: block;
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.team-bio { color: var(--gray); font-size: .98rem; line-height: 1.8; }

/* -- portrait -- */
.team-portrait-wrap {
  position: relative;
  aspect-ratio: 4/5;
  max-height: 480px;
  justify-self: end;
  width: 100%;
  max-width: 380px;
}
.portrait-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse closest-side, rgba(201,162,77,.16), transparent 70%);
  z-index: 0;
}
.team-portrait {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.team-portrait img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.55));
  /* shows through if the uploaded photo has no background (transparent PNG) — closest-side keeps it from ever showing a hard edge */
  background: radial-gradient(ellipse closest-side at 50% 42%, rgba(201,162,77,.22), transparent 70%);
  transition: opacity .3s ease;
}

/* ================= PROCESS ================= */

.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.process-step {
  border-top: 1px solid var(--gold-dark);
  padding-top: 24px;
}
.process-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 14px;
}
.process-step h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--cream);
}
.process-step p { color: var(--gray); font-size: .92rem; }

/* ================= WORK / PORTFOLIO ================= */

.work-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--gray);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .88rem;
  cursor: pointer;
  transition: all .3s var(--ease);
}
.filter-btn:hover { color: var(--cream); border-color: var(--gold-dark); }
.filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #16130a;
  font-weight: 500;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.work-more {
  text-align: center;
  margin-top: 52px;
}

.work-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  transition: opacity .4s, transform .5s var(--ease);
}
.work-item.hidden, .project-card.hidden { display: none; }

.work-thumb {
  position: relative;
  width: 100%; height: 100%;
  transition: transform .6s var(--ease);
}
.work-item:hover .work-thumb { transform: scale(1.08); }

.work-thumb img,
.work-thumb video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.yt-thumb {
  position: relative;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,11,.55);
  border: 1px solid rgba(201,162,77,.65);
  color: var(--gold);
  font-size: .95rem;
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.yt-thumb:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--gold);
  color: #16130a;
}

.media-count-badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  background: rgba(10,10,11,.65);
  border: 1px solid rgba(201,162,77,.5);
  color: var(--gold);
  font-size: .75rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
html[dir="rtl"] .media-count-badge { right: auto; left: 12px; }


.thumb-1 { background: linear-gradient(160deg, #2a2418, #0a0a0b 70%); }
.thumb-2 { background: linear-gradient(160deg, #1c1c1e, #0a0a0b 70%); }
.thumb-3 { background: linear-gradient(160deg, #332a15, #0a0a0b 70%); }
.thumb-4 { background: linear-gradient(160deg, #1e1a10, #0a0a0b 70%); }
.thumb-5 { background: linear-gradient(160deg, #242424, #0a0a0b 70%); }
.thumb-6 { background: linear-gradient(160deg, #2e2716, #0a0a0b 70%); }

.work-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(201,162,77,.18), transparent 60%);
}

.work-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  transform: translateY(12px);
  opacity: 0;
  transition: all .4s var(--ease);
}
.work-item:hover .work-info { transform: translateY(0); opacity: 1; }
.work-info h4 {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.work-info span { color: var(--gold); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }

/* ================= PROJECTS (archive page) ================= */

.projects-hero {
  padding: 170px 0 60px;
  text-align: center;
}
.projects-hero .eyebrow { justify-content: center; }
.back-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray);
  font-size: .9rem;
  margin-top: 22px;
  transition: color .3s;
}
.back-home:hover { color: var(--gold); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 28px;
}

.project-card {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-dark);
}

.project-card .work-thumb {
  aspect-ratio: 16/11;
  height: auto;
  display: block;
}
.project-card:hover .work-thumb { transform: none; }

.project-body { padding: 26px; }

.project-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.project-top h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--cream);
  font-weight: 600;
}
.project-cat {
  flex-shrink: 0;
  color: var(--gold);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-desc {
  color: var(--gray);
  font-size: .94rem;
  line-height: 1.7;
  margin-bottom: 16px;
}

.project-client {
  font-size: .85rem;
  color: var(--gray-dim);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.project-client strong { color: var(--cream); font-weight: 500; }

/* ================= PROJECT DETAIL PAGE ================= */
/* Opened as a full-page takeover, not a boxed dialog: a "details" section
   (title/category/client/description) up top, and a separate "content"
   section — a media grid — below it. Clicking any grid item opens a second,
   independent full-screen viewer focused on just that one image/video. */

body.lightbox-open { overflow: hidden; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  overflow-y: auto;
  background: var(--black);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay.open { opacity: 1; }

.lightbox-close {
  position: fixed;
  top: 24px;
  inset-inline-end: 28px;
  z-index: 5;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,77,.5);
  background: rgba(10,10,11,.65);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lightbox-close:hover { background: var(--gold); color: #16130a; transform: rotate(90deg); }

/* ---------- Details ---------- */

.detail-hero {
  max-width: 880px;
  margin: 0 auto;
  padding: 120px 28px 48px;
  border-bottom: 1px solid var(--line);
}
.detail-hero .project-cat { display: inline-block; margin-bottom: 16px; }
.detail-hero h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--cream);
  margin-bottom: 16px;
}
.lightbox-client { font-size: .9rem; color: var(--gray-dim); margin-bottom: 24px; }
.lightbox-client span:first-child { color: var(--gray); font-weight: 500; }
.detail-desc {
  color: var(--gray);
  font-size: 1.02rem;
  line-height: 1.8;
  max-width: 68ch;
}

/* ---------- Content (media grid) ---------- */

.detail-grid-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 28px 110px; }
.detail-grid-eyebrow {
  color: var(--gray-dim);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.detail-grid-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--black-2);
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.detail-grid-item:hover { border-color: var(--gold-dark); }
.detail-grid-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.detail-grid-item:hover img { transform: scale(1.07); }
.detail-grid-item .yt-thumb { width: 100%; height: 100%; }
.detail-grid-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.4), transparent 45%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.detail-grid-item:hover::after { opacity: 1; }

/* ---------- Focused single-media viewer ---------- */

.media-focus {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  background: rgba(4,4,5,.97);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.media-focus[hidden] { display: none; }
.media-focus.open { opacity: 1; }

.media-focus .lightbox-stage-wrap {
  transform: scale(.96);
  transition: transform .35s var(--ease);
}
.media-focus.open .lightbox-stage-wrap { transform: scale(1); }

.lightbox-stage-wrap {
  position: relative;
  width: min(1360px, 100%);
  height: min(860px, 88vh);
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

.lightbox-stage {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img,
.lightbox-iframe {
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.lightbox-stage img.loaded,
.lightbox-iframe.loaded { opacity: 1; }
.lightbox-stage img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.lightbox-stage .yt-thumb { width: 100%; height: 100%; opacity: 1; }
.lightbox-iframe { width: 100%; height: 100%; border: 0; display: block; }

.lightbox-stage .yt-play {
  width: 80px; height: 80px;
  font-size: 1.2rem;
  animation: lightboxPulse 2.6s ease-in-out infinite;
}
@keyframes lightboxPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,77,.32); }
  50% { box-shadow: 0 0 0 16px rgba(201,162,77,0); }
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,77,.45);
  background: rgba(10,10,11,.5);
  color: var(--gold);
  font-size: .95rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  z-index: 2;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.lightbox-nav:hover { background: var(--gold); color: #16130a; transform: translateY(-50%) scale(1.08); }
.lightbox-nav[hidden] { display: none; }
.lightbox-prev { inset-inline-start: 18px; }
.lightbox-next { inset-inline-end: 18px; }

.lightbox-counter {
  position: absolute;
  bottom: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  background: rgba(10,10,11,.65);
  border: 1px solid rgba(201,162,77,.5);
  color: var(--gold);
  font-size: .74rem;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.lightbox-counter[hidden] { display: none; }

.focus-view-project {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(10,10,11,.65);
  border: 1px solid rgba(201,162,77,.5);
  color: var(--gold);
  font-size: .78rem;
  letter-spacing: .03em;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.focus-view-project:hover { background: var(--gold); color: #16130a; transform: translateX(-50%) translateY(-2px); }
.focus-view-project[hidden] { display: none; }

@media (max-width: 760px) {
  .detail-hero { padding: 90px 20px 36px; }
  .detail-hero h2 { font-size: 1.6rem; }
  .detail-desc { font-size: .92rem; }
  .detail-grid-wrap { padding: 36px 16px 80px; }
  .detail-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .lightbox-close { top: 16px; inset-inline-end: 16px; width: 38px; height: 38px; }
  .media-focus { padding: 0; }
  .lightbox-stage-wrap { height: 100vh; border-radius: 0; }
  .lightbox-stage .yt-play { width: 62px; height: 62px; font-size: 1rem; }
  .focus-view-project { font-size: .72rem; padding: 8px 16px; bottom: 18px; }
}

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

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.contact-list { margin: 36px 0; }
.contact-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-label {
  color: var(--gray);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.contact-list a:hover { color: var(--gold); }

.social-row { display: flex; gap: 14px; }
.social-icon {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--gray);
  transition: all .3s var(--ease);
}
.social-icon:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.social-icon svg { width: 18px; height: 18px; }
.social-icon svg, .social-icon svg * { fill: currentColor !important; }

.contact-form {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: .82rem;
  color: var(--gray);
  margin-bottom: 8px;
  letter-spacing: .03em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 16px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.form-group textarea { resize: vertical; }

.form-note {
  margin-top: 14px;
  font-size: .88rem;
  color: var(--gold);
  min-height: 1.2em;
}
.form-note.form-note-error { color: #e08a8a; }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 46px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-nav { display: flex; gap: 28px; }
.footer-nav a { color: var(--gray); font-size: .9rem; }
.footer-nav a:hover { color: var(--gold); }
.footer-legal { text-align: end; }
.footer-copy { color: var(--gray-dim); font-size: .85rem; }
.footer-credit { margin-top: 4px; }
.footer-credit a { color: var(--gray-dim); font-size: .72rem; opacity: .7; }
.footer-credit a:hover { color: var(--gold); opacity: 1; }

/* ================= CURSOR GLOW ================= */

.cursor-glow {
  position: fixed;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,77,.06), transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 5;
  transition: opacity .3s;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-inner { grid-template-columns: 1fr; gap: 50px; }
  .about-visual { max-width: 340px; margin: 0 auto; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-inner { grid-template-columns: 1fr; gap: 50px; }

  .team-showcase {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 36px;
  }
  .team-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
  }
  .team-list::before { top: 50%; left: 4px; right: 4px; bottom: auto; width: auto; height: 1px; transform: translateY(-50%); }
  .team-avatar { width: 44px; height: 44px; }
  .team-portrait-wrap { order: -1; justify-self: center; max-width: 300px; min-width: 0; }
  .team-info { max-width: 460px; min-width: 0; }
  .portrait-glow { inset: -12px; }
}

@media (max-width: 760px) {
  .section { padding: 90px 0; }

  .main-nav {
    position: fixed;
    top: 0; inset-inline-end: -100%;
    width: min(320px, 80vw);
    height: 100vh;
    background: var(--black-2);
    border-inline-start: 1px solid var(--line);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    padding: 40px;
    transition: inset-inline-end .4s var(--ease);
  }
  .main-nav.open { inset-inline-end: 0; }

  .header-actions .btn-gold.btn-sm { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero-stats { gap: 34px; }
  .stat-num, .stat-plus { font-size: 1.7rem; }

  .services-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-nav { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .footer-legal { text-align: center; }
}