/* Layout: clean navy stage from the logo; three full-bleed reels of work that drift right-to-left and swell at the center. */
@font-face { font-family: "Modhesh"; src: url("fonts/modhesh.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DG Bebo"; src: url("fonts/dg-bebo-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
/* VIP Rawy draws 0-9 as Arabic digits, so digits fall through to the next font */
@font-face { font-family: "VIP Rawy"; src: url("fonts/vip-rawy.otf") format("opentype"); font-display: swap; unicode-range: U+0000-002F, U+003A-10FFFF; }

:root {
  --navy: #162e41;
  --navy-deep: #0e1f2c;
  --navy-soft: #1d3a52;
  --gold: #cdab66;
  --gold-dim: #a88a4d;
  --cream: #f5e6c3;
  --cream-mute: #c9bfa8;
  --line: rgba(205, 171, 102, .2);

  /* الخطوط: مدهش للعناوين، DG Bebo للثانوي، VIP Rawy للباقي. Alexandria بيكمّل أي حرف ناقص */
  --f-display: "Modhesh", "Alexandria", "Segoe UI", Tahoma, sans-serif;
  --f-second: "DG Bebo", "Alexandria", "Segoe UI", Tahoma, sans-serif;
  --f-body: "VIP Rawy", "Alexandria", "Segoe UI", Tahoma, sans-serif;

  --step--1: .85rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --step-3: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);

  --radius: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.95;
  word-spacing: .06em;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  overflow-x: hidden;
}
html[lang="en"] body { line-height: 1.7; word-spacing: normal; }
.nav-pill a, .btn, .text-link, .eyebrow, .lang-btn, .brand-name, .stats span, .tools li,
.timeline .where, .timeline .when, .contact-list .k, .lb-link, .menu-contact .k { font-family: var(--f-second); word-spacing: .12em; }
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 30;
  height: env(safe-area-inset-top, 0px); background: var(--navy-deep);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* Arabic display faces need tall lines so dots and shadda never touch the line above */
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.45; margin: 0; text-wrap: balance; }
html[lang="en"] :is(h1, h2, h3) { line-height: 1.15; }
h2 { font-size: var(--step-2); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow { margin: 0 0 .8rem; color: var(--gold); font-size: var(--step--1); }
html[lang="en"] :is(.eyebrow, .hero-role) { letter-spacing: .04em; }

/* ---------- top bar: brand | centered pill nav | language + menu ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(14, 31, 44, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); padding-block: .75rem; }
.brand { justify-self: start; display: flex; align-items: center; gap: .65rem; text-decoration: none; min-width: 0; }
.brand img { width: 42px; height: 42px; flex: none; }
.brand-name { display: grid; font-weight: 700; direction: ltr; text-align: left; white-space: nowrap; font-size: .92rem; line-height: 1.05; letter-spacing: .08em; text-transform: uppercase; }
.brand-name span:last-child { color: var(--gold); }
html[lang="ar"] .brand-name { direction: rtl; text-align: right; letter-spacing: 0; font-size: 1.05rem; line-height: 1.25; }
.nav-pill {
  display: flex; align-items: center; gap: .2rem; padding: .32rem;
  border-radius: 999px; background: rgba(29, 58, 82, .55); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(245, 230, 195, .05), 0 8px 24px rgba(0, 0, 0, .18);
}
.nav-pill a {
  text-decoration: none; padding: .32rem clamp(.55rem, 1.1vw, 1rem); border-radius: 999px;
  color: var(--cream-mute); font-size: clamp(.8rem, .95vw, .9rem); line-height: 1.7; white-space: nowrap;
  transition: color .2s, background .2s;
}
html[lang="en"] .nav-pill a { letter-spacing: .03em; font-size: clamp(.74rem, .9vw, .85rem); }
.nav-pill a:hover { color: var(--cream); background: rgba(245, 230, 195, .06); }
.nav-pill a.is-active { background: var(--gold); color: var(--navy-deep); box-shadow: 0 4px 14px rgba(205, 171, 102, .3); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: .5rem; }
.lang-btn {
  font: 700 var(--step--1) var(--f-second); color: var(--cream); min-width: 3.4rem; height: 44px;
  background: transparent; border: 1px solid var(--line); padding: 0 .9rem; border-radius: 999px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.burger {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; padding: 0;
  background: transparent; border: 1px solid var(--line);
  display: grid; place-content: center; gap: 5px; transition: border-color .2s, background .2s;
}
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform .3s, opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.lang-btn:hover, .burger:hover { border-color: var(--gold); background: var(--navy-soft); }

/* ---------- full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 19; overflow-y: auto;
  background: rgba(14, 31, 44, .97); backdrop-filter: blur(8px);
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
  animation: fade .25s ease;
}
.menu-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem 4rem; align-items: end; padding-block: clamp(2rem, 6vw, 4rem); }
.menu-links { display: flex; flex-direction: column; }
.menu-links a {
  font: 800 clamp(2rem, 1.4rem + 3vw, 3.4rem)/1.6 var(--f-display);
  color: var(--cream); text-decoration: none; transition: color .2s, transform .25s;
}
.menu-links a:hover { color: var(--gold); transform: translateX(-10px); }
html[dir="ltr"] .menu-links a:hover { transform: translateX(10px); }
.menu-contact { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-contact a {
  display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--cream);
}
.menu-contact .v { color: var(--gold); direction: ltr; font-size: var(--step--1); overflow-wrap: anywhere; min-width: 0; }

/* ---------- hero: centered headline, cut-out portrait overlapping it ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(45% 55% at 50% 80%, rgba(205,171,102,.18), transparent 70%),
    linear-gradient(var(--navy), var(--navy-deep));
}
.hero-rings {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 80%, transparent 0 90px, rgba(205,171,102,.08) 91px 92px);
  mask-image: radial-gradient(circle at 50% 80%, #000 15%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 80%, #000 15%, transparent 62%);
}
/* the home section fills the first screen under the top bar; the work starts below the fold */
.hero { --bar-h: 71px; display: flex; flex-direction: column; min-height: calc(100vh - var(--bar-h)); min-height: calc(100svh - var(--bar-h)); }
.hero-stage {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(1.25rem, 3.5vw, 2.75rem); text-align: center;
}
.hero-title { position: relative; z-index: 1; font-size: clamp(3rem, 1.4rem + 6.6vw, 7.6rem); line-height: 1.2; }
html[lang="en"] .hero-title { line-height: 1.02; letter-spacing: -.01em; }
.hero-title em { font-style: normal; color: var(--gold); }
/* each headline line sits in its own mask so it can rise into view */
.hero-title .line { display: block; overflow: hidden; padding: .12em .15em .02em; margin: -.12em -.15em -.02em; }
.hero-title .line-in { display: inline-block; }
.hero-row {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(-1.5rem, -1.2vw, -.5rem);
}
html[lang="en"] .hero-name { line-height: 1.2; }
.hero-id, .hero-cta { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero-id { justify-self: start; text-align: start; max-width: 21rem; }
.hero-name { margin: 0; font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1.5 var(--f-display); white-space: nowrap; }
.hero-role { margin: .1rem 0 0; font: 700 var(--step-0)/1.7 var(--f-second); color: var(--gold); word-spacing: .12em; }
.hero-intro { margin: .8rem 0 0; color: var(--cream-mute); font-size: .95rem; line-height: 1.9; }
.hero-photo { position: relative; width: clamp(240px, 30vw, 420px); }
.hero-photo .me {
  width: 100%; height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.45));
  mask-image: linear-gradient(#000 82%, transparent);
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
}
.badge {
  position: absolute; width: clamp(72px, 8vw, 110px); height: auto;
  inset-inline-start: -4%; bottom: 22%;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.hero-cta { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.6rem; border-radius: 999px; text-decoration: none; line-height: 1.4;
  transition: transform .2s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn .arr { display: inline-block; transition: transform .25s; }
.btn:hover .arr { transform: translateX(-4px); }
html[dir="ltr"] .btn .arr { transform: scaleX(-1); }
html[dir="ltr"] .btn:hover .arr { transform: scaleX(-1) translateX(-4px); }
.btn-gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 10px 30px rgba(205,171,102,.25); }
.btn-gold:hover { background: var(--cream); }
.text-link { color: var(--cream-mute); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 7px; transition: color .2s; }
.text-link:hover { color: var(--gold); }

.stats { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
.stats li { padding: 1rem 0 0; padding-inline-end: 2rem; margin-inline-end: 2rem; border-inline-end: 1px solid var(--line); }
.stats li:last-child { border: 0; margin: 0; padding-inline-end: 0; }
.stats b { display: block; font: 700 var(--step-2)/1.3 var(--f-second); color: var(--gold); direction: ltr; text-align: start; }
html[dir="rtl"] .stats b { text-align: right; }
.stats span { color: var(--cream-mute); font-size: var(--step--1); }


/* ---------- works reels ---------- */
.works { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.works + .works { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
#graphic { border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sec-head h2 { display: flex; align-items: center; gap: .8rem; }
.sec-head h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--gold); flex: none; }
/* each section gets its own gold icon instead of the dot */
#graphic { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2019l7-7%203%203-7%207-3-3z%27%2F%3E%3Cpath%20d%3D%27M18%2013l-1.5-7.5L2%202l3.5%2014.5L13%2018l5-5z%27%2F%3E%3Cpath%20d%3D%27M2%202l7.586%207.586%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E"); }
#motion { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%2710%27%2F%3E%3Cpath%20d%3D%27M10%208l6%204-6%204z%27%2F%3E%3C%2Fsvg%3E"); }
#video { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.2%206%203%2011l-.9-2.4c-.3-1.1.3-2.2%201.3-2.5l13.5-4c1.1-.3%202.2.3%202.5%201.3z%27%2F%3E%3Cpath%20d%3D%27M6.2%205.3l3.1%203.9%27%2F%3E%3Cpath%20d%3D%27M12.4%203.4l3.1%204%27%2F%3E%3Cpath%20d%3D%27M3%2011h18v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%27%2F%3E%3C%2Fsvg%3E"); }
#clients { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87%27%2F%3E%3Cpath%20d%3D%27M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3C%2Fsvg%3E"); }
#about { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%275%27%2F%3E%3Cpath%20d%3D%27M20%2021a8%208%200%200%200-16%200%27%2F%3E%3C%2Fsvg%3E"); }
:is(#graphic, #motion, #video, #clients, #about) .sec-head h2::before {
  width: .85em; height: .85em; border-radius: 0;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.arrows { display: flex; gap: .5rem; direction: ltr; }
.arrow {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  font: 400 1.6rem/1 var(--f-display); color: var(--cream);
  background: transparent; border: 1px solid var(--line);
  display: grid; place-items: center; padding-bottom: 4px;
  transition: background .2s, border-color .2s, color .2s;
}
.arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }

.reel {
  --card-w: clamp(190px, 21vw, 290px);
  --ratio: 4 / 5;
  position: relative; overflow: hidden; direction: ltr;
  padding-block: clamp(2rem, 4vw, 3rem);
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.works[data-shape="wide"] .reel { --card-w: clamp(260px, 32vw, 460px); --ratio: 16 / 9; }
.reel.dragging { cursor: grabbing; }
.reel-track { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); width: max-content; direction: ltr; will-change: transform; }

.card {
  position: relative; flex: none; width: var(--card-w); aspect-ratio: var(--ratio);
  padding: 0; margin: 0; border: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--navy-soft); cursor: pointer;
  transform-origin: center; will-change: transform;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--gold); opacity: var(--ring, 0); transition: opacity .3s;
}
.card .play {
  position: absolute; inset-inline-start: 50%; top: 50%; translate: -50% -50%;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(14,31,44,.75); border: 1.5px solid var(--gold);
  display: grid; place-items: center; opacity: .9; transition: transform .3s;
}
.card .play::before { content: ""; margin-left: 4px; border-left: 15px solid var(--cream); border-block: 9px solid transparent; }
.card:hover .play { transform: scale(1.12); }

/* a landscape piece inside a portrait strip keeps the strip's height and grows wider */
.works[data-shape="tall"] .card.is-wide { width: calc(var(--card-w) * 5 / 4 * 16 / 9); aspect-ratio: 16 / 9; }
.works[data-shape="tall"] .card.is-story { width: calc(var(--card-w) * 5 / 4 * 9 / 16); aspect-ratio: 9 / 16; }
.works[data-shape="tall"] .card.is-square { width: calc(var(--card-w) * 5 / 4); aspect-ratio: 1; }
/* vertical and square pieces inside a landscape strip keep the same height */
.works[data-shape="wide"] .card.is-story { width: calc(var(--card-w) * 9 / 16 * 9 / 16); aspect-ratio: 9 / 16; }
.works[data-shape="wide"] .card.is-square { width: calc(var(--card-w) * 9 / 16); aspect-ratio: 1; }
/* the motion strip mixes reels and landscape films, so it runs a little taller */
:is(#motion, #video) .reel { --card-w: clamp(300px, 38vw, 560px); }

.reel-foot { display: flex; justify-content: center; margin-top: clamp(.2rem, 1vw, .6rem); }
.all-works {
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .45rem .5rem .45rem 1.4rem; border-radius: 999px;
  font: 700 var(--step-0)/1.4 var(--f-second); word-spacing: .12em;
  color: var(--cream); text-decoration: none;
  background: linear-gradient(180deg, rgba(205,171,102,.14), rgba(205,171,102,.04));
  border: 1px solid rgba(205,171,102,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(245,230,195,.08);
  transition: background .3s, border-color .3s, color .3s, transform .3s, box-shadow .3s;
}
html[dir="rtl"] .all-works { padding: .45rem 1.4rem .45rem .5rem; }
.aw-arr {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--gold); color: var(--navy-deep); font-size: 1.05rem;
  transition: transform .3s, background .3s;
}
html[dir="ltr"] .aw-arr { transform: scaleX(-1); }
.all-works:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(205,171,102,.28); }
.all-works:hover .aw-arr { background: var(--navy-deep); color: var(--gold); transform: translateX(-4px); }
html[dir="ltr"] .all-works:hover .aw-arr { transform: scaleX(-1) translateX(-4px); }
.resume-foot { margin-top: clamp(2rem, 4vw, 3rem); }
html .aw-down, html[dir="ltr"] .aw-down { transform: none; }
html .all-works:hover .aw-down, html[dir="ltr"] .all-works:hover .aw-down { transform: translateY(3px); }

/* ---------- clients ---------- */
.clients { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.clients .sec-head { flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.sec-sub { margin: 0; color: var(--cream-mute); }
/* two strips of logos drifting in opposite directions; hovering a strip pauses it */
.logo-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(.7rem, 1.4vw, 1.1rem); }
.marquee { min-width: 0; }
.marquee {
  overflow: hidden; direction: ltr;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.mq-track {
  --gap: clamp(.6rem, 1.2vw, 1rem);
  list-style: none; margin: 0; padding: .4rem 0;
  display: flex; gap: var(--gap); width: max-content;
  animation: marquee var(--dur, 90s) linear infinite;
}
.marquee.is-reverse .mq-track { animation-direction: reverse; }
.marquee:hover .mq-track { animation-play-state: paused; }
/* the track holds the list twice, so sliding by half (plus half a gap) loops seamlessly */
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.logo-tile {
  display: grid; place-items: center;
  width: clamp(132px, 13vw, 176px); height: clamp(70px, 6.6vw, 88px); padding: 14px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(29, 58, 82, .35); text-decoration: none;
  transition: border-color .3s, background .3s, transform .3s;
}
.logo-tile:hover { border-color: var(--gold); background: var(--navy); transform: translateY(-3px); }
/* logos are prepared in white; a slight warm tint at rest, pure white on hover */
.logo-tile img { width: auto; height: auto; max-width: 100%; max-height: clamp(40px, 3.8vw, 56px); object-fit: contain; filter: sepia(.3); opacity: .72; transition: filter .3s, opacity .3s; pointer-events: none; }
.logo-tile:hover img { filter: none; opacity: 1; }
.logo-name { font: 700 var(--step--1)/1.3 var(--f-second); color: var(--cream-mute); text-align: center; }
/* featured strip: bigger tiles and logos, a touch brighter at rest */
.marquee.is-featured .logo-tile { width: clamp(210px, 21vw, 290px); height: clamp(108px, 10vw, 140px); padding: 18px 26px; border-color: rgba(205,171,102,.32); }
.marquee.is-featured .logo-tile img { max-height: clamp(64px, 6.2vw, 92px); opacity: .9; }
.marquee.is-featured { margin-bottom: clamp(.2rem, .8vw, .5rem); }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .mq-track { animation: none; }
  .mq-track li[aria-hidden], .mq-track li:has([aria-hidden]) { display: none; }
}

/* ---------- about ---------- */
.about { padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--line); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.about-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.about-text { min-width: 0; }
.about .sec-head { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.about-name { margin: 0 0 1rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--gold); }
.about-text p:not(.eyebrow) { color: var(--cream-mute); max-width: 40rem; margin: 0 0 1rem; }
.tools { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tools-label { margin: 1.4rem 0 0; font: 700 var(--step--1)/1.4 var(--f-second); color: var(--gold); letter-spacing: .04em; }
.tools-label + .tools { margin-top: .6rem; }
.tools + .tools { margin-top: .5rem; }
.tools.is-ai li { border-color: rgba(205, 171, 102, .45); background: rgba(205, 171, 102, .07); }

/* social icons (Behance, Vimeo, TikTok) */
.socials { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.socials a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--cream); background: rgba(245, 230, 195, .04);
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
.hero-id .socials { margin-top: 1rem; }
.tools li {
  font: 500 var(--step--1) var(--f-second); direction: ltr;
  padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--line); color: var(--cream);
}
.timeline { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--line); }
.timeline li { position: relative; padding: 0 1.4rem 1.5rem; display: grid; gap: .15rem; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: -5px; top: .75rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
}
.timeline .when { font-size: var(--step--1); color: var(--gold); direction: ltr; unicode-bidi: plaintext; text-align: start; }
.timeline .where { font-family: var(--f-second); font-weight: 600; unicode-bidi: plaintext; text-align: left; line-height: 1.5; }
html[dir="rtl"] :is(.timeline .where, .timeline .when) { text-align: right; }
.timeline .what { color: var(--cream-mute); font-size: var(--step--1); }

/* ---------- contact ---------- */
.contact { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--gold); color: var(--navy-deep); }
.contact-in { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.contact h2 { font-size: var(--step-3); font-weight: 900; }
.contact-sub { margin: .8rem 0 0; font-size: var(--step-1); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; min-width: 0; }
.contact-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.2rem; border-radius: var(--radius);
  background: var(--navy-deep); color: var(--cream); text-decoration: none;
  transition: transform .2s, background .2s;
}
.contact-list a:hover { transform: translateY(-2px); background: var(--navy); }
.contact-list .k { font-weight: 600; }
.contact-list .v { font-size: var(--step--1); color: var(--gold); direction: ltr; overflow-wrap: anywhere; min-width: 0; }

/* ---------- footer ---------- */
.foot { background: var(--navy-deep); border-top: 1px solid var(--line); }
.foot-in { display: flex; align-items: center; gap: .8rem; padding-block: 1.4rem; color: var(--cream-mute); font-size: var(--step--1); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 18, 26, .92); backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; } }
/* the panel takes the piece's own shape (--ar) and grows until it hits the
   screen's width or height; the bars above and below never cover the player */
.lb-panel {
  --ar: 16 / 9;
  --bars: 6.5rem;
  --pad: 32px;
  position: relative; display: flex; flex-direction: column;
  width: min(1100px, 100%, calc((100vh - var(--pad) - var(--bars)) * var(--ar)));
  width: min(1100px, 100%, calc((100dvh - var(--pad) - var(--bars)) * var(--ar)));
  max-height: 100%;
  background: var(--navy); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .6rem .5rem 1rem; }
html[dir="rtl"] .lb-bar { padding: .5rem 1rem .5rem .6rem; }
.lb-bar h3 { font-size: var(--step-0); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-media { background: #000; display: grid; place-items: center; min-height: 0; }
.lb-media iframe, .lb-media video { width: 100%; aspect-ratio: var(--ar); border: 0; display: block; }
.lb-media img { width: 100%; height: auto; max-height: calc(100dvh - var(--pad) - var(--bars)); object-fit: contain; }
.lb-info { padding: .55rem .6rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.lb-mid { display: flex; align-items: center; justify-content: center; gap: 1rem; min-width: 0; flex-wrap: wrap; }
.lb-count { font: 700 var(--step--1)/1 var(--f-second); color: var(--cream-mute); direction: ltr; letter-spacing: .06em; }
.lb-nav {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0; color: var(--cream);
  background: rgba(245, 230, 195, .06); border: 1px solid var(--line);
  transition: background .2s, border-color .2s, color .2s;
}
.lb-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
.lb-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* chevrons always point outward: back toward the start side, next toward the end side */
.lb-nav.is-next svg, html[dir="rtl"] .lb-nav svg { transform: scaleX(-1); }
html[dir="rtl"] .lb-nav.is-next svg { transform: none; }
.lb-link { color: var(--gold); font-weight: 600; }
.lb-close {
  flex: none; margin-inline-start: auto;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(245, 230, 195, .06); color: var(--cream); border: 1px solid var(--line); font-size: 1rem;
  transition: background .2s, border-color .2s;
}
.lb-close:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }
/* upright phones: give embedded players the full height so their controls have room;
   a landscape video plays letterboxed in the middle */
@media (max-width: 700px) and (orientation: portrait) {
  .lb-panel.is-player { --ar: 9 / 16 !important; }
}
/* wide screens: the arrows stay put beside where a landscape frame ends (--lw),
   whatever the shape of the piece, so you can keep clicking in one spot */
@media (min-width: 861px) {
  .lightbox {
    --lw: min(1100px, calc(100vw - 32px - 190px), calc((100vh - 32px - 6.5rem) * 16 / 9));
    --lw: min(1100px, calc(100vw - 32px - 190px), calc((100dvh - 32px - 6.5rem) * 16 / 9));
  }
  .lb-panel {
    overflow: visible;
    width: min(1100px, calc(100% - 190px), calc((100vh - var(--pad) - var(--bars)) * var(--ar)));
    width: min(1100px, calc(100% - 190px), calc((100dvh - var(--pad) - var(--bars)) * var(--ar)));
  }
  .lb-nav { position: fixed; top: 50%; translate: 0 -50%; width: 54px; height: 54px; }
  #lbPrev { inset-inline-start: calc(50% - var(--lw) / 2 - 86px); }
  #lbNext { inset-inline-end: calc(50% - var(--lw) / 2 - 86px); }
  .lb-info { justify-content: center; min-height: 3.2rem; }
}
@media (max-width: 700px) {
  .lightbox { padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .lb-panel { --pad: 16px; }
}

/* ---------- responsive ---------- */
/* the pill stays until there is truly no room for it beside the name */
@media (max-width: 860px) {
  .topbar-in { grid-template-columns: 1fr auto; }
  .nav-pill { display: none; }
}
@media (max-width: 860px) {
  .about-in, .contact-in, .menu-in { grid-template-columns: 1fr; }
  .hero-row { grid-template-columns: 1fr; justify-items: center; margin-top: clamp(-2rem, -4vw, -.75rem); }
  .hero-photo { order: 1; width: min(72vw, 340px); }
  .hero-id { order: 2; justify-self: center; text-align: center; padding-bottom: 0; margin-top: -1.5rem; }
  .hero-cta { order: 3; justify-self: center; align-items: center; padding-bottom: 3rem; }
  .reel { --card-w: 58vw; }
  .works[data-shape="wide"] .reel, :is(#motion, #video) .reel { --card-w: 78vw; }
  .works[data-shape="tall"] .card.is-wide { width: min(calc(var(--card-w) * 5 / 4 * 16 / 9), 88vw); }
}
@media (max-width: 520px) {
  .stats li { padding-inline-end: 1.1rem; margin-inline-end: 1.1rem; }
  .arrow { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .badge { animation: none; }
  .btn, .contact-list a { transition: none; }
}

/* =====================================================================
   motion — the hero plays a short title sequence, sections rise in on scroll.
   Hidden starting states only apply under html.anim (added by a head script),
   so the page is fully visible without JS or with reduced motion.
   ===================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); }

/* gold sweep that runs once across the second headline line */
.hero-title em.line-in {
  background: linear-gradient(100deg, var(--gold) 0 42%, #fbecc4 50%, var(--gold) 58% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* gentle pointer parallax (values set from JS on desktop) */
.hero-photo { translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 8px); transition: translate .7s var(--ease-out); }
.hero-rings { translate: calc(var(--mx, 0) * -26px) calc(var(--my, 0) * -16px); }
.hero-title { translate: calc(var(--mx, 0) * -8px) 0; transition: translate .9s var(--ease-out); }

/* --- intro: starting states --- */
html.anim .topbar { opacity: 0; transform: translateY(-100%); }
html.anim .hero-rings { opacity: 0; transform: scale(.55); }
html.anim .hero-title .line-in { opacity: 0; transform: translateY(110%) rotate(3deg); filter: blur(12px); }
html.anim .hero-photo .me { opacity: 0; transform: translateY(70px) scale(1.08); clip-path: inset(100% -20% -20% -20%); }
html.anim .badge { opacity: 0; scale: .2; }
html.anim :is(.hero-id, .hero-cta) > * { opacity: 0; transform: translateY(28px); }

/* --- intro: end states (html.intro is added once fonts are ready) --- */
html.anim.intro .topbar { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--ease-out); }
html.anim.intro .hero-rings {
  opacity: 1; transform: none;
  transition: opacity 1.8s ease .15s, transform 2.4s var(--ease-out) .15s, translate .9s var(--ease-out);
}
html.anim.intro .hero-title .line-in {
  opacity: 1; transform: none; filter: none;
  transition: transform 1.3s var(--ease-out), opacity 1s ease, filter 1.1s ease;
}
html.anim.intro .hero-title .line:nth-child(1) .line-in { transition-delay: .15s; }
html.anim.intro .hero-title .line:nth-child(2) .line-in { transition-delay: .34s; }
html.anim.intro .hero-title em.line-in { animation: shimmer 2.2s ease 1.7s both; }
html.anim.intro .hero-photo .me {
  opacity: 1; transform: none; clip-path: inset(-20% -20% -20% -20%);
  transition: clip-path 1.5s var(--ease-out) .5s, transform 1.8s var(--ease-out) .5s, opacity .5s ease .5s;
}
html.anim.intro .badge { opacity: 1; scale: 1; transition: opacity .4s ease 1.35s, scale 1s var(--ease-back) 1.35s; }
html.anim.intro :is(.hero-id, .hero-cta) > * {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s var(--ease-out);
  transition-delay: calc(1s + var(--i, 0) * .12s);
}
.hero-id > :nth-child(2) { --i: 1; }
.hero-id > :nth-child(3) { --i: 2; }
.hero-cta > :nth-child(1) { --i: 1; }
.hero-cta > :nth-child(2) { --i: 2; }

/* --- scroll reveals --- */
html.anim .rv {
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s ease, transform 1.2s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.anim .rv.is-in { opacity: 1; transform: none; }
/* the icon pops in first, then the words rise out of their mask beside it */
html.anim .sec-head h2.rv { transform: none; transition: opacity .4s ease; }
html.anim .sec-head h2.rv .h2-in { display: inline-block; transform: translateY(45%); clip-path: inset(100% -10% -30% -10%); }
html.anim .sec-head h2.rv.is-in .h2-in {
  transform: none; clip-path: inset(-30% -10% -30% -10%);
  transition: clip-path 1.1s var(--ease-out) .3s, transform 1.2s var(--ease-out) .3s;
}
html.anim .sec-head h2.rv::before { scale: 0; transition: scale .6s var(--ease-back); }
html.anim .sec-head h2.rv.is-in::before { scale: 1; }
/* reels slide in from the side they drift toward */
.works { overflow-x: clip; }
html.anim .reel.rv { transform: translateX(-60px); }
html[dir="ltr"].anim .reel.rv { transform: translateX(60px); }
html.anim .reel.rv.is-in { transform: none; transition: opacity 1.2s ease, transform 1.6s var(--ease-out); }

/* the display and secondary fonts draw "&" badly or as a substitute glyph */
.amp { font-family: "Alexandria", "Segoe UI", sans-serif; font-weight: 700; color: var(--gold); padding-inline: .12em; }
.nav-pill a.is-active .amp, .menu-links a:hover .amp { color: inherit; }

/* desktop hero scales with the screen's height too, so taller screens fill up
   instead of leaving empty space above the headline */
@media (min-width: 861px) {
  .hero-stage { justify-content: center; padding-top: clamp(1rem, 3vh, 2.5rem); }
  .hero-title { font-size: clamp(3rem, min(1.4rem + 6.6vw, 13vh), 9.5rem); }
  .hero-photo { width: clamp(260px, min(36vw, 60vh), 660px); }
  .hero-id { max-width: 25rem; }
  .hero-name { font-size: clamp(1.5rem, min(1.1rem + 1.5vw, 4.6vh), 2.9rem); }
  .hero-role { font-size: clamp(.95rem, 2.1vh, 1.2rem); }
  .hero-intro { font-size: clamp(.92rem, 2vh, 1.1rem); }
  .hero-cta .btn { padding: clamp(.85rem, 1.8vh, 1.1rem) clamp(1.6rem, 3vh, 2.1rem); font-size: clamp(1rem, 2vh, 1.15rem); }
  .hero-cta .text-link { font-size: clamp(1rem, 2vh, 1.15rem); }
  .hero-id .socials a { width: clamp(42px, 5.2vh, 50px); height: clamp(42px, 5.2vh, 50px); }
}

/* job title on one line beside the photo */
.hero-role { white-space: nowrap; }
@media (min-width: 861px) { .hero-id { max-width: none; } .hero-intro { max-width: 25rem; } }

/* About: the same hairline that sits above the stats also frames the skills and the icons */
.about-text .stats { margin-top: 1.4rem; }
.about-text .stats li { padding-top: .9rem; }
.about-text p.tools-label { color: var(--gold); margin-bottom: 0; margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.about-text .tools { gap: .4rem; }
.about-text .tools li { padding: .22rem .75rem; }
.about-text .tools + .tools { margin-top: .4rem; }
.about-text .socials { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.about-text p:not(.eyebrow):not(.tools-label) { margin-bottom: .8rem; }
/* level the About column with the experience timeline */
.timeline li:last-child { padding-bottom: 0; }
.about-text .stats { margin-top: 1.1rem; }
.about-text .stats li { padding-top: .7rem; }
.about-text p.tools-label { margin-top: .9rem; padding-top: .75rem; }
.about-text .tools li { padding: .16rem .7rem; }
.about-text .tools { gap: .35rem; }
.about-text .socials { margin-top: .85rem; padding-top: .8rem; }
.about-text .socials a { width: 38px; height: 38px; }
.about-text p:not(.eyebrow):not(.tools-label) { margin-bottom: .6rem; }
.about-text .tools li { padding: .1rem .7rem; }
.about-text p.tools-label { margin-top: .75rem; }
.about-text .stats li { padding-top: .6rem; }
.about-text .socials a { width: 36px; height: 36px; }
.btn, .text-link { white-space: nowrap; }
@media (min-width: 861px) { .hero-row { grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); } }

/* ===== logo intro (intro.js): full-screen Lottie over the page, once per visit ===== */
.logo-intro { display: none; }
html.has-intro .logo-intro, .logo-intro.is-out {
  display: block; position: fixed; inset: 0; z-index: 100; background: var(--navy-deep);
  transition: opacity .7s ease, visibility 0s linear .7s;
}
html.has-intro body { overflow: hidden; }
.logo-intro.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-stage { position: absolute; inset: 0; }
.intro-stage svg { display: block; }
.intro-skip, .intro-sound {
  position: absolute; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  height: 42px; border-radius: 999px; cursor: pointer;
  color: var(--cream); background: rgba(14, 31, 44, .55); border: 1px solid var(--line);
  opacity: 0; transition: opacity .5s ease .6s, border-color .2s, color .2s;
}
.logo-intro.is-playing :is(.intro-skip, .intro-sound) { opacity: 1; }
.intro-skip:hover, .intro-sound:hover { border-color: var(--gold); color: var(--gold); }
.intro-skip { inset-inline-end: 22px; padding: 0 20px; font: 700 .95rem var(--f-second); }
.intro-sound { inset-inline-start: 22px; width: 42px; display: grid; place-items: center; }
.intro-sound svg { width: 20px; height: 20px; fill: currentColor; }
.intro-sound .on, .intro-sound.is-on .off { display: none; }
.intro-sound.is-on .on { display: block; }