/* ============================================================
   Mohammad Al-Droubi — Creative AI Director
   Design tokens: "Cinematic Atelier"
   ============================================================ */

:root{
  --bone:        #EDE6DA;   /* warm neutral base — gallery sections */
  --bone-dim:    #E3DACB;
  --espresso:    #14100E;   /* cinematic dark — showcase sections   */
  --espresso-2:  #1C1714;
  --ink:         #201A16;   /* text on bone */
  --paper:       #F6F1E8;   /* text on espresso */
  --amber:       #C1652F;   /* signature accent, pulled from the Aputure grade */
  --amber-dim:   #8C4522;
  --line:        rgba(32,26,22,0.14);
  --line-dark:   rgba(246,241,232,0.16);

  --display: 'Fraunces', serif;
  --body:    'Inter', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --ease: cubic-bezier(.22,.9,.32,1);
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  overflow-x:hidden;
}

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

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ---------------- Intro ---------------- */
#intro{
  position:fixed; inset:0; z-index:100;
  background:var(--espresso);
  display:flex; align-items:center; justify-content:center;
  animation: intro-out 0.9s var(--ease) 2.4s forwards;
}
.intro-name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.2rem, 6vw, 4.5rem);
  letter-spacing:0.04em;
  line-height:1.05;
  text-align:center;
  color:var(--paper);
  opacity:0;
  animation: name-in 1.1s var(--ease) 0.3s forwards;
}
@keyframes name-in{
  0%{ opacity:0; letter-spacing:0.15em; }
  100%{ opacity:1; letter-spacing:0.04em; }
}
@keyframes intro-out{
  0%{ opacity:1; visibility:visible; }
  99%{ opacity:0; visibility:visible; }
  100%{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* ---------------- Nav ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.5rem, 4vw, 3.5rem);
  opacity:0;
  animation: fade-in 1s var(--ease) 3.1s forwards;
  mix-blend-mode:difference;
}
@keyframes fade-in{ to{ opacity:1; } }
.nav-mark{
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.08em;
  color:var(--paper);
}
.nav-links{ display:flex; gap:clamp(1.2rem,2.5vw,2.4rem); }
.nav-links a{
  font-family:var(--body);
  font-size:0.85rem;
  letter-spacing:0.03em;
  color:var(--paper);
  position:relative;
  padding-bottom:2px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:currentColor;
  transition:width .35s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-links a.active::after{ width:100%; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  height:100svh;
  width:100%;
  overflow:hidden;
  background:var(--espresso);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(0.78) saturate(1.05);
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,14,0.55) 0%, rgba(20,16,14,0.15) 30%, rgba(20,16,14,0.35) 70%, rgba(20,16,14,0.85) 100%);
}
.hero-credit{
  position:absolute; top:6.2rem; left:clamp(1.5rem,4vw,3.5rem);
  z-index:2;
  display:flex; flex-direction:column; gap:0.2rem;
  font-family:var(--mono);
  color:var(--paper);
}
.hero-credit .eyebrow{ font-size:0.68rem; letter-spacing:0.18em; opacity:0.6; }
.hero-credit .credit-name{ font-size:0.8rem; letter-spacing:0.04em; }

.hero-content{
  position:absolute; left:clamp(1.5rem,4vw,3.5rem); bottom:6.5rem;
  z-index:2; max-width:46rem;
}
.hero-kicker{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:1.1rem;
}
.hero-line{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 5vw, 4.2rem);
  line-height:1.08;
  color:var(--paper);
  letter-spacing:-0.01em;
}
.hero-line em{ font-style:italic; font-weight:500; color:var(--paper); }

.scroll-cue{
  position:absolute; right:clamp(1.5rem,4vw,3.5rem); bottom:6.5rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  color:var(--paper); font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em;
}
.scroll-line{ width:1px; height:3.2rem; background:var(--line-dark); position:relative; overflow:hidden; }
.scroll-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--paper);
  animation: scroll-run 1.8s ease-in-out infinite;
}
@keyframes scroll-run{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

/* ---------------- Video controls (sound + expand) ---------------- */
.video-controls{
  position:absolute; top:6.2rem; right:clamp(1.5rem,4vw,3.5rem); z-index:3;
  display:flex; gap:0.6rem;
}
.pill-toggle{
  display:flex; align-items:center; gap:0.5rem;
  background:rgba(20,16,14,0.35);
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:0.5rem 0.95rem 0.5rem 0.8rem;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em;
  color:var(--paper);
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.pill-toggle:hover{ background:rgba(20,16,14,0.55); border-color:var(--paper); }
.pill-toggle .pill-icon{ font-size:0.85rem; line-height:1; opacity:0.9; }
.pill-toggle[aria-pressed="true"]{ border-color:var(--amber); }
.pill-toggle .pill-label{ font-size:0.7rem; }
.pill-toggle--compact{ padding:0.55rem; }
.pill-toggle--compact .pill-icon{ font-size:0.95rem; }

/* Inline video frame — companion film, nail-beauty commercial */
.video-frame{ position:relative; }
.video-frame .pill-toggle--compact{
  position:absolute; top:0.8rem; right:0.8rem; z-index:2;
  background:rgba(20,16,14,0.55);
}

/* ---------------- Lightbox ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:500;
  background:rgba(10,8,7,0.95);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-stage{ max-width:94vw; max-height:90vh; display:flex; }
.lightbox-video{
  position:relative !important; inset:auto !important;
  top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
  max-width:94vw !important; max-height:90vh !important;
  width:auto !important; height:auto !important;
  display:block; background:#000; object-fit:contain !important; filter:none !important;
  box-shadow:0 40px 100px rgba(0,0,0,0.65);
}
.lightbox-close{
  position:fixed; top:1.5rem; right:clamp(1.2rem,4vw,2.5rem); z-index:501;
  width:2.7rem; height:2.7rem; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid var(--line-dark);
  color:var(--paper); font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.lightbox-close:hover{ background:rgba(255,255,255,0.18); transform:rotate(90deg); }
body.lightbox-lock{ overflow:hidden; }

/* ---------------- Manifesto ---------------- */
.manifesto{
  background:var(--bone);
  padding:clamp(5rem,12vw,9rem) clamp(1.5rem,4vw,3.5rem);
}
.manifesto-inner{ max-width:52rem; margin:0 auto; }
.manifesto-eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--amber-dim);
  margin-bottom:1.8rem;
}
.manifesto-text{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.4rem, 2.6vw, 2.15rem);
  line-height:1.45;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.manifesto-tags{
  margin-top:2.8rem;
  display:flex; gap:0.9rem; flex-wrap:wrap;
}
.manifesto-tags span{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  padding:0.5rem 0.9rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
}

/* ---------------- Work teaser ---------------- */
.teaser{
  background:var(--espresso);
  color:var(--paper);
  padding:clamp(5rem,14vw,10rem) clamp(1.5rem,4vw,3.5rem);
  text-align:center;
}
.teaser-eyebrow{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--amber); margin-bottom:1.4rem;
}
.teaser-heading{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.8rem, 4.2vw, 3.4rem);
  line-height:1.15;
  margin-bottom:2.4rem;
}
.teaser-link{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-family:var(--body); font-size:1rem; letter-spacing:0.02em;
  padding:0.9rem 0.2rem;
  border-bottom:1px solid var(--line-dark);
  transition:gap .3s var(--ease), border-color .3s var(--ease);
}
.teaser-link:hover{ gap:1.1rem; border-color:var(--paper); }
.arrow{ font-size:1.1rem; }

/* ---------------- Footer ---------------- */
.site-footer{
  background:var(--espresso);
  color:var(--paper);
  opacity:0.5;
  display:flex; justify-content:space-between;
  padding:1.6rem clamp(1.5rem,4vw,3.5rem) 2.4rem;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em;
}

/* ============================================================
   Shared sub-page components
   ============================================================ */

.site-nav.is-visible{ opacity:1; }

.page-body{ background:var(--bone); }
.page-body--dark{ background:var(--espresso); }

.page-hero{
  padding:clamp(9rem,16vw,12rem) clamp(1.5rem,4vw,3.5rem) clamp(3rem,6vw,4rem);
  max-width:60rem;
}
.page-hero-eyebrow{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--amber-dim); margin-bottom:1.6rem;
}
.page-hero-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem, 5vw, 3.6rem); line-height:1.14; letter-spacing:-0.01em;
}
.page-hero-title em{ font-style:italic; color:var(--amber-dim); }

/* ---- Work grid ---- */
.work-group{ padding:2rem clamp(1.5rem,4vw,3.5rem) clamp(4rem,8vw,6rem); background:var(--bone); }
.work-group--dark{ background:var(--espresso); color:var(--paper); }
.work-group-label{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.16em;
  text-transform:uppercase; opacity:0.55; margin-bottom:2rem;
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:2.4rem 1.8rem;
}
.work-card{ display:block; color:inherit; }
.work-card-frame{
  aspect-ratio:4/5; overflow:hidden; border-radius:2px;
  background:var(--espresso-2);
}
.work-card-media{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease);
}
.work-card:hover .work-card-media{ transform:scale(1.045); }
.work-card-meta{
  display:flex; align-items:flex-start; gap:0.9rem;
  padding-top:1.1rem;
}
.work-card-index{ font-family:var(--mono); font-size:0.72rem; opacity:0.5; padding-top:0.2rem; }
.work-card-title{
  font-family:var(--display); font-size:1.15rem; font-weight:500; line-height:1.3;
}
.work-card-logline{ font-family:var(--body); font-size:0.86rem; opacity:0.65; margin-top:0.3rem; line-height:1.4; }
.work-card-cat{
  margin-left:auto; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.06em;
  opacity:0.55; white-space:nowrap; padding-top:0.25rem;
}

/* ---- Project page ---- */
.project-hero{ position:relative; height:82vh; min-height:26rem; overflow:hidden; background:var(--espresso); }
.project-hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,14,0.35) 0%, rgba(20,16,14,0.1) 40%, rgba(20,16,14,0.9) 100%);
}
.project-hero-copy{
  position:absolute; left:clamp(1.5rem,4vw,3.5rem); bottom:3.2rem; z-index:2; max-width:44rem;
}
.project-eyebrow{
  display:block; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--amber); margin-bottom:1rem;
}
.project-title{ font-family:var(--display); font-weight:400; color:var(--paper); font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.12; }
.project-logline{ font-family:var(--body); color:var(--paper); opacity:0.75; margin-top:1rem; font-size:1.05rem; max-width:34rem; }

.project-body{ max-width:64rem; margin:0 auto; padding:clamp(4rem,9vw,6rem) clamp(1.5rem,4vw,3.5rem); }
.project-body-text{ max-width:42rem; margin:0 auto; }
.project-description{ font-family:var(--body); font-size:1.08rem; line-height:1.75; color:var(--ink); }
.project-transform-note{
  font-family:var(--mono); font-size:0.78rem; color:var(--amber-dim); margin-top:1.6rem; letter-spacing:0.02em;
}
.project-gallery{ margin:clamp(3rem,7vw,4.5rem) 0; }
.project-gallery-section{ margin-bottom:clamp(3.5rem,8vw,5.5rem); }
.project-gallery-section:last-child{ margin-bottom:0; }
.project-section-label{
  display:flex; align-items:baseline; gap:0.8rem;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink); margin-bottom:1.4rem; max-width:none;
  border-top:1px solid var(--line); padding-top:1.1rem;
}
.project-section-num{ color:var(--amber-dim); font-weight:500; }
.project-section-count{
  margin-left:auto; color:var(--ink); opacity:0.4; text-transform:none; letter-spacing:0.02em;
}
.project-feature{ width:100%; border-radius:2px; display:block; margin-bottom:1.2rem; }
.project-gallery-grid{
  column-count:3; column-gap:1rem;
}
.project-gallery-grid img{
  width:100%; display:block; border-radius:2px; margin-bottom:1rem; break-inside:avoid;
}
.project-second{ margin-top:0; }
.project-still{ width:100%; border-radius:2px; display:block; }
.project-credits{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:0.76rem; opacity:0.6;
}
.project-next{ background:var(--espresso); color:var(--paper); text-align:center; padding:clamp(3rem,7vw,5rem); }
.project-next-link{
  display:inline-flex; align-items:center; gap:0.7rem; font-size:1rem;
  border-bottom:1px solid var(--line-dark); padding-bottom:0.5rem;
  transition:gap .3s var(--ease);
}
.project-next-link:hover{ gap:1.1rem; }

/* ---- Services ---- */
.services-list{ padding:0 clamp(1.5rem,4vw,3.5rem) clamp(3rem,6vw,4rem); }
.service-row{
  display:grid; grid-template-columns:4rem 1fr; gap:1.6rem;
  padding:2.4rem 0; border-top:1px solid var(--line);
}
.service-row:last-child{ border-bottom:1px solid var(--line); }
.service-index{ font-family:var(--mono); font-size:0.85rem; color:var(--amber-dim); padding-top:0.3rem; }
.service-copy h2{
  font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.9rem); margin-bottom:0.7rem;
}
.service-copy p{ font-family:var(--body); font-size:1rem; line-height:1.6; opacity:0.75; max-width:34rem; }
.services-availability{
  background:var(--espresso); color:var(--paper);
  padding:clamp(4rem,9vw,6rem) clamp(1.5rem,4vw,3.5rem);
  text-align:center;
}
.services-availability p{
  font-family:var(--display); font-size:clamp(1.2rem,2.4vw,1.7rem); max-width:38rem; margin:0 auto 2.2rem;
  line-height:1.5;
}

/* ---- About ---- */
.about-hero{
  display:grid; grid-template-columns:1fr 1.2fr; align-items:end; gap:2.5rem;
  padding:clamp(9rem,15vw,11rem) clamp(1.5rem,4vw,3.5rem) 0;
  max-width:72rem; margin:0 auto;
}
.about-portrait{ overflow:hidden; border-radius:2px; background:var(--espresso); }
.about-portrait img{ width:100%; display:block; filter:grayscale(1) contrast(1.05); }
.about-title{ font-family:var(--display); font-weight:400; font-size:clamp(2.4rem,6vw,4.4rem); line-height:1.05; }
.about-role{ font-family:var(--mono); font-size:0.85rem; letter-spacing:0.08em; margin-top:1rem; color:var(--amber-dim); }
.about-body{ max-width:42rem; margin:0 auto; padding:clamp(4rem,8vw,6rem) clamp(1.5rem,4vw,3.5rem); }
.about-para{ font-family:var(--body); font-size:1.08rem; line-height:1.8; margin-bottom:1.6rem; }
.about-quote{
  background:var(--espresso); color:var(--paper); text-align:center;
  padding:clamp(4rem,10vw,7rem) clamp(1.5rem,4vw,3.5rem);
}
.about-quote p{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,2.8vw,2rem); max-width:40rem; margin:0 auto; line-height:1.5;
}

/* ---- Contact ---- */
.contact-quote{
  text-align:center; color:var(--paper); padding:clamp(6rem,14vw,9rem) clamp(1.5rem,4vw,3.5rem) 0;
}
.contact-quote p{
  font-family:var(--display); font-style:italic; font-size:clamp(1.1rem,2.2vw,1.5rem);
  max-width:34rem; margin:0 auto; opacity:0.7; line-height:1.5;
}
.contact-main{
  text-align:center; color:var(--paper);
  padding:clamp(3rem,7vw,4rem) clamp(1.5rem,4vw,3.5rem) clamp(4rem,8vw,6rem);
}
.contact-title{
  font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,6vw,4.6rem); line-height:1.08; margin-bottom:3rem;
}
.contact-links{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.contact-link{
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  padding:0.6rem 0; color:var(--paper);
}
.contact-label{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; opacity:0.5; }
.contact-value{
  font-family:var(--display); font-size:clamp(1.1rem,2.2vw,1.5rem);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease);
}
.contact-link:hover .contact-value{ border-color:var(--amber); }

.site-footer--light{ background:var(--bone); color:var(--ink); opacity:0.55; }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-in{ opacity:1; transform:translateY(0); }

/* ---------------- Responsive ---------------- */
@media (max-width:640px){
  .hero-content{ bottom:8.5rem; }
  .scroll-cue{ display:none; }
  .nav-links{ gap:1rem; }
  .nav-links a{ font-size:0.75rem; }
  .about-hero{ grid-template-columns:1fr; align-items:start; }
  .about-portrait{ max-width:14rem; }
  .service-row{ grid-template-columns:2.4rem 1fr; }
  .project-gallery-grid{ column-count:1; }
  .video-controls{ top:5.6rem; gap:0.4rem; }
  .pill-toggle{ padding:0.45rem 0.7rem; }
  .pill-toggle .pill-label{ display:none; }
}
@media (min-width:641px) and (max-width:900px){
  .project-gallery-grid{ column-count:2; }
}