/* Robert Abboud — v2. Tokens carried over from the original site; --violet-ink is the small-text violet (6.2:1 on canvas). */
:root{
  --canvas:#0A090E; --raised:#13111A; --text:#F2EFE9; --muted:#8B8598;
  --hair:rgba(242,239,233,.12); --purple:#5A2A8F; --violet:#7B3FD0; --violet-ink:#A47BEA; --lime:#C9E14C;
  --disp:'Bricolage Grotesque',sans-serif; --body:'Inter',sans-serif; --mono:'Space Mono',monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --out:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(20px,5vw,64px); --max:1320px; --nav-h:72px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:var(--lime);color:var(--canvas);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,p{margin:0;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px;}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lime);color:var(--canvas);padding:12px 16px;border-radius:4px;font-family:var(--mono);font-size:13px;font-weight:700;}
.skip:focus{top:12px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-ink);}
.muted{color:var(--muted);}
.lime{color:var(--lime);}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:linear-gradient(to bottom,rgba(10,9,14,.9),rgba(10,9,14,.6));border-bottom:1px solid var(--hair);}
.nav-brand{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;min-height:44px;display:flex;align-items:center;}
.nav-links{display:flex;align-items:center;gap:clamp(6px,1.6vw,22px);}
.nav-link{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:44px;display:flex;align-items:center;padding:0 6px;background-image:linear-gradient(var(--lime),var(--lime));background-repeat:no-repeat;background-position:6px calc(100% - 10px);background-size:0 2px;transition:background-size .3s var(--ease),color .2s var(--ease);}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--text);background-size:calc(100% - 12px) 2px;}
.btn-cta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:var(--lime);color:var(--canvas);padding:0 18px;min-height:44px;display:inline-flex;align-items:center;border-radius:4px;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(201,225,76,.3);}
.menu-btn{display:none;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--hair);border-radius:4px;background:transparent;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;}
@media (max-width:820px){
  .menu-btn{display:inline-flex;align-items:center;}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:var(--canvas);border-bottom:1px solid var(--hair);display:none;box-shadow:0 30px 60px rgba(0,0,0,.6);}
  .nav-links.is-open{display:flex;}
  .nav-link{font-size:14px;min-height:52px;border-bottom:1px solid var(--hair);background-position:6px calc(100% - 12px);}
  .nav-links .btn-cta{margin-top:18px;justify-content:center;min-height:52px;}
  .nav-cta-desktop{display:none;}
}
@media (min-width:821px){ .nav-links .btn-cta{display:none;} }

/* ---------- HERO (home) ---------- */
.hero{position:relative;height:100dvh;min-height:600px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;transition:background 1.1s var(--ease);background:radial-gradient(110% 88% at 50% 14%,rgba(150,60,202,.5),transparent 60%),linear-gradient(180deg,#311452 0%,#170a2e 56%,#0A070F 100%);}
.hero-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(118% 104% at 50% 40%,transparent 28%,rgba(6,4,11,.5) 66%,rgba(4,2,8,.94) 100%);}
.hero-figure{position:absolute;right:clamp(-30px,-2vw,-12px);bottom:0;height:clamp(520px,86vh,1040px);width:clamp(560px,52vw,1000px);z-index:2;}
.hero-layer{position:absolute;inset:0;opacity:0;transform-origin:50% 100%;will-change:transform,opacity,filter;}
.hero-layer[data-active]{opacity:1;}
.hero-layer img{width:100%;height:100%;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 22px 40px rgba(10,3,24,.62));-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 14%);mask-image:linear-gradient(to right,transparent 0%,#000 14%);}
.hero-wash{position:absolute;inset:0;z-index:4;opacity:0;background:var(--lime);mix-blend-mode:screen;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:right bottom;mask-position:right bottom;pointer-events:none;}
.hero-ground{position:absolute;inset:auto 0 0 0;height:38vh;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(5,3,10,.97) 0%,rgba(5,3,10,.7) 11%,rgba(5,3,10,.26) 25%,transparent 44%);}
.hero-cred{position:absolute;top:clamp(220px,40vh,440px);left:clamp(490px,58vw,780px);z-index:5;pointer-events:none;}
.hero-cred span{font-family:var(--mono);font-size:clamp(13px,1.3vw,17px);letter-spacing:.13em;text-transform:uppercase;color:var(--lime);white-space:pre-line;text-shadow:0 2px 18px rgba(5,3,10,.8);}
.hero-name{position:absolute;left:var(--gutter);top:clamp(200px,36vh,420px);z-index:5;max-width:min(560px,44vw);}
.hero-name h1{font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,min(11.5vw,18vh),10rem);line-height:.84;letter-spacing:-.028em;text-transform:uppercase;text-shadow:0 8px 44px rgba(5,3,10,.85);}
.hero-eyebrow{font-family:var(--mono);font-size:clamp(11px,1vw,12px);letter-spacing:.16em;text-transform:uppercase;margin-top:clamp(16px,2.6vh,28px);opacity:.85;}
.hero-lead{font-size:clamp(1.05rem,1.55vw,1.5rem);line-height:1.42;font-weight:700;margin-top:clamp(10px,1.8vh,18px);max-width:34ch;text-shadow:0 2px 22px rgba(5,3,10,.92);}
.hero-pills{position:absolute;right:0;bottom:clamp(64px,13vh,140px);width:clamp(560px,52vw,1000px);z-index:7;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.pill{font-family:var(--mono);font-size:clamp(11px,1vw,13px);letter-spacing:.08em;text-transform:uppercase;color:rgba(242,239,233,.9);background:rgba(12,10,18,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.26);min-height:44px;padding:0 20px;display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap;transition:transform .16s var(--ease),border-color .16s var(--ease);}
.pill:hover{border-color:rgba(255,255,255,.55);transform:translateY(-2px);}
.pill.is-on{background:var(--lime);color:var(--canvas);border-color:var(--lime);font-weight:700;box-shadow:0 0 22px rgba(201,225,76,.35);}
.hero-hint{position:absolute;left:var(--gutter);bottom:28px;z-index:7;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}

/* ---------- SUB-PAGE HEADER ---------- */
.page-head{padding:calc(var(--nav-h) + clamp(56px,9vw,120px)) 0 clamp(40px,6vw,72px);position:relative;}
.page-head{min-height:0;display:flex;align-items:flex-end;padding-top:calc(var(--nav-h) + clamp(36px,5vw,64px));padding-bottom:clamp(28px,3.5vw,44px);}
.page-head > .wrap{width:100%;}
.page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(110% 88% at 50% 0%,rgba(123,63,208,.55),transparent 60%),linear-gradient(180deg,#2a1450 0%,#15092b 62%,var(--canvas) 100%);}
[data-world="music"] .page-head::before{background:radial-gradient(110% 88% at 50% 0%,rgba(150,60,202,.5),transparent 60%),linear-gradient(180deg,#311452 0%,#170a2e 62%,var(--canvas) 100%);}
[data-world="stage"] .page-head::before{background:radial-gradient(110% 88% at 50% 0%,rgba(123,63,208,.5),transparent 58%),radial-gradient(78% 58% at 80% 84%,rgba(196,98,45,.30),transparent 60%),linear-gradient(180deg,#2a1450 0%,#160a2c 62%,var(--canvas) 100%);}
[data-world="about"] .page-head::before{background:radial-gradient(110% 88% at 50% 0%,rgba(123,63,208,.5),transparent 58%),radial-gradient(78% 58% at 20% 84%,rgba(168,224,0,.14),transparent 60%),linear-gradient(180deg,#281450 0%,#150a2b 62%,var(--canvas) 100%);}
.page-head + .section,.page-head + [hidden] + .section,.page-head + [hidden] + [hidden] + .section{border-top:0;}

.page-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(48px,9vw,128px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;margin:14px 0 22px;}
.page-head .lead{font-size:clamp(17px,1.6vw,21px);line-height:1.55;max-width:46ch;}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--hair);}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(28px,4vw,44px);}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(32px,4.6vw,58px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin-top:10px;}
.section-head p{max-width:44ch;color:var(--muted);}
.prose p+p{margin-top:1em;}
.prose{max-width:62ch;font-size:17px;line-height:1.7;}
.split{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;}
.split.rev{grid-template-columns:1fr .8fr;}
.photo{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:var(--raised);aspect-ratio:4/5;}
.photo img{width:100%;height:100%;object-fit:cover;}
.facts{list-style:none;padding:0;margin:0;display:grid;gap:0;}
.facts li{display:grid;grid-template-columns:minmax(120px,.35fr) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);}
.facts li:first-child{border-top:1px solid var(--hair);}
.facts .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px;}
.text-link{color:var(--lime);text-decoration:underline;text-decoration-color:rgba(201,225,76,.4);text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center;}
.text-link:hover{border-color:var(--lime);}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);}
.more:hover{text-decoration:underline;text-underline-offset:5px;}

/* ---------- FEATURE (big playable piece) ---------- */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;}
.poster{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:linear-gradient(150deg,#3a2566,#120d1d 70%);cursor:pointer;padding:0;text-align:left;transition:transform .35s var(--ease),border-color .35s var(--ease);}
.poster:hover{transform:translateY(-4px);border-color:rgba(164,123,234,.6);}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.poster .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,14,.75),rgba(10,9,14,.1) 60%);}
.poster .ttl{position:absolute;left:clamp(18px,3vw,32px);bottom:clamp(16px,3vw,28px);right:96px;font-family:var(--disp);font-weight:800;font-size:clamp(22px,3vw,40px);line-height:1;letter-spacing:-.01em;}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(64px,7vw,84px);height:clamp(64px,7vw,84px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,9,14,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(242,239,233,.3);}
.play::before{content:"";border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--lime);margin-left:5px;}
.feature-meta h2{font-family:var(--disp);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.02;letter-spacing:-.015em;margin:12px 0 16px;}
.feature-meta p{color:var(--muted);}
.credits{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none;}
.credits li{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:999px;border:1px solid var(--hair);color:var(--muted);}
.credits li.on{border-color:var(--lime);color:var(--lime);}

/* ---------- HOME INDEX ---------- */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);}
.index a{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:clamp(14px,3vw,40px);padding:clamp(18px,2.6vw,30px) 0;border-bottom:1px solid var(--hair);position:relative;}
.index .n{font-family:var(--mono);font-size:12px;color:var(--violet-ink);letter-spacing:.1em;}
.index .t{font-family:var(--disp);font-weight:800;font-size:clamp(34px,6vw,84px);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;transition:color .25s var(--ease),transform .35s var(--out);}
.index .d{display:block;font-family:var(--body);font-weight:400;font-size:15px;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:10px;max-width:48ch;line-height:1.5;}
.index .thumb{width:clamp(88px,12vw,160px);aspect-ratio:4/5;border-radius:8px;overflow:hidden;border:1px solid var(--hair);background:var(--raised);opacity:.75;transition:opacity .3s var(--ease),transform .4s var(--out);}
.index .thumb img{width:100%;height:100%;object-fit:cover;}
.index a:hover .t,.index a:focus-visible .t{color:var(--lime);transform:translateX(8px);}
.index a:hover .thumb,.index a:focus-visible .thumb{opacity:1;transform:scale(1.04) rotate(-1.5deg);}

/* ---------- WORK CARDS ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.card{position:relative;display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--hair);border-radius:10px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease);}
.card:hover{transform:translateY(-4px);border-color:rgba(164,123,234,.5);}
.card-play{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;}
.card-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--out);}
.card:hover .card-thumb img{transform:scale(1.04);}
.card-thumb .fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.08;}
.card-thumb .mini{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,9,14,.6);border:1px solid rgba(242,239,233,.28);}
.card-thumb .mini::before{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--lime);margin-left:3px;}
.card-meta{padding:14px 16px 6px;flex:1;}
.card-meta .tag{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-ink);}
.card-meta .h{display:block;font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.12;margin:6px 0 4px;}
.card-meta .role{display:block;font-size:14px;color:var(--muted);}
.card-foot{display:flex;justify-content:flex-end;padding:0 8px 6px;}
.copy{min-height:44px;padding:0 10px;border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.copy:hover{color:var(--lime);}

/* ---------- ARCHIVE CONTROLS ---------- */
.controls{display:grid;grid-template-columns:2fr repeat(3,1fr) auto;gap:12px;align-items:end;margin-bottom:18px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.input,.select{min-height:46px;width:100%;background:var(--raised);border:1px solid var(--hair);color:var(--text);border-radius:8px;padding:0 14px;font-family:var(--mono);font-size:13px;}
.select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;}
.select option{background:#15101f;}
.input::placeholder{color:#6f6a7c;}
.btn-ghost{min-height:46px;padding:0 16px;border:1px solid var(--hair);border-radius:8px;background:transparent;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime);}
.status{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.empty{padding:56px 20px;text-align:center;border:1px dashed var(--hair);border-radius:12px;color:var(--muted);}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:300;background:var(--lime);color:var(--canvas);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;padding:12px 18px;border-radius:6px;transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none;}
.toast.is-on{opacity:1;transform:translate(-50%,0);}

/* ---------- PLAYER ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,52px);background:rgba(6,4,11,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.modal-inner{position:relative;width:min(1000px,100%);}
.modal-inner.v{width:auto;}
.modal-close{position:absolute;top:-54px;right:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:rgba(20,16,31,.9);cursor:pointer;font-size:18px;}
.modal-box{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/9;}
.modal-inner.v .modal-box{height:min(78vh,760px);aspect-ratio:9/16;}
.modal-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.modal-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:28px;background:linear-gradient(155deg,#3a2566,#15101f);}
.modal-cap{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;align-items:baseline;}
.modal-cap h3{font-family:var(--disp);font-weight:700;font-size:20px;}
.modal-cap p{font-size:14px;color:var(--muted);}
.modal-cap a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);min-height:44px;display:inline-flex;align-items:center;}

/* ---------- SOUND EMBEDS (load on click) ---------- */
.embed-load{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:72px;padding:16px 20px;border:1px solid var(--hair);border-radius:10px;background:var(--raised);cursor:pointer;text-align:left;}
.embed-load:hover{border-color:var(--lime);}
.embed-load .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);}

/* ---------- CONTENT SLOTS (hidden until filled; ?preview shows them) ---------- */
[data-slot][hidden]{display:none;}
.preview [data-slot][hidden]{display:block !important;outline:1px dashed rgba(201,225,76,.6);outline-offset:6px;border-radius:8px;position:relative;}
.preview [data-slot][hidden]::before{content:"SLOT · " attr(data-slot);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--lime);margin-bottom:10px;}

/* ---------- CONTACT / FOOTER ---------- */
.contact{position:relative;padding:clamp(80px,11vw,150px) 0;border-top:1px solid var(--hair);overflow:hidden;text-align:center;}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 110% at 50% 120%,rgba(90,42,143,.5),transparent 60%);}
.contact h2{font-family:var(--disp);font-weight:800;font-size:clamp(40px,7vw,96px);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;margin-bottom:18px;}
.contact .sub{color:var(--muted);margin:0 auto 36px;max-width:44ch;}
.contact-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:28px;}
.btn-lime,.btn-line{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:5px;font-family:var(--mono);font-size:14px;letter-spacing:.03em;}
.btn-lime{background:var(--lime);color:var(--canvas);font-weight:700;}
.btn-line{border:1px solid var(--hair);}
.btn-line:hover{border-color:var(--lime);}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;}
.socials a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;padding:0 6px;}
.socials a:hover{color:var(--lime);}
.footer{border-top:1px solid var(--hair);padding:28px var(--gutter);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .controls{grid-template-columns:1fr 1fr;}
  .controls .field:first-child{grid-column:1/-1;}
}
@media (max-width:880px){
  .feature,.split,.split.rev{grid-template-columns:1fr;}
  .split .photo{max-width:440px;}
  .hero-figure{height:clamp(280px,46vh,430px);width:auto;left:0;right:0;bottom:clamp(128px,17vh,150px);}
  .hero-layer img{object-position:bottom center;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);}
  .hero-name{max-width:none;right:var(--gutter);top:calc(var(--nav-h) + 48px);}
  .hero-pills{width:100%;bottom:clamp(40px,7vh,64px);padding:0 var(--gutter);}
  .hero-cred{left:0;right:0;top:auto;bottom:calc(clamp(40px,7vh,64px) + 58px);text-align:center;}
  .hero-hint{display:none;}
}
@media (max-width:540px){
  .hero-name{top:calc(var(--nav-h) + 28px);}
  .hero-name h1{font-size:clamp(3rem,15vw,4.2rem);}
  .hero-eyebrow{font-size:10px;letter-spacing:.12em;}
  .hero-lead{font-size:1.05rem;}
  .hero-figure{height:clamp(250px,40vh,380px);}
  .hero-pills{gap:6px;flex-wrap:nowrap;justify-content:space-between;}
  .pill{font-size:10px;letter-spacing:.04em;padding:0 12px;}
  .index a{grid-template-columns:28px 1fr;}
  .index .thumb{display:none;}
  .facts li{grid-template-columns:1fr;gap:4px;}
  .controls{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important;}
}

/* nav layout: links + CTA pushed right; on phones the menu button takes their place */
.nav > nav{margin-left:auto;}
@media (max-width:820px){ .menu-btn{margin-left:auto;} .nav > nav{margin-left:0;} }

/* ---------- THE SCORE (generative line field behind every page) ---------- */
.score{position:fixed;inset:0;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 45%,transparent 92%);mask-image:linear-gradient(to bottom,#000 0%,#000 45%,transparent 92%);transition:opacity .3s linear;}
.section,.page-head,.contact,.footer{position:relative;z-index:2;}
.hero-bg,.hero-vignette{z-index:0;}
.hero{isolation:auto;}

/* ---------- TIMECODE + PLAYHEAD ---------- */
.tc{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);margin-left:22px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.playhead{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;}
.playhead span{display:block;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0);}
@media (max-width:1060px){ .tc{display:none;} }

/* ---------- SOUND TOGGLE ---------- */
.sound-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:1px solid var(--hair);border-radius:999px;background:transparent;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.sound-btn:hover,.sound-btn[aria-pressed="true"]{color:var(--lime);border-color:rgba(201,225,76,.5);}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;}
.eq i{display:block;width:2px;height:3px;background:currentColor;border-radius:1px;}
.sound-on .eq i{animation:eq 1s ease-in-out infinite;}
.sound-on .eq i:nth-child(2){animation-delay:-.35s;}
.sound-on .eq i:nth-child(3){animation-delay:-.7s;}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
@media (max-width:820px){ .nav-links .sound-btn{margin-top:14px;align-self:flex-start;} }

/* ---------- SHUTTER (media opens like a lens, once) ---------- */
.js .shutter{transition:clip-path 1.1s var(--out),transform .35s var(--ease),border-color .35s var(--ease);clip-path:inset(0 0 0 0 round 14px);}
.js .shutter.is-closed{clip-path:inset(46% 0 46% 0 round 14px);}

/* ---------- PAGE TRANSITIONS: pages cut into each other; shared titles carry across ---------- */
@view-transition{navigation:auto;}
.nav{view-transition-name:nav;}
::view-transition-old(root){animation:cut-out .5s var(--out) both;}
::view-transition-new(root){animation:cut-in .62s var(--out) both;}
::view-transition-group(*){animation-duration:.62s;animation-timing-function:var(--out);}
@keyframes cut-in{from{clip-path:inset(0 0 0 100%);}to{clip-path:inset(0 0 0 0);}}
@keyframes cut-out{to{opacity:.25;transform:translateX(-3%) scale(.985);}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}
  .js .shutter.is-closed{clip-path:none;}
}

/* ---------- SKILLS MENU (about) ---------- */
.skills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));border-top:1px solid var(--hair);border-left:1px solid var(--hair);}
.skill{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:24px 22px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);background:rgba(10,9,14,.55);transition:background .3s var(--ease);}
.skill h3{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.15;margin-bottom:6px;}
.skill p{font-size:14.5px;line-height:1.55;color:var(--muted);}
.ico{width:34px;height:34px;fill:none;stroke:var(--lime);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.js .ico *{stroke-dasharray:80;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--out);}
.skill:hover{background:rgba(90,42,143,.18);}
.skill:hover .ico *{animation:draw .9s var(--out);}
@keyframes draw{from{stroke-dashoffset:80;}to{stroke-dashoffset:0;}}
.toolkit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:clamp(32px,4vw,48px);}
.chips{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.chips li{font-family:var(--mono);font-size:12px;padding:8px 14px;border:1px solid var(--hair);border-radius:999px;}
.roles{margin-top:14px;font-size:16px;line-height:1.8;}
@media (max-width:880px){ .toolkit{grid-template-columns:1fr;} }

/* ---------- CONTACT BUTTONS ---------- */
.contact-ctas a{gap:10px;min-width:150px;justify-content:center;transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);}
.contact-ctas a:hover{transform:translateY(-2px);}
.contact-ctas .btn-lime:hover{box-shadow:0 12px 36px rgba(201,225,76,.3);}
.contact-ctas svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:540px){ .contact-ctas{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto;} }

/* ---------- PLANNED CONTENT PREVIEW (?preview) ---------- */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;
  background:repeating-linear-gradient(135deg,rgba(201,225,76,.06) 0 12px,transparent 12px 24px),linear-gradient(150deg,#2a1b48,#120d1d);}
.ph-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--canvas);background:var(--lime);padding:4px 9px;border-radius:3px;}
.ph-t{font-family:var(--mono);font-size:12.5px;line-height:1.6;letter-spacing:.03em;color:var(--text);opacity:.85;}
.ph-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:18px;}
.ph-frame{position:relative;border-radius:12px;overflow:hidden;border:1px dashed rgba(201,225,76,.5);}
.is-placeholder{position:relative;}
.is-placeholder .poster{border:1px dashed rgba(201,225,76,.5);}
.preview [data-replaced-by-slot]{display:none !important;}
.preview-bar{position:fixed;left:16px;bottom:16px;z-index:150;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:calc(100% - 32px);padding:10px 12px 10px 16px;border-radius:8px;background:var(--lime);color:var(--canvas);font-family:var(--mono);font-size:12px;letter-spacing:.04em;box-shadow:0 12px 40px rgba(0,0,0,.5);}
.preview-bar a{min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:4px;background:var(--canvas);color:var(--lime);font-weight:700;}
@media (max-width:700px){ .ph-grid{grid-template-columns:1fr;} }

/* ---------- SUB-MENUS ---------- */
.nav-item{position:relative;display:flex;align-items:center;}
.submenu{position:absolute;top:100%;left:-8px;min-width:230px;padding:8px;display:flex;flex-direction:column;background:rgba(12,10,18,.98);border:1px solid var(--hair);border-radius:10px;box-shadow:0 24px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s;}
.submenu a{min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:6px;font-size:14px;color:var(--muted);white-space:nowrap;}
.submenu a:hover,.submenu a:focus-visible{background:rgba(164,123,234,.12);color:var(--text);}
@media (min-width:821px){
  .nav-item:hover .submenu,.nav-item:focus-within .submenu{opacity:1;visibility:visible;transform:none;transition:opacity .18s var(--ease),transform .18s var(--ease);}
}
@media (max-width:820px){
  .nav-links{max-height:calc(100dvh - var(--nav-h));overflow-y:auto;}
  .nav-item{flex-direction:column;align-items:stretch;}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;padding:4px 0 10px 12px;background:none;border:0;box-shadow:none;display:grid;grid-template-columns:1fr 1fr;}
  .submenu a{font-size:13px;padding:0 8px;white-space:normal;}
}

/* ---------- PLAIN TEXT IN PLACE OF TAG PILLS ---------- */
.roles-line{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);}
.plain{margin-top:10px;font-size:15.5px;line-height:1.7;color:var(--text);}

/* ---------- ABOUT: sticky index + columns ---------- */
.about-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;padding-top:clamp(36px,4vw,56px);padding-bottom:clamp(40px,5vw,72px);position:relative;z-index:2;}
.toc{position:sticky;top:calc(var(--nav-h) + 28px);display:flex;flex-direction:column;}
.toc .label{margin-bottom:12px;}
.toc a:not(.more){min-height:44px;display:flex;align-items:center;padding-left:14px;border-left:2px solid var(--hair);font-size:14px;color:var(--muted);transition:color .2s var(--ease),border-color .2s var(--ease);}
.toc a:not(.more):hover{color:var(--text);}
.toc a[aria-current="true"]{color:var(--text);border-left-color:var(--lime);}
.toc .more{margin-top:18px;}
.block{padding:clamp(32px,3.6vw,52px) 0;border-top:1px solid var(--hair);}
.about-main > .block:first-child{border-top:0;padding-top:0;}
.block-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;margin-bottom:24px;}
.block-head p:not(.label){max-width:42ch;color:var(--muted);font-size:15px;}
.h2.sm{font-size:clamp(26px,2.8vw,38px);margin:8px 0 18px;}
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:clamp(24px,3vw,44px);align-items:start;}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 36px;}
.names .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-ink);margin-bottom:8px;}
.names p:not(.k){font-size:15px;line-height:1.75;}
.about-main .skills{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.about-main .facts li{grid-template-columns:minmax(84px,.3fr) 1fr;}
@media (max-width:1060px){
  .about-layout{grid-template-columns:1fr;}
  .toc{position:static;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;padding-bottom:8px;}
  .toc .label,.toc .more{grid-column:1/-1;}
}
@media (max-width:760px){
  .story,.cols-2,.cols-3{grid-template-columns:1fr;}
  .story .photo{max-width:320px;}
  .cols-3.names{grid-template-columns:1fr 1fr;}
}

/* ---------- tighter rhythm between sections ---------- */
.section{padding:clamp(44px,5.5vw,84px) 0;}

/* ---------- PAGE HEADER WITH CONTENT ON THE RIGHT ---------- */
.head-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;}
.page-head h1{margin:12px 0 18px;font-size:clamp(48px,7.5vw,112px);}
.head-aside .poster{aspect-ratio:16/9;}
.aside-cap{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:52ch;}
.head-aside .photo.small{max-width:300px;margin-left:auto;}
.aside-links{display:flex;flex-direction:column;align-items:flex-end;margin-top:10px;}
.head-search .label{display:block;margin-bottom:10px;}
.hs-row{display:flex;gap:10px;}
.hs-row .input{flex:1;min-height:52px;font-size:14px;}
.hs-row .btn-lime{border:0;cursor:pointer;}
.quick{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--hair);}
.quick a{display:flex;justify-content:space-between;align-items:center;min-height:46px;border-bottom:1px solid var(--hair);font-size:15px;transition:color .2s var(--ease),padding .3s var(--out);}
.quick a:hover{color:var(--lime);padding-left:6px;}
.quick .n{font-family:var(--mono);font-size:12px;color:var(--muted);}
.cols-2.top{align-items:start;}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:880px){
  .head-grid{grid-template-columns:1fr;align-items:start;}
  .head-aside .photo.small{margin-left:0;max-width:240px;}
  .aside-links{align-items:flex-start;}
}
@media (max-width:540px){ .grid.two{grid-template-columns:1fr;} }

/* ---------- TITLES: a quiet rise, then a short lime line draws in (after the original site) ---------- */
.js .rise{clip-path:inset(0 0 0 0);}
.js .rise:not(.in){opacity:0;transform:translateY(22px);}
.js .rise.in{opacity:1;transform:none;transition:opacity .9s var(--out),transform .9s var(--out);}
.h2.rise::after,.page-head h1.rise::after{content:"";display:block;width:56px;height:2px;margin-top:16px;background:var(--lime);transform:scaleX(0);transform-origin:left;}
.h2.rise.in::after,.page-head h1.rise.in::after{transform:scaleX(1);transition:transform .7s var(--out) .45s;}
.page-head h1.rise::after{width:72px;height:3px;margin-top:20px;}
@media (prefers-reduced-motion:reduce){
  .js .rise:not(.in),.js .rise.in{opacity:1;transform:none;transition:none;}
  .h2.rise::after,.page-head h1.rise::after{transform:scaleX(1);transition:none;}
}

/* ---------- FULL-SCREEN SECTION (Music: piano first) ---------- */
.fullbleed{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--hair);}
.fb-media{position:absolute;inset:0;z-index:0;}
.fb-media img{width:100%;height:100%;object-fit:cover;}
.ph-fill{position:absolute;inset:0;}
.preview .ph-fill{display:block !important;}
.fb-fallback{position:absolute;inset:0;background:var(--canvas);}
.fb-light{position:absolute;inset:0;background:radial-gradient(55% 75% at 70% 35%,rgba(123,63,208,.5),rgba(90,42,143,.15) 50%,transparent 75%);}
.fb-fallback img{position:absolute;right:clamp(-20px,3vw,60px);bottom:0;width:min(52vw,820px);height:92%;object-fit:contain;object-position:bottom right;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);}
.fullbleed::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,9,14,.92) 0%,rgba(10,9,14,.7) 38%,rgba(10,9,14,0) 70%);}
.fb-text{position:relative;z-index:2;width:100%;padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px);}
.fb-text > *{max-width:560px;}
@media (max-width:880px){
  .fullbleed{align-items:flex-end;min-height:0;}
  .fb-fallback img{width:100%;height:60%;right:0;object-position:bottom center;}
  .fullbleed::after{background:linear-gradient(to top,rgba(10,9,14,.97) 45%,rgba(10,9,14,.3) 80%,rgba(10,9,14,.1));}
  .fb-text{padding-top:48vh;}
}

/* ---------- HORIZONTAL PHOTO STRIP ---------- */
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 18px;scroll-padding:0 var(--gutter);scrollbar-width:thin;scrollbar-color:var(--lime) transparent;}
.strip-item{flex:none;height:clamp(260px,42vw,460px);margin:0;scroll-snap-align:start;border-radius:10px;overflow:hidden;position:relative;}
.strip-item img{height:100%;width:auto;object-fit:cover;}
.strip-nav{display:flex;gap:8px;}
.strip-nav .btn-ghost{min-width:46px;}

/* ---------- MOTION: text arrives by block; images answer hover and press ---------- */
.js .reveal:not(.in){opacity:0;transform:translateY(14px);}
.js .reveal.in{opacity:1;transform:none;transition:opacity .8s var(--out),transform .8s var(--out);transition-delay:calc(var(--d,0) * 70ms);}
/* images: slow push-in inside the frame, a thin lime line traces the edge, play fills with lime */
.poster img,.photo img,.card-thumb img,.strip-item img,.index .thumb img{transition:transform 1.1s var(--out),filter .6s var(--out);}
.poster:hover img,.photo:hover img,.card:hover .card-thumb img,.strip-item:hover img{transform:scale(1.045);}
.poster,.photo,.card,.strip-item{position:relative;}
.poster::after,.photo::after,.card::after,.strip-item::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(201,225,76,0);transition:box-shadow .5s var(--out);}
.poster:hover::after,.photo:hover::after,.card:hover::after,.strip-item:hover::after,.poster:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(201,225,76,.75);}
.play,.mini{transition:background .35s var(--out),transform .35s var(--out),border-color .35s var(--out);}
.poster:hover .play,.card:hover .mini{background:var(--lime);border-color:var(--lime);transform:translate(-50%,-50%) scale(1.06);}
.card:hover .mini{transform:scale(1.06);}
.poster:hover .play::before,.card:hover .mini::before{border-left-color:var(--canvas);}
.poster:active,.card-play:active,.strip-item:active,.btn-lime:active,.btn-line:active,.btn-cta:active,.pill:active{transform:scale(.985);transition:transform .12s var(--ease);}
@media (prefers-reduced-motion:reduce){
  .js .reveal:not(.in),.js .reveal.in{opacity:1;transform:none;transition:none;}
  .poster:hover img,.photo:hover img,.card:hover .card-thumb img,.strip-item:hover img{transform:none;}
}

/* ---------- HOME HERO, v3 layout: words and crafts on the left, a smaller portrait on the right ---------- */
.hero-name{top:calc(var(--nav-h) + clamp(56px,13vh,150px));max-width:min(640px,50vw);}
.hero-name h1{font-size:clamp(3.2rem,min(9.2vw,15vh),8.6rem);}
.hero-lead{color:var(--lime);font-weight:600;font-size:clamp(1.05rem,1.45vw,1.42rem);line-height:1.4;max-width:36ch;}
.hero-pills{position:static;width:auto;justify-content:flex-start;margin-top:clamp(22px,3.4vh,34px);padding:0;}
.hero-cred{position:static;margin-top:16px;text-align:left;}
.hero-cred span{font-size:12.5px;letter-spacing:.14em;}
.hero-figure{right:clamp(0px,5vw,96px);height:clamp(420px,74vh,820px);width:clamp(420px,40vw,700px);}
.hero-layer img{-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);}
/* the lime light that sweeps across the incoming portrait */
.hero-sweep{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(100deg,transparent 0%,transparent 38%,rgba(201,225,76,.55) 50%,transparent 62%,transparent 100%);background-size:250% 100%;background-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:right bottom;mask-position:right bottom;}
@media (max-width:880px){
  .hero-name{top:calc(var(--nav-h) + 32px);max-width:none;right:var(--gutter);}
  .hero-pills{width:auto;bottom:auto;}
  .hero-cred{left:auto;right:auto;bottom:auto;top:auto;}
  .hero-figure{left:0;right:0;width:auto;height:clamp(240px,40vh,470px);bottom:0;}
  .hero-layer img{object-position:bottom center;}
  .hero-sweep{-webkit-mask-position:center bottom;mask-position:center bottom;}
}
@media (max-width:540px){
  .hero-name{top:calc(var(--nav-h) + 20px);}
  .hero-pills{flex-wrap:wrap;justify-content:flex-start;gap:8px;}
  .pill{padding:0 14px;font-size:11px;}
}

/* ---------- LANGUAGE SWITCH ---------- */
.lang-link{min-height:44px;display:inline-flex;align-items:center;padding:0 10px;font-size:14px;color:var(--muted);border-radius:6px;}
.lang-link:hover{color:var(--lime);}
html[lang="en"] .lang-link{font-family:'IBM Plex Sans Arabic',var(--body);font-size:15px;}
html[lang="ar"] .lang-link{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
@media (max-width:820px){ .nav-links .lang-link{align-self:flex-start;margin-top:10px;} }

/* ---------- ARABIC (RTL) ---------- */
html[dir="rtl"]{--disp:'IBM Plex Sans Arabic',sans-serif;--body:'IBM Plex Sans Arabic',sans-serif;}
html[dir="rtl"] body{font-size:17px;}
/* Arabic is never letter-spaced or uppercased; mono labels fall back to the Arabic face */
html[dir="rtl"] :is(.label,.nav-link,.nav-brand,.btn-cta,.pill,.hero-eyebrow,.hero-cred span,.facts .k,.more,.socials a,.footer,.sound-btn,.menu-btn,.filter-label,.field label,.btn-ghost,.status,.card-meta .tag,.copy,.quick .n,.names .k,.roles-line,.toc a,.index .n,.tc){letter-spacing:0;text-transform:none;font-family:'IBM Plex Sans Arabic',var(--mono);}
html[dir="rtl"] :is(.h2,.page-head h1,.hero-name h1,.contact h2,.index .t,.feature-meta h2){letter-spacing:0;text-transform:none;font-weight:700;}
html[dir="rtl"] .hero-name h1{line-height:1.05;}
html[dir="rtl"] .page-head h1{line-height:1.1;}
html[dir="rtl"] .h2{line-height:1.25;}
html[dir="rtl"] .index .t{line-height:1.15;}
html[dir="rtl"] .contact h2{line-height:1.2;}
/* mirror the hand-placed layout */
html[dir="rtl"] .hero-name{left:auto;right:var(--gutter);}
html[dir="rtl"] .hero-figure{right:auto;left:clamp(0px,5vw,96px);}
html[dir="rtl"] .hero-layer img{object-position:bottom left;}
html[dir="rtl"] .hero-sweep{-webkit-mask-position:left bottom;mask-position:left bottom;}
html[dir="rtl"] .hero-cred{text-align:right;}
html[dir="rtl"] .playhead span{transform-origin:right;}
html[dir="rtl"] .submenu{left:auto;right:-8px;}
html[dir="rtl"] .toc a:not(.more){border-left:0;border-right:2px solid var(--hair);padding-left:0;padding-right:14px;}
html[dir="rtl"] .toc a[aria-current="true"]{border-right-color:var(--lime);}
html[dir="rtl"] .quick a:hover{padding-left:0;padding-right:6px;}
html[dir="rtl"] .index a:hover .t,html[dir="rtl"] .index a:focus-visible .t{transform:translateX(-8px);}
html[dir="rtl"] .card-thumb .mini{right:auto;left:12px;}
html[dir="rtl"] .poster .ttl{left:96px;right:clamp(18px,3vw,32px);}
html[dir="rtl"] .fullbleed::after{background:linear-gradient(270deg,rgba(10,9,14,.92) 0%,rgba(10,9,14,.7) 38%,rgba(10,9,14,0) 70%);}
html[dir="rtl"] .fb-fallback img{right:auto;left:clamp(-20px,3vw,60px);object-position:bottom left;}
html[dir="rtl"] .fb-light{background:radial-gradient(55% 75% at 30% 35%,rgba(123,63,208,.5),rgba(90,42,143,.15) 50%,transparent 75%);}
html[dir="rtl"] .h2.rise::after,html[dir="rtl"] .page-head h1.rise::after{transform-origin:right;}
html[dir="rtl"] .head-aside .photo.small{margin-left:0;margin-right:auto;}
html[dir="rtl"] .aside-links{align-items:flex-start;}
html[dir="rtl"] .select{padding-right:14px;padding-left:34px;background-position:18px 50%,13px 50%;}
@media (max-width:880px){
  html[dir="rtl"] .hero-name{left:var(--gutter);}
  html[dir="rtl"] .hero-figure{left:0;right:0;}
  html[dir="rtl"] .hero-layer img{object-position:bottom center;}
  html[dir="rtl"] .fb-fallback img{left:0;right:0;object-position:bottom center;}
  html[dir="rtl"] .head-aside .photo.small{margin-right:0;}
}

/* fallback card titles keep clear of the play button */
.card-thumb .fb{padding-right:68px;}
html[dir="rtl"] .card-thumb .fb{padding-right:16px;padding-left:68px;}
/* short words (e.g. نبذة, IMDb) still get a full 44px target */
.nav-link,.socials a{min-width:44px;justify-content:center;}

/* ---------- PIANO FIRST: the photo, graded into the site ----------
   A bright black-and-white frame: pulled down into the dark, tinted with the site's violet,
   and darkened towards the text side so the words read cleanly. Slow drift as it enters. */
.fb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 30%;
  filter:grayscale(1) contrast(1.08) brightness(.86);transform:scale(1.06);transition:transform 2.4s var(--out);}
.fullbleed.in-view .fb-photo{transform:scale(1);}
.fb-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(110,56,180,.30),rgba(42,20,80,.34));mix-blend-mode:multiply;}
.fullbleed::after{background:linear-gradient(90deg,rgba(10,9,14,.93) 0%,rgba(10,9,14,.72) 30%,rgba(10,9,14,.12) 54%,rgba(10,9,14,0) 68%),linear-gradient(to top,rgba(10,9,14,.55),transparent 26%);}
html[dir="rtl"] .fb-photo{object-position:30% 30%;transform:scale(-1.06,1.06);}
html[dir="rtl"] .fullbleed.in-view .fb-photo{transform:scale(-1,1);}
html[dir="rtl"] .fullbleed::after{background:linear-gradient(270deg,rgba(10,9,14,.93) 0%,rgba(10,9,14,.72) 30%,rgba(10,9,14,.12) 54%,rgba(10,9,14,0) 68%),linear-gradient(to top,rgba(10,9,14,.55),transparent 26%);}
@media (max-width:880px){
  .fullbleed{min-height:92vh;align-items:flex-end;}
  .fb-photo,html[dir="rtl"] .fb-photo{object-position:50% 25%;}
  .fb-photo{height:58%;inset:0 0 auto 0;}
  .fullbleed::after{background:linear-gradient(to top,rgba(10,9,14,1) 44%,rgba(10,9,14,.4) 60%,rgba(10,9,14,0) 75%);}
  html[dir="rtl"] .fullbleed::after{background:linear-gradient(to top,rgba(10,9,14,1) 44%,rgba(10,9,14,.4) 60%,rgba(10,9,14,0) 75%);}
  .fb-text{padding-top:46vh;}
}
@media (prefers-reduced-motion:reduce){ .fb-photo,html[dir="rtl"] .fb-photo{transition:none;} .fb-photo{transform:none;} html[dir="rtl"] .fb-photo{transform:scaleX(-1);} }

/* ---------- PIANO FIRST, v2: a caption on a film still, not a spec sheet ---------- */
.fullbleed{align-items:flex-end;}
.fb-text{padding-bottom:clamp(56px,9vh,110px);}
.fb-text > *{max-width:none;}
.fb-h{text-transform:none;letter-spacing:-.025em;font-size:clamp(38px,4.6vw,68px);line-height:1.02;max-width:13ch;}
.fb-h span{display:block;color:var(--violet-ink);}
.fb-lead{margin-top:20px;max-width:46ch;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:rgba(242,239,233,.86);}
.fb-notes{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,220px));gap:28px;}
.fb-notes li{border-top:1px solid rgba(242,239,233,.22);padding-top:14px;font-size:14.5px;line-height:1.55;color:rgba(242,239,233,.78);}
.fb-notes .k{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--lime);}
.fb-text .more{margin-top:26px;}
@media (max-width:760px){ .fb-notes{grid-template-columns:1fr;gap:16px;} }
html[dir="rtl"] .fb-h{letter-spacing:0;line-height:1.25;}

/* ---------- TEXT MOTION v3: titles wipe up from behind an edge; text pulls into focus ---------- */
.js .rise:not(.in),.js .rise.in{opacity:1;transform:none;}
.js .rise{clip-path:inset(-0.1em -0.2em 100% -0.2em);transform:translateY(.35em);transition:clip-path 1.15s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1);}
.js .rise.in{clip-path:inset(-0.1em -0.2em -0.3em -0.2em);transform:none;}
.js .reveal:not(.in){opacity:0;filter:blur(9px);transform:translateY(6px);}
.js .reveal.in{opacity:1;filter:blur(0);transform:none;transition:opacity 1.2s cubic-bezier(.16,1,.3,1),filter 1.3s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0) * 90ms);}
@media (prefers-reduced-motion:reduce){
  .js .rise,.js .rise.in{clip-path:none;transform:none;transition:none;}
  .js .reveal:not(.in),.js .reveal.in{opacity:1;filter:none;transform:none;transition:none;}
}

/* ---------- PARALLAX on full-screen photos (scroll-driven from site.js) ---------- */
.fb-media .fb-photo{height:144%;top:-22%;bottom:auto;transform:translate3d(0,var(--py,0px),0);transition:none;will-change:transform;}
.fullbleed.in-view .fb-photo{transform:translate3d(0,var(--py,0px),0);}
html[dir="rtl"] .fb-photo,html[dir="rtl"] .fullbleed.in-view .fb-photo{transform:translate3d(0,var(--py,0px),0) scaleX(-1);}
@media (max-width:880px){ .fb-media .fb-photo{height:78%;top:-10%;} }
.fb-text{transform:translate3d(0,var(--ty,0px),0);will-change:transform;}
@media (prefers-reduced-motion:reduce){ .fb-text{transform:none;} }
@media (prefers-reduced-motion:reduce){ .fb-photo{transform:none !important;} html[dir="rtl"] .fb-photo{transform:scaleX(-1) !important;} }

/* ---------- LIVE PREVIEW (muted, looping video in place of a still) ---------- */
.live-poster{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:linear-gradient(150deg,#3a2566,#120d1d 70%);}
.live-poster > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.live-poster iframe{position:absolute;top:50%;left:50%;width:118%;height:118%;transform:translate(-50%,-50%);border:0;pointer-events:none;opacity:0;transition:opacity 1s var(--ease);}
.live-poster iframe.ready{opacity:1;}
.live-poster .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,9,14,.6),transparent 45%);pointer-events:none;}
.watch-btn{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;border-radius:999px;border:1px solid rgba(242,239,233,.35);background:rgba(10,9,14,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:background .3s var(--out),color .3s var(--out),border-color .3s var(--out);}
.watch-btn .tri{width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent var(--lime);transition:border-color .3s var(--out);}
.watch-btn:hover,.watch-btn:focus-visible{background:var(--lime);color:var(--canvas);border-color:var(--lime);}
.watch-btn:hover .tri,.watch-btn:focus-visible .tri{border-left-color:var(--canvas);}
.live-poster:hover::after{box-shadow:inset 0 0 0 1px rgba(201,225,76,.75);}
.live-poster::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 1px rgba(201,225,76,0);transition:box-shadow .5s var(--out);}
html[dir="rtl"] .watch-btn{left:auto;right:16px;}
html[dir="rtl"] .watch-btn .tri{transform:scaleX(-1);}
html[dir="rtl"] .watch-btn{letter-spacing:0;text-transform:none;font-family:var(--body);}

/* ---------- smaller play buttons everywhere ---------- */
.play{width:52px;height:52px;}
.play::before{border-width:8px 0 8px 13px;margin-left:3px;}
.card-thumb .mini{width:36px;height:36px;}
.card-thumb .mini::before{border-width:6px 0 6px 10px;}

/* ---------- MUSIC IN HIS FILMS + LISTEN, side by side ---------- */
.listen-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start;}
.listen-split:has(> .listen:not([hidden])){grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);}
.listen-split .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
.listen{border-left:1px solid var(--hair);padding-left:clamp(24px,3vw,40px);}
.listen .h2{font-size:clamp(26px,2.6vw,36px);}
.listen-list{display:grid;gap:10px;}
.listen .embed-load{min-height:64px;padding:12px 14px;}
.listen .embed-load .play{position:static;transform:none;width:40px;height:40px;flex:none;}
html[dir="rtl"] .listen{border-left:0;border-right:1px solid var(--hair);padding-left:0;padding-right:clamp(24px,3vw,40px);}
@media (max-width:980px){
  .listen-split:has(> .listen:not([hidden])){grid-template-columns:1fr;}
  .listen,html[dir="rtl"] .listen{border:0;border-top:1px solid var(--hair);padding:28px 0 0;}
}

/* ---------- ON SET collage (Stage) ---------- */
.cl-group + .cl-group{margin-top:clamp(36px,5vw,64px);}
.cl-cap{font-size:14.5px;color:var(--muted);margin-bottom:14px;}
.collage{display:grid;gap:10px;grid-auto-flow:dense;}
.c-dinner{grid-template-columns:2fr 1fr;grid-auto-rows:clamp(200px,26vw,380px);}
.c-series{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,15vw,230px);}
.cl{position:relative;margin:0;overflow:hidden;border-radius:8px;cursor:zoom-in;background:var(--raised);}
.cl img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--out),filter .6s var(--out);}
.cl:hover img{transform:scale(1.05);}
.cl::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(201,225,76,0);transition:box-shadow .5s var(--out);}
.cl:hover::after,.cl:focus-visible::after{box-shadow:inset 0 0 0 1px rgba(201,225,76,.75);}
.c-series .tall{grid-row:span 2;}
.c-dinner .tall img{object-position:50% 20%;}
@media (max-width:760px){
  .c-dinner{grid-template-columns:1fr;grid-auto-rows:auto;}
  .c-dinner .cl{aspect-ratio:4/3;}
  .c-series{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(130px,40vw,220px);}
}
/* lightbox */
.lb{position:fixed;inset:0;z-index:220;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(16px,4vw,48px);background:rgba(6,4,11,.92);cursor:zoom-out;}
.lb img{max-width:min(1200px,100%);max-height:80vh;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lb p{max-width:70ch;text-align:center;font-size:14px;color:var(--muted);}
.lb button{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:rgba(20,16,31,.9);cursor:pointer;font-size:18px;}
html[dir="rtl"] .lb button{right:auto;left:18px;}

/* series: playable scene above the stills; more-roles mosaic */
.scene-poster{position:relative;display:block;width:100%;aspect-ratio:21/8;margin:0 0 10px;padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--raised);text-align:left;}
.scene-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.8);transition:transform 1.1s var(--out);}
.scene-poster:hover img{transform:scale(1.04);}
.scene-poster .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,14,.8),rgba(10,9,14,.1) 60%);}
.scene-poster .sp-txt{position:absolute;left:clamp(16px,3vw,32px);bottom:clamp(14px,2.5vw,26px);display:flex;flex-direction:column;gap:4px;font-size:14px;color:rgba(242,239,233,.8);}
.scene-poster .sp-txt .k{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,30px);color:var(--text);}
.scene-poster .play{left:auto;right:clamp(16px,3vw,32px);top:50%;transform:translateY(-50%);}
.scene-poster:hover .play{transform:translateY(-50%) scale(1.06);background:var(--lime);border-color:var(--lime);}
.scene-poster:hover .play::before{border-left-color:var(--canvas);}
html[dir="rtl"] .scene-poster{text-align:right;}
html[dir="rtl"] .scene-poster .sp-txt{left:auto;right:clamp(16px,3vw,32px);}
html[dir="rtl"] .scene-poster .play{right:auto;left:clamp(16px,3vw,32px);}
html[dir="rtl"] .scene-poster .shade{background:linear-gradient(270deg,rgba(10,9,14,.8),rgba(10,9,14,.1) 60%);}
.c-other{grid-template-columns:2fr 1fr 1fr;grid-auto-rows:clamp(150px,16vw,240px);}
.c-other .w2{grid-row:span 2;}
@media (max-width:760px){ .scene-poster{aspect-ratio:16/9;} .c-other{grid-template-columns:1fr 1fr;} .c-other .w2{grid-column:1/-1;grid-row:auto;} }
.c-other .cl:last-child{grid-column:span 2;}
@media (max-width:760px){ .c-other .cl:last-child{grid-column:1/-1;} }

/* ---------- STAGE: photo gallery as one horizontal strip, no captions ---------- */
.gallery{gap:12px;cursor:grab;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px;}
.gallery::-webkit-scrollbar{display:none;}
.gallery.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;}
.gallery.dragging .strip-item{pointer-events:none;}
.gallery .strip-item{height:clamp(300px,46vw,560px);border-radius:6px;cursor:zoom-in;background:var(--raised);}
.gallery .strip-item img{height:100%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none;}
.strip-progress{height:2px;background:var(--hair);margin-top:18px;overflow:hidden;border-radius:2px;}
.strip-progress span{display:block;height:100%;width:100%;background:var(--lime);transform-origin:left;transform:scaleX(0);}
html[dir="rtl"] .strip-progress span{transform-origin:right;}
.lb p{display:none;}
/* credits beside the scene video */
.credits-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:40px;}
.credits-wrap .scene-poster{aspect-ratio:16/9;margin:28px 0 0;}
@media (max-width:880px){ .credits-wrap{grid-template-columns:1fr;} .credits-wrap .scene-poster{margin-top:0;} }
/* Stage photo carousel: compact */
.gallery{gap:8px;}
.gallery .strip-item{height:clamp(170px,19vw,260px);border-radius:5px;}

/* ---------- HERO FILM (home): pinned while you scroll through four beats over the studio film ---------- */
.hero-film{position:relative;background:#07050B;}
.js .hero-film{height:calc(100svh + 3 * 90svh);}
.hf-stage{position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;}
.js .hf-stage{position:sticky;top:0;}
.hf-poster,.hf-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.hf-poster{object-fit:cover;object-position:62% 50%;}
.hf-canvas{opacity:0;transition:opacity .5s var(--ease);}
.hero-film.is-ready .hf-canvas{opacity:1;}
.hf-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(7,5,11,.82) 0%,rgba(7,5,11,.5) 32%,rgba(7,5,11,0) 62%),
  linear-gradient(0deg,rgba(7,5,11,.9) 0%,rgba(7,5,11,0) 42%),
  linear-gradient(180deg,rgba(7,5,11,.65) 0%,rgba(7,5,11,0) 20%);}
html[dir="rtl"] .hf-shade{background:
  linear-gradient(270deg,rgba(7,5,11,.82) 0%,rgba(7,5,11,.5) 32%,rgba(7,5,11,0) 62%),
  linear-gradient(0deg,rgba(7,5,11,.9) 0%,rgba(7,5,11,0) 42%),
  linear-gradient(180deg,rgba(7,5,11,.65) 0%,rgba(7,5,11,0) 20%);}
.hf-text{position:absolute;z-index:2;inset-inline-start:var(--gutter);bottom:clamp(76px,14vh,160px);width:min(680px,calc(100% - 2 * var(--gutter)));display:flex;flex-direction:column;gap:40px;}
.js .hf-text{display:grid;gap:0;}
.hf-beat h1,.hf-big{font-family:var(--disp);font-weight:800;font-size:clamp(3.2rem,min(9.6vw,16vh),9rem);line-height:.86;letter-spacing:-.028em;text-transform:uppercase;margin:0;text-shadow:0 8px 44px rgba(5,3,10,.7);}
.hf-lime{color:var(--lime);}
.hf-lead{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,3vw,2.9rem);line-height:1.12;letter-spacing:-.012em;margin:0;max-width:24ch;color:var(--text);text-shadow:0 2px 26px rgba(5,3,10,.9);}
.hf-sub{font-size:clamp(1.1rem,1.7vw,1.55rem);font-weight:500;margin:clamp(14px,2.2vh,22px) 0 0;color:rgba(242,239,233,.9);}
.hero-film .hero-eyebrow{margin-top:clamp(16px,2.6vh,26px);}
.hero-film .hero-pills{position:static;width:auto;justify-content:flex-start;margin:0;padding:0;gap:10px;}
.hero-film .pill{font-size:clamp(12px,1.05vw,14px);min-height:50px;padding:0 24px;}
.hero-film .hero-cred{position:static;margin:18px 0 0;text-align:start;}
.hf-hint{position:absolute;z-index:2;inset-inline-end:var(--gutter);bottom:clamp(76px,14vh,160px);margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,233,.8);display:flex;align-items:center;gap:10px;transition:opacity .6s var(--ease);}
.hf-hint::after{content:"";width:1px;height:34px;background:linear-gradient(var(--lime),transparent);}
.hf-hint.gone{opacity:0;}
@media (prefers-reduced-motion:no-preference){.hf-hint:not(.gone)::after{animation:hf-drop 1.8s var(--ease) infinite;transform-origin:top;}}
@keyframes hf-drop{0%{transform:scaleY(0);}60%{transform:scaleY(1);}100%{transform:scaleY(1);opacity:0;}}
.no-js .hf-hint,html:not(.js) .hf-hint,html:not(.js) .hf-progress{display:none;}
.hf-progress{position:absolute;z-index:2;left:0;right:0;bottom:0;height:2px;background:rgba(242,239,233,.1);}
.hf-progress i{display:block;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0);}
html[dir="rtl"] .hf-progress i{transform-origin:right;}
@media (max-width:760px){
  .js .hero-film{height:calc(100svh + 3 * 80svh);}
  .hf-text{bottom:clamp(54px,9vh,90px);}
  .hf-beat h1,.hf-big{font-size:clamp(3rem,15vw,4.4rem);}
  .hf-lead{font-size:clamp(1.45rem,6.6vw,1.9rem);}
  .hf-shade{background:linear-gradient(0deg,rgba(7,5,11,.94) 0%,rgba(7,5,11,.55) 38%,rgba(7,5,11,0) 64%),linear-gradient(180deg,rgba(7,5,11,.65) 0%,rgba(7,5,11,0) 18%);}
  html[dir="rtl"] .hf-shade{background:linear-gradient(0deg,rgba(7,5,11,.94) 0%,rgba(7,5,11,.55) 38%,rgba(7,5,11,0) 64%),linear-gradient(180deg,rgba(7,5,11,.65) 0%,rgba(7,5,11,0) 18%);}
  .hero-film .hero-pills{gap:8px;}
  .hero-film .pill{padding:0 16px;font-size:12px;min-height:46px;}
  .hf-hint{bottom:auto;top:calc(var(--nav-h) + 16px);}
}
html[dir="rtl"] .hf-beat h1,html[dir="rtl"] .hf-big{letter-spacing:0;text-transform:none;line-height:1.05;}
html[dir="rtl"] .hf-lead{letter-spacing:0;line-height:1.35;}
.hf-big{font-size:clamp(3rem,min(7.6vw,14vh),8rem);white-space:nowrap;}
@media (max-width:760px){.hf-big{font-size:clamp(2.6rem,12.4vw,4rem);}}

/* scroll-linked micro motion. JS sets --lp (0–1) on each beat as you scroll through it; each element's --d says when it arrives.
   --e = how far an element has arrived (0–1); --x = how far the beat has left (0–1, last beat never leaves). */
.js .hf-beat{--lp:0;grid-area:1/1;align-self:end;visibility:hidden;
  --x:clamp(0,calc((var(--lp) - .84) * 6.25),1);
  opacity:calc(1 - var(--x));transform:translate3d(0,calc(var(--x) * -44px - var(--lp) * 14px),0);filter:blur(calc(var(--x) * 6px));}
.js .hf-beat.is-last{--x:0;}
.js .hf-beat.is-on{visibility:visible;}
.hf-l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;}
.hf-l>span{display:block;}
.js .hf-l>span{--e:clamp(0,calc((var(--lp) - var(--d,0)) * 6),1);transform:translate3d(0,calc((1 - var(--e)) * 108%),0);}
.js .hf-f{--e:clamp(0,calc((var(--lp) - var(--d,0)) * 5),1);opacity:var(--e);filter:blur(calc((1 - var(--e)) * 8px));transform:translate3d(0,calc((1 - var(--e)) * 14px),0);}
.js .hero-eyebrow.hf-f{letter-spacing:calc(.16em + (1 - var(--e)) * .22em);}
.hf-rule{display:block;width:72px;height:3px;background:var(--lime);margin-top:clamp(16px,2.4vh,24px);transform-origin:left;}
html[dir="rtl"] .hf-rule{transform-origin:right;}
.js .hf-rule{--e:clamp(0,calc((var(--lp) - var(--d,0)) * 5),1);transform:scaleX(var(--e));}
.hf-mark{color:inherit;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 92%/100% .14em;padding-bottom:.04em;}
html[dir="rtl"] .hf-mark{background-position:100% 92%;}
.js .hf-mark{--e:clamp(0,calc((var(--lp) - var(--d,0)) * 4),1);background-size:calc(var(--e) * 100%) .14em;}
.hero-film .hero-eyebrow{margin-top:clamp(12px,1.8vh,18px);}
.hero-film .hero-pills{margin-top:clamp(22px,3.4vh,34px);}
.hf-lead .hf-l + .hf-l{margin-top:.04em;}
@media (prefers-reduced-motion:reduce){
  .js .hf-beat{transform:none;filter:none;}
  .js .hf-l>span,.js .hf-f,.js .hf-rule{transform:none;filter:none;opacity:1;}
  .js .hf-mark{background-size:100% .14em;}
  .js .hero-eyebrow.hf-f{letter-spacing:.16em;}
}
.hf-lead{max-width:31ch;}
@media (max-width:760px){.hf-lead{max-width:none;}}
html[dir="rtl"] .hf-l{padding-bottom:.24em;margin-bottom:-.24em;}
@media (min-width:761px){.hf-lead{font-size:clamp(1.6rem,2.6vw,2.6rem);max-width:44ch;}.hf-text:has(.hf-lead){width:min(1000px,calc(100% - 2 * var(--gutter)));}}
.hf-mark{white-space:nowrap;}

/* hero film on wide screens: a lighter band at the top, just enough for the menu, so heads stay clear */
.hf-shade{background:
  linear-gradient(90deg,rgba(7,5,11,.82) 0%,rgba(7,5,11,.5) 32%,rgba(7,5,11,0) 62%),
  linear-gradient(0deg,rgba(7,5,11,.9) 0%,rgba(7,5,11,0) 42%),
  linear-gradient(180deg,rgba(7,5,11,.55) 0%,rgba(7,5,11,0) 11%);}
html[dir="rtl"] .hf-shade{background:
  linear-gradient(270deg,rgba(7,5,11,.82) 0%,rgba(7,5,11,.5) 32%,rgba(7,5,11,0) 62%),
  linear-gradient(0deg,rgba(7,5,11,.9) 0%,rgba(7,5,11,0) 42%),
  linear-gradient(180deg,rgba(7,5,11,.55) 0%,rgba(7,5,11,0) 11%);}
/* portrait screens (phones, portrait tablets): the vertical film. The text sits at the bottom on a deep shade,
   which also hides the floor, where the generated carpet changes between shots. */
@media (orientation:portrait) and (max-width:1024px){
  .hf-poster{object-position:50% 50%;}
  .hf-text{top:auto;bottom:clamp(40px,7vh,72px);}
  .hf-shade,html[dir="rtl"] .hf-shade{background:linear-gradient(0deg,rgba(7,5,11,.97) 0%,rgba(7,5,11,.9) 24%,rgba(7,5,11,.55) 40%,rgba(7,5,11,0) 56%),linear-gradient(180deg,rgba(7,5,11,.6) 0%,rgba(7,5,11,0) 16%);}
  .hf-hint{bottom:auto;top:calc(var(--nav-h) + 16px);}
  .hero-film .hero-cred{display:none;}
}

/* social links as icons (LinkedIn, IMDb, Instagram); names are in aria-label and title */
.socials{gap:8px 14px;}
.socials a{width:48px;height:48px;padding:0;justify-content:center;border:1px solid var(--hair);border-radius:50%;transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);}
.socials a:hover,.socials a:focus-visible{color:var(--lime);border-color:rgba(201,225,76,.55);transform:translateY(-2px);}
.socials svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible;}
.socials svg .dot{fill:currentColor;stroke:none;}
.socials svg text{fill:currentColor;stroke:none;font:700 7px/1 var(--body);letter-spacing:-.02em;}
.socials a{text-transform:none;letter-spacing:0;}
.socials svg text{font-size:7.6px;text-transform:none;}

/* ---------- MUSIC: His own music (a row: two pieces in view, the rest scroll in) + Off the page (improvising) ---------- */
.music-cols{display:grid;gap:56px;}
@media (min-width:1000px){.music-cols{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(40px,4vw,64px);align-items:start;}}
.mc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px;}
.mc-head .h2{margin-bottom:0;}
.mc-sub{color:var(--muted);max-width:44ch;margin:14px 0 24px;}
.reel-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 18px) / 2);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;}
.reel-row::-webkit-scrollbar{display:none;}
.reel-row > .card{scroll-snap-align:start;min-width:0;}
.reel-row:focus-visible{outline:2px solid var(--lime);outline-offset:6px;}
@media (max-width:640px){.reel-row{grid-auto-columns:84%;}}
.mc-side .card{max-width:none;}
@media (max-width:999px){.mc-side .mc-head{margin-top:0;}}
/* the muted "In his words" preview: crop YouTube's title overlay out of the frame, and fade in only after it has gone */
.live-poster iframe{width:142%;height:142%;}

/* ---------- rich text motion (data-motion="rich"): each scene plays in order; --i = place in the scene ---------- */
.m{--step:110ms;}
.js .m-scene .m-label{opacity:0;letter-spacing:.42em;transition:opacity .9s var(--out),letter-spacing 1.3s var(--out);transition-delay:calc(var(--i) * var(--step));}
.js .m-scene.m-go .m-label{opacity:1;letter-spacing:.14em;}
.m-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
.m-in{display:block;}
.js .m-scene .m-in{transform:translate3d(0,108%,0);transition:transform 1.15s cubic-bezier(.2,.8,.15,1);transition-delay:calc(var(--i) * var(--step));}
.js .m-scene.m-go .m-in{transform:none;}
.h2.m-title::after,.page-head h1.m-title::after{content:"";display:block;width:56px;height:2px;margin-top:16px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--out);transition-delay:calc(var(--i) * var(--step) + 650ms);}
.page-head h1.m-title::after{width:72px;height:3px;margin-top:20px;}
.contact h2.m-title::after{margin-inline:auto;}
html[dir="rtl"] .m-title::after{transform-origin:right;}
.m-scene.m-go .m-title::after{transform:scaleX(1);}
.js .m-scene .m-text{opacity:0;filter:blur(8px);transform:translate3d(0,12px,0);transition:opacity 1.1s var(--out),filter 1.2s var(--out),transform 1.1s var(--out);transition-delay:calc(var(--i) * var(--step));}
.js .m-scene.m-go .m-text{opacity:1;filter:none;transform:none;}
.js .m-scene .m-item{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--out),transform 1.1s var(--out);transition-delay:calc(var(--i) * var(--step));}
.js .m-scene.m-go .m-item{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .m-scene .m-label,.js .m-scene .m-in,.js .m-scene .m-text,.js .m-scene .m-item{opacity:1;filter:none;transform:none;letter-spacing:inherit;transition:none;}
  .m-title::after{transform:scaleX(1);transition:none;}
}
html[dir="rtl"] .js .m-scene .m-label,html[dir="rtl"] .js .m-scene.m-go .m-label{letter-spacing:0;}
@media (min-width:1000px){.music-cols .mc-sub{min-height:3.2em;}}
html[dir="rtl"] .strip-nav .btn-ghost{transform:scaleX(-1);}

/* ---------- text that moves with the scroll (js/site.js sets --e, 0–1, per line or element; --le = a title's last line) ---------- */
.tw{display:inline-block;vertical-align:top;}
.ti{display:inline-block;}
.js .tm-title .tw{overflow:hidden;padding:.08em 0 .12em;margin:-.08em 0 -.12em;}
html[dir="rtl"] .js .tm-title .tw{padding:.22em 0 .28em;margin:-.22em 0 -.28em;}
.js .tm-title .ti{transform:translate3d(0,calc((1 - var(--e,1)) * 112%),0);}
.js .tm-text .ti{opacity:calc(.1 + var(--e,1) * .9);transform:translate3d(0,calc((1 - var(--e,1)) * 12px),0);}
.js .tm-label{opacity:var(--e,1);letter-spacing:calc(.14em + (1 - var(--e,1)) * .3em);}
html[dir="rtl"] .js .tm-label{letter-spacing:0;}
.js .tm-item{opacity:calc(var(--e,1));translate:0 calc((1 - var(--e,1)) * 36px);}
.tm-title::after{content:"";display:block;width:56px;height:2px;margin-top:16px;background:var(--lime);transform-origin:left;transform:scaleX(var(--le,1));}
.page-head h1.tm-title::after{width:72px;height:3px;margin-top:20px;}
.contact h2.tm-title::after{margin-inline:auto;}
html[dir="rtl"] .tm-title::after{transform-origin:right;}
/* one underline per title: the scroll-linked one replaces the older reveal lines */
.h2.rise::after,.page-head h1.rise::after,.h2.m-title::after,.page-head h1.m-title::after{display:none;}
.fullbleed .fb-text{will-change:transform;}
/* His own music: let the third piece peek in, so it's clear the row scrolls */
@media (min-width:641px){.reel-row{grid-auto-columns:calc((100% - 36px) / 2.25);}}
/* placeholder card (not playable yet) */
.ph-card{cursor:default;}
.ph-card .card-thumb{display:block;position:relative;}
/* word spans from the scroll motion must never pick up a title's own span rules (e.g. .fb-h span{display:block}) */
.tm .tw,.tm .ti{display:inline-block;color:inherit;}

/* ---------- FILM header: the featured film and its awards ---------- */
.cm-feature{display:grid;gap:18px;}
.cm-poster{position:relative;display:block;width:100%;aspect-ratio:21/9;border-radius:14px;overflow:hidden;border:1px solid var(--hair);padding:0;background:#120d1d;cursor:pointer;text-align:start;color:var(--text);}
.cm-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;transition:transform 1.2s var(--out);}
.cm-poster .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,14,.85),rgba(10,9,14,.1) 60%);}
.cm-poster .play{position:absolute;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;background:var(--lime);display:grid;place-items:center;transition:transform .3s var(--out);}
.cm-poster .play::before{content:"";border-left:14px solid var(--canvas);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;}
html[dir="rtl"] .cm-poster .play{right:auto;left:18px;}
.cm-poster:hover img{transform:scale(1.04);}
.cm-poster:hover .play{transform:scale(1.08);}
.cm-cap{position:absolute;left:20px;right:84px;bottom:18px;display:grid;gap:4px;}
html[dir="rtl"] .cm-cap{left:84px;right:20px;}
.cm-cap .label{color:var(--lime);}
.cm-t{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.2vw,30px);line-height:1.05;letter-spacing:-.01em;}
.cm-r{font-size:14px;color:rgba(242,239,233,.8);}
.laurels{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,24px);}
.laurels li{flex:0 1 auto;display:flex;}
.laurels img{height:clamp(54px,6.4vw,78px);width:auto;opacity:.92;}
.laurels li:nth-child(2) img{height:clamp(56px,6.6vw,80px);}
@media (max-width:640px){.cm-poster{aspect-ratio:16/9;}.laurels{justify-content:center;}}
.cm-poster .play{left:auto;top:auto;right:18px;bottom:18px;transform:none;margin:0;}
html[dir="rtl"] .cm-poster .play{right:auto;left:18px;}
.cm-poster:hover .play{transform:scale(1.08);}
.laurels{justify-content:center;gap:clamp(18px,3vw,40px);}
@media (max-width:640px){.cm-poster{aspect-ratio:4/3;}.cm-cap{right:80px;}html[dir="rtl"] .cm-cap{left:80px;right:20px;}}

/* ---------- FILM archive: three rows, then it scrolls inside its own box; cards rise in as they come into view ---------- */
.archive-box{position:relative;}
.archive-box.is-scroll{overflow-y:auto;overscroll-behavior:contain;padding-right:10px;scrollbar-width:thin;scrollbar-color:var(--lime) rgba(242,239,233,.08);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 110px),rgba(0,0,0,.15));mask-image:linear-gradient(#000 calc(100% - 110px),rgba(0,0,0,.15));}
html[dir="rtl"] .archive-box.is-scroll{padding-right:0;padding-left:10px;}
.archive-box.is-scroll.at-end{-webkit-mask-image:none;mask-image:none;}
.archive-box::-webkit-scrollbar{width:6px;}
.archive-box::-webkit-scrollbar-track{background:rgba(242,239,233,.08);border-radius:6px;}
.archive-box::-webkit-scrollbar-thumb{background:var(--lime);border-radius:6px;}
.archive-box:focus-visible{outline:2px solid var(--lime);outline-offset:6px;}
.js .rv-card:not(.in){opacity:0;translate:0 30px;}
.js .rv-card.in{opacity:1;translate:none;transition:opacity .8s var(--out),translate 1s var(--out),transform .5s var(--out),box-shadow .5s var(--out),border-color .5s var(--out);}
@media (prefers-reduced-motion:reduce){.js .rv-card:not(.in){opacity:1;translate:none;}}
/* section headings: the description always sits under its title, on the start side (left; right in Arabic) */
.section-head{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;}
.section-head > p{margin:0;text-align:start;}
.section-head .strip-nav{align-self:flex-start;}
/* the archive: smaller cards so three rows fit on screen (five across on desktop, two on phones) */
.archive-box .grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:16px;}
.archive-box .card-meta .h{font-size:15px;}
@media (max-width:640px){.archive-box .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.archive-box .card-meta .role{font-size:12px;}}
.archive-box .card-thumb .fb{font-size:clamp(13px,1.3vw,17px);line-height:1.15;}
@media (max-width:640px){.archive-box .card-thumb .fb{font-size:13px;}}

/* archive: our own scroll rail, always visible, with a hint under the box */
.archive-wrap{position:relative;}
.archive-box.is-scroll{scrollbar-width:none;padding-right:26px;}
html[dir="rtl"] .archive-box.is-scroll{padding-right:0;padding-left:26px;}
.archive-box.is-scroll::-webkit-scrollbar{display:none;}
.arch-rail{position:absolute;top:0;bottom:0;right:0;width:24px;cursor:pointer;touch-action:none;}
html[dir="rtl"] .arch-rail{right:auto;left:0;}
.arch-rail::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:4px;transform:translateX(-50%);border-radius:4px;background:rgba(242,239,233,.12);}
.arch-thumb{position:absolute;top:0;left:50%;width:8px;margin-left:-4px;border-radius:8px;background:var(--lime);box-shadow:0 0 14px rgba(201,225,76,.35);transition:width .2s,margin .2s;}
.arch-rail:hover .arch-thumb,.arch-rail.drag .arch-thumb{width:12px;margin-left:-6px;}
.arch-rail[hidden],.arch-hint[hidden]{display:none;}
.arch-hint{margin:14px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);transition:opacity .4s var(--ease);}
.arch-hint.gone{opacity:0;}

/* full-screen sections: the notes (and the link after them) play one at a time, just after the paragraph */
@media (prefers-reduced-motion:no-preference){
  .js .fb-seq > li,.js .fb-seq ~ .more{opacity:0;transform:translate3d(0,18px,0);filter:blur(6px);transition:opacity .6s var(--out),transform .7s var(--out),filter .6s var(--out);transition-delay:0s;}
  .js .fb-seq.go > li,.js .fb-seq.go ~ .more{opacity:1;transform:none;filter:none;}
  .js .fb-seq.go > li:nth-child(1){transition-delay:.4s;}
  .js .fb-seq.go > li:nth-child(2){transition-delay:.7s;}
  .js .fb-seq.go > li:nth-child(3){transition-delay:1s;}
  .js .fb-seq.go > li:nth-child(4){transition-delay:1.3s;}
  .js .fb-seq.go ~ .more{transition-delay:1.4s;}
}

/* His own music: the scroll arrows sit under the cards */
.mc-nav{margin-top:18px;}

/* optional second line on a project card (catalogue field "line") */
.card-meta .line{display:block;margin-top:2px;font-size:13.5px;color:var(--text);opacity:.85;}
.card-thumb img[src*="rotana-majid-al-muhandis"]{object-position:62% 28%;}

/* Stage: the headshot download at the bottom of the page */
.dl-row{padding-top:0;}

/* download link with an icon (Stage: casting shots) */
.dl-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;}
.dl-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;}

/* Off the page: Robert's vertical piano clip, kept to a sensible height */
.vcard{max-width:340px;}
.vcard .card-thumb{aspect-ratio:9/16;background:#120d1d;}
.vcard .card-thumb img{object-fit:cover;}
.vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;}
.vcard.is-playing .card-meta{display:block;}
.mc-side .vcard{max-width:340px;}

/* ---------- video cards: hover/focus motion (reveal uses `translate`, so `transform` is free for this) ----------
   the card lifts and tilts a little towards the pointer, the still pushes in under a lime light sweep,
   the play button fills lime, and a lime line draws under the title */
.card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .5s var(--out),box-shadow .5s var(--out),border-color .5s var(--out),opacity .8s var(--out),translate 1s var(--out);will-change:transform;}
.card:hover,.card:focus-within{--lift:-8px;box-shadow:0 22px 46px rgba(0,0,0,.5),0 8px 34px rgba(201,225,76,.10);}
.card-thumb::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(201,225,76,.22) 46%,rgba(242,239,233,.10) 50%,transparent 64%);
  transform:translateX(-110%);}
.card:hover .card-thumb::after,.card:focus-within .card-thumb::after{transform:translateX(110%);transition:transform 1.1s var(--out);}
.card:hover .card-thumb img,.card:focus-within .card-thumb img{transform:scale(1.07);filter:brightness(1.08) saturate(1.08);}
.card:hover .mini,.card:focus-within .mini{background:var(--lime);border-color:var(--lime);transform:scale(1.14);}
.card:focus-within .mini::before{border-left-color:var(--canvas);}
.card-meta .h{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100%/0 2px;padding-bottom:3px;transition:background-size .6s var(--out);}
html[dir="rtl"] .card-meta .h{background-position:100% 100%;}
.card:hover .card-meta .h,.card:focus-within .card-meta .h{background-size:100% 2px;}
.card-meta .h{display:table;}
.card-play:active{transform:none;}
.card:active{--lift:-3px;}
@media (prefers-reduced-motion:reduce){
  .card{transform:none !important;}
  .card-thumb::after{display:none;}
  .card:hover .card-thumb img,.card:focus-within .card-thumb img{transform:none;}
}
.card:hover,.card:focus-within{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));}
@media (prefers-reduced-motion:reduce){.card:hover,.card:focus-within{transform:none;}}

/* ---------- ABOUT (rebuilt): intro + awards + worked with · teaching · what he brings ---------- */
.about-intro{padding-top:clamp(40px,5vw,72px);}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;}
.intro-grid .prose p:not(.label){font-size:clamp(16px,1.25vw,18px);line-height:1.7;max-width:60ch;}
.about-laurels{flex-wrap:wrap;justify-content:center;gap:clamp(18px,2.4vw,34px);}
.about-laurels img{height:clamp(70px,7.6vw,104px);}
.about-laurels li:nth-child(2) img{height:clamp(74px,8vw,110px);}
.worked{margin-top:clamp(44px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--hair);}
.wall{margin:14px 0 0;font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.3vw,32px);line-height:1.45;letter-spacing:-.01em;color:rgba(242,239,233,.55);max-width:62ch;}
.wall .ag{color:var(--text);}
.teach{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.teach li{display:flex;flex-direction:column;gap:6px;padding:22px 20px 24px;background:var(--raised);border:1px solid var(--hair);border-radius:12px;transition:border-color .4s var(--out),transform .4s var(--out);}
.teach li:hover{border-color:rgba(201,225,76,.55);transform:translateY(-4px);}
.teach .yr{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:6px;}
.teach b{font-family:var(--disp);font-size:20px;line-height:1.15;}
.teach li > span:last-child{font-size:14.5px;line-height:1.55;color:var(--muted);}
.trained,.toolkit{margin:26px 0 18px;font-size:15px;line-height:1.7;color:var(--muted);max-width:90ch;}
.trained .label,.toolkit .label{margin-inline-end:12px;}
.crafts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.craft{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(460px,40vw,560px);padding:24px 22px;background:radial-gradient(120% 80% at 50% 100%,rgba(123,63,208,.35),transparent 60%),var(--raised);border:1px solid var(--hair);border-radius:14px;transition:border-color .5s var(--out),transform .5s var(--out);}
.craft:hover{border-color:rgba(201,225,76,.6);transform:translateY(-6px);}
.craft h3{font-family:var(--disp);font-weight:800;font-size:clamp(24px,2.2vw,32px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin:8px 0 18px;}
.craft ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative;z-index:1;}
.craft li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;}
.craft .ico{width:20px;height:20px;fill:none;stroke:var(--lime);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
.craft li b{display:block;font-size:15.5px;font-weight:600;line-height:1.3;}
.craft li small{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:2px;}
.craft-ph{position:absolute;z-index:-1;right:-6%;bottom:-2%;height:58%;width:auto;max-width:none;opacity:.55;filter:grayscale(.3);
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 30%);mask-image:linear-gradient(to top,transparent 0%,#000 30%);
  transition:opacity .6s var(--out),transform .9s var(--out),filter .6s var(--out);}
html[dir="rtl"] .craft-ph{right:auto;left:-6%;}
.craft:hover .craft-ph{opacity:.9;transform:translateY(-10px) scale(1.04);filter:none;}
@media (max-width:1100px){.crafts,.teach{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:760px){
  .intro-grid{grid-template-columns:1fr;}
  .about-laurels{justify-content:flex-start;}
}
@media (max-width:600px){.crafts,.teach{grid-template-columns:1fr;}.craft{min-height:420px;}.craft-ph{height:52%;}}
@media (prefers-reduced-motion:reduce){.craft,.craft-ph,.teach li{transition:none;}.craft:hover,.craft:hover .craft-ph,.teach li:hover{transform:none;}}
/* craft cards: text on top, the portrait in its own band at the bottom (never behind the text) */
.craft{display:flex;flex-direction:column;padding-bottom:0;min-height:0;}
.craft ul{margin-bottom:22px;}
.craft-ph{position:relative;z-index:0;right:auto;left:auto;bottom:auto;display:block;align-self:center;margin-top:auto;height:clamp(200px,17vw,260px);width:auto;opacity:.8;
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 35%);mask-image:linear-gradient(to top,transparent 0%,#000 35%);}
html[dir="rtl"] .craft-ph{left:auto;}
.craft:hover .craft-ph{opacity:1;transform:translateY(-8px) scale(1.03);}
@media (max-width:600px){.craft-ph{height:220px;}}
.trained,.toolkit{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;align-items:baseline;}
.trained .label,.toolkit .label{margin:0;}
@media (max-width:600px){.trained,.toolkit{grid-template-columns:1fr;}}
.intro-grid .h2{margin-bottom:22px;}
.craft-ph{order:99;}

/* ---------- ABOUT, round 2 ---------- */
.intro-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;}
.intro-side .h2{margin-bottom:28px;}
.intro-side .about-laurels{justify-content:flex-start;}
.intro-text p{font-size:clamp(17px,1.35vw,19.5px);line-height:1.7;margin:0 0 18px;max-width:58ch;}
.worked-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,4vw,64px);margin-top:18px;}
.wk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:0 0 12px;}
.wn{font-family:var(--disp);font-weight:700;font-size:clamp(18px,1.7vw,24px);line-height:1.5;margin:0;color:var(--text);}
.teach-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start;}
.teach-side .lead-sm{color:var(--muted);font-size:16px;line-height:1.6;max-width:40ch;margin:0 0 22px;}
.teaches{margin:0 0 22px;font-size:16px;line-height:1.7;max-width:44ch;}
.teaches .label{display:block;margin-bottom:6px;}
.teach-grid .teach{grid-template-columns:repeat(2,minmax(0,1fr));}
/* craft cards: dark fade behind the portrait, a soft shadow under the figure */
.craft{background:linear-gradient(to bottom,var(--raised) 0%,#0d0b12 70%,#08070b 100%);}
.craft-ph{opacity:.95;filter:drop-shadow(0 18px 24px rgba(0,0,0,.65)) drop-shadow(0 4px 6px rgba(0,0,0,.5));
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 26%);mask-image:linear-gradient(to top,transparent 0%,#000 26%);}
.craft:hover .craft-ph{filter:drop-shadow(0 26px 30px rgba(0,0,0,.7)) drop-shadow(0 4px 6px rgba(0,0,0,.5));}
@media (max-width:1100px){.teach-grid .teach{grid-template-columns:1fr 1fr;}}
@media (max-width:900px){.intro-grid,.teach-grid{grid-template-columns:1fr;}}
@media (max-width:760px){.worked-cols{grid-template-columns:1fr 1fr;}}
/* phones: the craft cards become a swipe row instead of one long column */
@media (max-width:760px){
  .crafts{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scroll-padding:0 var(--gutter);scrollbar-width:none;}
  .crafts::-webkit-scrollbar{display:none;}
  .craft{scroll-snap-align:start;}
  .teach-grid .teach{grid-template-columns:1fr 1fr;}
}
@media (max-width:420px){.teach-grid .teach{grid-template-columns:1fr;}}
.teach-side .h2{margin-bottom:22px;}

/* ---------- TEACHING page ---------- */
.logos{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.logos li{display:flex;align-items:center;justify-content:center;min-height:76px;padding:12px;background:#F2EFE9;border-radius:10px;}
.logos img{max-height:48px;max-width:100%;width:auto;object-fit:contain;}
.logos li.name{font-family:var(--disp);font-weight:700;font-size:13.5px;line-height:1.2;text-align:center;color:#1a1622;}
@media (max-width:900px){.logos{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:520px){.logos{grid-template-columns:repeat(2,minmax(0,1fr));}}
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair);}
.timeline li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair);}
.timeline .yr{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--lime);padding-top:3px;}
.timeline b{display:block;font-family:var(--disp);font-size:18px;line-height:1.25;}
.timeline small{display:block;font-size:14.5px;color:var(--muted);margin-top:3px;}
.craft-more{position:relative;z-index:1;display:inline-flex;margin:-8px 0 18px;}

/* ABOUT round 3: one text (title + tagline in the header, the story below), laurels beside it */
.about-intro .intro-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);align-items:start;}
.about-intro .intro-side{position:sticky;top:calc(var(--nav-h) + 40px);}
.about-intro .about-laurels{flex-direction:column;align-items:center;justify-content:flex-start;}
.intro-text .intro-close{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.2vw,32px);line-height:1.2;color:var(--lime);margin-top:30px;max-width:24ch;}
.page-head .lead strong{font-weight:600;color:var(--text);}
@media (max-width:900px){
  .about-intro .intro-grid{grid-template-columns:1fr;}
  .about-intro .intro-side{position:static;}
  .about-intro .about-laurels{flex-direction:row;justify-content:flex-start;}
}

/* ABOUT round 4: no title; the page opens directly on the text (portrait, CV and laurels beside it) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.about-top{padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px));}
.about-top .intro-grid .intro-text p.intro-lead{font-family:var(--disp);font-weight:700;font-size:clamp(26px,2.8vw,40px);line-height:1.15;letter-spacing:-.01em;color:var(--text);max-width:20ch;margin:0 0 28px;}
.about-top .intro-side .photo.small{max-width:300px;margin:0 auto 14px;}
.about-top .intro-side p.aside-links{display:block;text-align:center;margin:0 0 34px;}
@media (max-width:900px){
  .about-top .intro-side{display:grid;margin-top:12px;grid-template-columns:minmax(0,160px) 1fr;gap:6px 20px;align-items:end;}
  .about-top .intro-side .photo.small{margin:0;max-width:160px;grid-row:span 2;}
  .about-top .intro-side p.aside-links{text-align:start;margin:0;}
  .about-top .about-laurels{gap:12px;}
  .about-top .about-laurels img{height:54px;}
  .about-top .about-laurels li:nth-child(2) img{height:58px;}
}
html[dir="rtl"] .intro-text .intro-lead{letter-spacing:0;}

/* footer: the short copyright line, linking to the Copyright & Credits page */
.footer .legal{flex:0 0 100%;box-sizing:border-box;padding-inline-end:max(0px,calc(100% - 860px));margin:6px 0 0;font-family:var(--body,Inter),system-ui,sans-serif;font-size:12px;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--muted);}
.footer .legal a{color:var(--text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;display:inline-block;padding:12px 0;margin:-12px 0;}
.footer .legal a:hover{color:var(--lime);}
.legal-page .prose{max-width:68ch;}
.legal-page .prose p{font-size:clamp(16px,1.25vw,18px);line-height:1.7;margin:0 0 18px;}
.legal-page .prose a{color:var(--lime);}

/* TEACHING round 2: school logos in white, no tiles */
.logos{gap:28px 34px;align-items:center;}
.logos li{background:none;padding:0;min-height:64px;border-radius:0;}
.logos img{max-height:52px;opacity:.92;transition:opacity .3s var(--ease);}
.logos li:hover img{opacity:1;}
.logos li.name{color:var(--text);font-size:15px;}
.teach-cta{margin:26px 0 0;}
.logos li.wide{grid-column:span 2;}
.logos li.wide img{max-height:44px;max-width:min(100%,220px);}
.logos img[src*="amman-academy"]{max-height:66px;}

/* password-protected video: lock on the card, a small password dialog */
.card-thumb.locked .lock-ico{position:absolute;top:14px;right:14px;width:22px;height:22px;fill:none;stroke:var(--lime);stroke-width:1.8;stroke-linecap:round;}
html[dir="rtl"] .card-thumb.locked .lock-ico{right:auto;left:14px;}
.lock-dlg{border:1px solid var(--hair);border-radius:16px;background:var(--raised);color:var(--text);padding:28px;width:min(420px,calc(100vw - 32px));}
.lock-dlg::backdrop{background:rgba(7,5,11,.78);backdrop-filter:blur(4px);}
.lock-dlg h3{font-family:var(--disp);font-size:24px;margin:8px 0 10px;}
.lock-dlg p{color:var(--muted);margin:0 0 16px;font-size:15px;}
.lock-dlg input{width:100%;box-sizing:border-box;min-height:48px;padding:12px 14px;border-radius:10px;border:1px solid var(--hair);background:var(--canvas);color:var(--text);font:inherit;letter-spacing:.08em;}
.lock-dlg input:focus{outline:2px solid var(--lime);outline-offset:1px;}
.lock-dlg .lock-err{color:#FF8A7A;margin:10px 0 0;}
.lock-row{display:flex;gap:10px;margin-top:18px;}
.lock-row button{min-height:44px;}
.lock-x{background:none;border:1px solid var(--hair);color:var(--text);border-radius:10px;padding:0 18px;cursor:pointer;font:inherit;}
.lock-ask{display:inline-block;margin-top:16px;padding:10px 0;color:var(--violet-ink);font-size:14px;}
.lock-row .btn-lime{border:0;cursor:pointer;padding:0 22px;border-radius:10px;font:inherit;font-weight:700;}

/* TEACHING round 4: the two course videos sit under the four tiles, in the same column */
.teach-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px;align-items:start;}
@media (max-width:420px){.teach-videos{grid-template-columns:1fr;}}
/* About: the opening line in purple */
.about-top .intro-grid .intro-text p.intro-lead{color:var(--violet-ink);}
.about-top .intro-text .hl{color:var(--lime);font-weight:600;}
.about-top .intro-text .hl strong{font-weight:700;}
/* About: the same purple-to-black wash as the other page headers, behind the top of the text */
.about-top::before{content:"";position:absolute;left:0;right:0;top:0;height:min(820px,100%);z-index:-1;pointer-events:none;
  background:radial-gradient(110% 88% at 50% 0%,rgba(123,63,208,.5),transparent 58%),radial-gradient(78% 58% at 20% 84%,rgba(168,224,0,.14),transparent 60%),linear-gradient(180deg,#281450 0%,#150a2b 62%,var(--canvas) 100%);}
.about-top::before{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);}
/* on the purple wash, the opening line reads better in lime */
.about-top .intro-grid .intro-text p.intro-lead{color:var(--lime);}
/* About, What he brings: each craft card carries the header's purple-to-black wash */
.craft{background:radial-gradient(110% 70% at 50% 0%,rgba(123,63,208,.45),transparent 62%),linear-gradient(180deg,#281450 0%,#150a2b 55%,#08070b 100%);}

/* Stage: room between a column heading's lime line and what follows; a tighter gap between At a glance and On set */
.cols-2 > div > .h2{margin-bottom:clamp(22px,2.4vw,32px);}
section[aria-labelledby="casting"]{padding-bottom:clamp(32px,4vw,56px);}
#on-set{padding-top:clamp(36px,4.5vw,64px);}

/* less empty space between a page's last section and the contact block (every page) */
main > section:not([hidden]):not(:has(~ section:not([hidden]))){padding-bottom:clamp(36px,4.5vw,64px);}  /* the last visible section (slots stay hidden) */
.legal-page .prose p:last-child{margin-bottom:0;}
.contact{padding-top:clamp(52px,6.5vw,92px);padding-bottom:clamp(52px,6.5vw,92px);}

/* Music, His own music: the four pieces in a 2×2 grid (no sideways scroll) */
.mc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.mc-grid .card{max-width:none;}
@media (max-width:520px){.mc-grid{grid-template-columns:1fr;}}

/* About: portrait in a circle, the CV download as a lime pill on its lower edge */
.about-circle{position:relative;margin:0 auto 40px;width:min(300px,100%);}
.about-circle img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(242,239,233,.14),0 0 0 8px rgba(123,63,208,.22),0 24px 50px rgba(0,0,0,.5);}
.cv-pill{position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  min-height:44px;padding:0 20px;border-radius:999px;background:var(--lime);color:var(--canvas);font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,.45);transition:transform .3s var(--out),box-shadow .3s var(--out);}
.cv-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cv-pill:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.5);}
.cv-pill:focus-visible{outline:2px solid var(--text);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){.cv-pill{transition:none;}.cv-pill:hover{transform:translateX(-50%);}}
html[dir="rtl"] .cv-pill{letter-spacing:0;font-family:'IBM Plex Sans Arabic',var(--body);}
@media (max-width:900px){.about-top .intro-side .about-circle{width:200px;margin:0 0 34px;grid-row:span 2;}}
@media (max-width:900px){.about-top .intro-side{grid-template-columns:minmax(0,200px) 1fr;align-items:center;}}
@media (max-width:440px){.about-top .intro-side{grid-template-columns:1fr;justify-items:center;}.about-top .intro-side .about-circle{grid-row:auto;margin:0 auto 40px;}.about-top .about-laurels{justify-content:center;}}

/* About: four award laurels as a composed 2×2 group (the two wide marks on top, the two Franco-Arab prizes below) */
.about-top .intro-side ul.about-laurels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;align-items:center;justify-items:center;max-width:320px;margin:0 auto;}
.about-top ul.about-laurels li img,.about-top ul.about-laurels li:nth-child(2) img{height:auto;width:100%;max-height:none;}
.about-top ul.about-laurels li{width:100%;justify-content:center;}
.about-top ul.about-laurels li.wide img{max-width:150px;}
.about-top ul.about-laurels li:not(.wide) img{max-width:84px;}
@media (max-width:900px){.about-top .intro-side ul.about-laurels{max-width:300px;margin:0;gap:14px 12px;}.about-top ul.about-laurels li.wide img{max-width:120px;}.about-top ul.about-laurels li:not(.wide) img{max-width:66px;}}
@media (max-width:440px){.about-top .intro-side ul.about-laurels{margin:0 auto;}}
.about-top .intro-side ul.about-laurels{margin-top:22px;}

/* footer: Press & bio link */
.footer > span a{color:var(--text);white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(242,239,233,.4);text-underline-offset:4px;display:inline-block;padding:12px 0;margin:-12px 0;}
.footer > span a:hover{color:var(--lime);text-decoration-color:var(--lime);}
/* Press & bio page */
.press-circle{margin:0 0 30px auto;width:min(260px,100%);}
html[dir="rtl"] .press-circle{margin:0 auto 30px 0;}
@media (max-width:900px){.press-circle{margin:0 0 30px;width:200px;}}
.press-bio p{font-size:clamp(16px,1.25vw,18px);line-height:1.7;margin:0 0 16px;max-width:62ch;}
.press-gap{margin-top:34px;}
.press-more{display:flex;flex-wrap:wrap;gap:12px 28px;margin:26px 0 0;}
.press .facts li span:last-child{line-height:1.6;}
.press .label{margin-bottom:12px;}

/* live previews: a control bar along the bottom (play / pause, restart, time, seek, sound, full screen) */
.live-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 14px 8px;background:linear-gradient(to top,rgba(7,5,11,.85),rgba(7,5,11,.45) 60%,transparent);color:var(--text);}
.live-bar[hidden]{display:none;}
.lb-row{display:flex;align-items:center;gap:2px;}
.lb-row button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:color .25s var(--out),background .25s var(--out);}
.lb-row button:hover{color:var(--lime);background:rgba(242,239,233,.08);}
.lb-row button:focus-visible{outline:2px solid var(--lime);outline-offset:-2px;}
.lb-row svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.lb-row svg .fill{fill:currentColor;stroke:none;}
.lb-time{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;margin-inline-start:6px;white-space:nowrap;direction:ltr;unicode-bidi:isolate;}
.lb-gap{flex:1;}
.lb-seek{-webkit-appearance:none;appearance:none;display:block;width:calc(100% - 20px);margin:0 10px 4px;height:22px;background:transparent;cursor:pointer;--p:0%;}
.lb-seek::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--lime) var(--p),rgba(242,239,233,.28) var(--p));}
.lb-seek::-moz-range-track{height:4px;border-radius:4px;background:rgba(242,239,233,.28);}
.lb-seek::-moz-range-progress{height:4px;border-radius:4px;background:var(--lime);}
.lb-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--lime);border:0;}
.lb-seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--lime);border:0;}
.lb-seek:focus-visible{outline:2px solid var(--lime);outline-offset:2px;}
html[dir="rtl"] .lb-seek{direction:ltr;}
html[dir="rtl"] .lb-restart svg{transform:scaleX(-1);}
/* "Watch with sound" sits above the bar until the sound is on; then the bar's sound button takes over */
.live-poster.has-bar .watch-btn{bottom:86px;}
.live-poster.bar-ready .watch-btn{display:none;}
/* the bar fades out when not in use (see site.js: shown on hover, tap or keyboard focus) */
.live-bar{opacity:0;pointer-events:none;transition:opacity .35s var(--ease);}
.live-poster.bar-show .live-bar{opacity:1;pointer-events:auto;}
@media (prefers-reduced-motion:reduce){.live-bar{transition:none;}}
.live-poster:fullscreen,.live-poster:-webkit-full-screen{border-radius:0;border:0;aspect-ratio:auto;width:100%;height:100%;}
@media (max-width:520px){.live-bar{padding:20px 6px 4px;}.lb-time{font-size:11.5px;}.live-poster.has-bar .watch-btn{bottom:76px;}}