/* Component styles — extracted verbatim from the approved skeleton v3 (uploads/index.html) */
/* nav (sticky) */
.site-header{ position:sticky; top:0; z-index:50; background:var(--scrim-nav); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; flex-wrap:wrap; }
.nav-name{ font-weight:900; font-stretch:var(--stretch-display); text-transform:uppercase; font-size:15px; letter-spacing:.06em; color:var(--cream); }
.nav-name:hover{ text-decoration:none; }
.nav-links{ display:flex; gap:22px; flex-wrap:wrap; }
.nav-links a{ font-family:var(--font-mono); font-size:var(--text-nav); letter-spacing:var(--track-nav); text-transform:lowercase; color:var(--cream-60); transition:color var(--transition-hover); }
.nav-links a:hover{ color:var(--cream); text-decoration:none; }
.nav-toggle{ display:none; background:none; border:0; padding:0; cursor:pointer; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--cream); transition:transform var(--transition-hover), opacity var(--transition-hover), background var(--transition-hover); }
.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); }
.nav-toggle:hover span{ background:var(--leaf); }
/* hero */
.hero{ position:relative; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; background:var(--ink-2); display:flex; align-items:center; justify-content:center; }
.hero-media .ph-label{ position:relative; }
.hero-media::after{ content:""; position:absolute; inset:0; background:var(--overlay-hero); }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; border:0; pointer-events:none; }
.hero-content{ position:relative; z-index:1; width:100%; padding-block:56px; }
.hero h1{ font-size:var(--text-display-xl); }
.hero .tagline{ max-width:52ch; margin-top:18px; font-style:italic; color:var(--cream-60); }
.stats{ display:flex; gap:clamp(24px,6vw,72px); flex-wrap:wrap; margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
.stat b{ display:block; font-size:var(--text-stat); font-weight:900; font-stretch:var(--stretch-display); line-height:1; }
.stat span{ font-family:var(--font-mono); font-size:12px; letter-spacing:var(--track-stat-unit); color:var(--ember); text-transform:lowercase; }
.scroll-cue{ position:absolute; right:var(--pad); bottom:24px; z-index:1; font-family:var(--font-mono); font-size:11px; letter-spacing:.3em; color:var(--cream-35); writing-mode:vertical-rl; }
/* about */
.about{ padding-block:var(--pad-about); }
.about-grid{ display:grid; grid-template-columns:1.4fr auto; gap:clamp(28px,4vw,56px); align-items:stretch; }
.about h2{ font-size:var(--text-display-s); margin:14px 0 22px; }
.about p{ color:var(--cream-60); margin-bottom:16px; max-width:58ch; text-align:justify; text-wrap:pretty; hyphens:auto; }
.about .lead{ color:var(--cream); font-size:var(--text-lead); max-width:44ch; margin-bottom:24px; text-align:left; }
.about p.eyebrow{ text-align:left; }
/* justified body copy across project rows */
.hero-copy p, .row p, .projects p{ text-align:justify; text-wrap:pretty; }
.hero-copy p.eyebrow, .row p.eyebrow, .projects p.eyebrow, .row .sub, .card p{ text-align:left; }
/* portrait bleeds past the right page edge — deck slide style; the ONE rounded element */
.portrait{ background:var(--ink-2); border:1px solid var(--leaf); border-radius:var(--radius-portrait); aspect-ratio:3/4; width:min(420px,34vw); height:auto; align-self:center; justify-self:end; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.portrait img{ width:100%; height:100%; object-fit:cover; }
/* marquees */
.clients{ padding-block:36px; border-block:1px solid var(--line); overflow:hidden; }
.marquee{ display:flex; gap:56px; width:max-content; animation:as-marquee var(--marquee-clients) linear infinite; }
.marquee span{ font-family:var(--font-mono); font-size:var(--text-clients); letter-spacing:var(--track-clients); color:var(--leaf); white-space:nowrap; }
.bts-roll{ overflow:hidden; }
/* stats separator band (replaces client marquee) */
.stats-band{ padding-block:36px; border-block:1px solid var(--line); }
.bts-roll{ overflow:hidden; padding-block:0; position:relative; }
.bts-roll::before{ content:""; position:absolute; top:0; left:0; right:0; height:clamp(140px,24vw,280px); background:linear-gradient(to bottom, var(--ink), rgba(16,16,16,.85) 30%, rgba(16,16,16,.45) 60%, rgba(16,16,16,.15) 82%, rgba(16,16,16,0)); z-index:1; pointer-events:none; }
.bts-track{ display:flex; gap:0; width:max-content; animation:as-marquee 230s linear infinite; }
.bts-track .shot{ width:clamp(200px,22vw,300px); aspect-ratio:2/3; flex:none; background:var(--ink-2); overflow:hidden; }
.bts-track .shot img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
/* section breaker (v3, narrower) */
.breaker{ position:relative; min-height:34svh; display:flex; align-items:center; padding-block:var(--pad-breaker); border-block:1px solid var(--line); overflow:hidden; background:var(--ink-2); }
.breaker-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
.breaker::after{ content:""; position:absolute; inset:0; background:var(--overlay-breaker); }
.breaker .wrap{ position:relative; z-index:1; margin-left:0; max-width:none; }
.breaker h2{ font-size:var(--text-display-l); margin-top:12px; }
.breaker .sub{ color:var(--cream-60); margin-top:14px; max-width:46ch; }
/* project rows + cards */
.projects{ padding-block:var(--pad-projects); display:flex; flex-direction:column; gap:clamp(72px,10vw,128px); }
.row{ display:grid; gap:var(--gap-grid); }
.row.cols-2{ grid-template-columns:repeat(2,1fr); }
.row.cols-3{ grid-template-columns:repeat(3,1fr); }
.row.full{ grid-template-columns:1fr; }
.row.hero-row{ grid-template-columns:1.6fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.row.hero-row.flip{ grid-template-columns:1fr 1.6fr; }
.row.hero-row.flip .card{ order:2; }
.hero-copy h3{ font-size:var(--text-hero-copy-title); font-weight:800; }
.hero-copy .roles-line{ font-family:var(--font-mono); font-size:12px; letter-spacing:var(--track-nav); text-transform:lowercase; color:var(--ember); margin-top:10px; }
.hero-copy .desc{ color:var(--cream-60); font-size:var(--text-hero-copy-desc); margin-top:14px; }
.card{ cursor:pointer; }
.thumb{ aspect-ratio:16/9; background:var(--ink-2); border:1px solid var(--line); border-radius:10px; position:relative; display:flex; align-items:center; justify-content:center; transition:border-color var(--transition-hover); overflow:hidden; }
.thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb .play{ position:absolute; right:12px; bottom:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--cream); background:var(--scrim-chip); border:1px solid var(--line); padding:6px 10px; }
.card:hover .thumb, .card:focus-visible .thumb{ border-color:var(--leaf); }
.card h3{ font-size:var(--text-card-title); font-weight:700; margin-top:var(--gap-card-title); }
/* bts section */
.bts{ padding-block:clamp(56px,8vw,100px); border-top:1px solid var(--line); }
.bts .wrap{ margin-bottom:28px; }
/* contact */
.contact{ padding-block:var(--pad-contact); padding-bottom:clamp(28px,4vw,48px); border-top:1px solid var(--line); }
.contact h2{ font-size:var(--text-display-m); }
.contact-links{ margin-top:44px; display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.contact-links a, .contact-icon{ width:52px; height:52px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--cream); transition:border-color var(--transition-hover), color var(--transition-hover); }
.contact-links a:hover, .contact-icon:hover{ border-color:var(--leaf); color:var(--leaf); text-decoration:none; }
.contact-links svg, .contact-icon svg{ width:20px; height:20px; }
/* footer */
.site-footer{ border-top:1px solid var(--line); padding-block:20px; font-family:var(--font-mono); font-size:var(--text-micro); letter-spacing:var(--track-micro); color:var(--cream-35); text-transform:lowercase; }
/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:var(--scrim-lightbox); backdrop-filter:blur(6px); padding:clamp(16px,4vw,48px); }
.lightbox.open{ display:flex; }
.lb-inner{ width:min(1100px, 100%, calc((100vh - 160px) * 16 / 9)); }
.lb-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.lb-title{ font-family:var(--font-mono); font-size:13px; letter-spacing:.2em; color:var(--cream-60); text-transform:lowercase; }
.lb-close{ font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; color:var(--cream); background:none; border:1px solid var(--line); padding:8px 14px; cursor:pointer; transition:border-color var(--transition-hover), color var(--transition-hover); }
.lb-close:hover{ border-color:var(--leaf); color:var(--leaf); }
.lb-frame{ aspect-ratio:16/9; background:#000; }
.lb-frame iframe{ width:100%; height:100%; border:0; }
.lb-pending{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
/* responsive */
@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; }
  .about-grid .portrait{ order:-1; width:min(420px,100%); max-width:420px; aspect-ratio:3/4; height:auto; justify-self:start; }
  .row.cols-3{ grid-template-columns:repeat(2,1fr); }
  .row.hero-row, .row.hero-row.flip{ grid-template-columns:1fr; }
  .row.hero-row.flip .card{ order:0; }
}
@media (max-width: 700px){
  /* nav: hamburger dropdown */
  .nav-toggle{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; }
  .nav-links{ display:none; }
  .nav-links.open{ display:flex; width:100%; flex-direction:column; gap:0; padding-bottom:10px; }
  .nav-links.open a{ display:flex; align-items:center; min-height:44px; width:100%; border-top:1px solid var(--line); }
  /* hero: vertical 9:16 loop on phones (src swapped by script) */
  .hero-media iframe{ width:100vw; height:177.78vw; min-height:100%; min-width:56.25vh; }
  .hero h1{ font-size:clamp(40px,11.5vw,96px); }
  .scroll-cue{ display:none; }
  .hero-content{ padding-block:40px 32px; }
  /* left-align body copy on phones — justify makes rivers at narrow measure */
  .about p, .hero-copy p, .row p, .projects p{ text-align:left; hyphens:none; }
  /* contact: full-width heading; logo left, links + email right */
  .contact .wrap{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; }
  .contact h2{ grid-column:1 / -1; justify-self:center; text-align:center; font-size:clamp(30px,10vw,70px); white-space:nowrap; }
  .contact .wrap > img{ position:static !important; grid-column:2; grid-row:2 / span 2; width:clamp(96px,26vw,140px) !important; margin-top:40px; justify-self:end; }
  .contact-links{ grid-column:1; grid-row:2; justify-self:start; }
  .contact .wrap > p{ grid-column:1; grid-row:3; justify-self:start; text-align:left; }
  /* community: both card paragraphs span the same full measure */
  .row.cols-2 p{ max-width:none !important; }
  /* bts strip: smaller shots, longer loop feel on phones */
  .bts-track .shot{ width:clamp(140px,42vw,220px); }
  /* breaker titles: one size for all sections, always inside the page */
  .breaker h2{ font-size:clamp(20px,6.8vw,40px); overflow-wrap:anywhere; }
  .breaker .sub{ max-width:none; }
}
@media (max-width: 560px){
  .row.cols-2, .row.cols-3{ grid-template-columns:1fr; gap:72px; }
  .stats{ flex-wrap:nowrap; gap:16px; justify-content:space-between; }
  .stat b{ font-size:clamp(26px,7.5vw,34px); }
}

/* arabic project titles — bilingual card/hero titles.
   The English title is the main title; the Arabic sits to its right, one step smaller,
   and wraps beneath rather than compressing the English. Alexandria 500 only, never
   the display or mono face, never used for body copy or labels. */
.title-bi{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 20px; }
.title-ar{
  font-family:var(--font-arabic);
  font-size:var(--text-card-title-ar);
  font-weight:var(--weight-arabic);
  line-height:1.1;
  color:var(--cream);
  white-space:nowrap;
}