/* Generated from style.src.css by build.py */
/* LAQTAH — source stylesheet.
   "Nv" = N px of the 1024px-wide reference (reference-final.png), compiled to calc(N * var(--v)).
   Run build.py after editing, or edit style.css directly. */

@font-face{font-family:"Aref Ruqaa";src:url(../fonts/aref-ruqaa-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Marhey";src:url(../fonts/marhey-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");font-weight:400;unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");font-weight:500;unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");font-weight:600;unicode-range:U+0000-00FF;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");font-weight:700;unicode-range:U+0000-00FF;font-display:swap}

:root{
  --v: calc(min(100vw, 1360px) / 1024);
  /* sampled from reference-final.png */
  --ink:#0B1A18;
  --ink-soft:#243330;
  --orange:#D2480F;
  --orange-d:#B63C0B;
  --paper:#FCF3E8;
  --paper-light:#FDF5EA;
  --paper-note:#F8DEC1;
  --kraft:#CDB28A;
  --olive:#4B4A31;
  --tape:rgba(150,160,104,.66);
  --tag:#D9D2C0;
  --ruqaa:"Aref Ruqaa",serif;
  --ui:"Plex",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
[hidden]{display:none!important}
body{font-family:var(--ui);color:var(--ink);background:#6E5134 url(../assets/table.webp) center top/1200px;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
ul{list-style:none}

.page{--wh:690;--sh:520;--fh:0;position:relative;width:min(100%,1360px);height:calc((1060 + var(--wh) + var(--sh) + var(--fh)) * var(--v));margin:0 auto;overflow:clip;isolation:isolate}

/* ---------- materials ---------- */
.sh{position:absolute;filter:drop-shadow(0 calc(.8 * var(--v)) calc(.8 * var(--v)) rgba(60,38,15,.28)) drop-shadow(calc(1 * var(--v)) calc(3 * var(--v)) calc(5 * var(--v)) rgba(60,38,15,.14))}
.paper{
  background-color:var(--paper);
  background-image:
    radial-gradient(130% 100% at 30% 20%,rgba(255,255,255,.28),rgba(160,125,80,.08) 65%,rgba(130,95,55,.20)),
    url(../assets/paper.webp);
  background-size:100% 100%,720px;
  background-blend-mode:multiply,multiply;
}
.sh > .paper{position:absolute;inset:0}
/* ChatGPT paper assets: torn sheets with real transparent edges */
.paper-card{border-style:solid;border-width:calc(22 * var(--v));border-image:url(../assets/card-paper-a.webp) 70 fill stretch}
.paper-card-b{border-style:solid;border-width:calc(20 * var(--v));border-image:url(../assets/card-paper-b.webp) 70 fill stretch}
.paper-label{border-style:solid;border-width:calc(18 * var(--v)) calc(24 * var(--v));border-image:url(../assets/label-paper.webp) 60 80 fill stretch}
.tape{position:absolute;z-index:8;width:calc(40 * var(--v));height:calc(22 * var(--v));background:url(../assets/tape.webp) center/100% 100% no-repeat;opacity:.92}
.brush{position:absolute;fill:var(--orange);overflow:visible;z-index:6}

/* ---------- worktable, backing sheet, scraps ---------- */
.page{background:
  url(../assets/plate-top-v2.webp) 0 0/100% auto no-repeat,
  url(../assets/plate-bottom.webp) 0 100%/100% auto no-repeat}
.table-layer{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-sheet{left:calc(622 * var(--v));top:calc(96 * var(--v));width:calc(384 * var(--v));height:calc(348 * var(--v));transform:rotate(.4deg)}
.hero-sheet .paper{background-color:var(--paper-light)}

/* ---------- props ---------- */
.props{position:absolute;inset:0;pointer-events:none;z-index:1}
.prop{position:absolute;height:auto}
.pr-plant{left:0;top:0;width:calc(200 * var(--v))}
.pr-coffee-top{left:calc(930 * var(--v));top:0;width:calc(94 * var(--v))}
.pr-cams{left:0;top:calc(82 * var(--v));width:calc(52 * var(--v))}
.pr-neg{left:0;top:calc(318 * var(--v));width:calc(54 * var(--v))}
.pr-pol1{left:0;top:calc(410 * var(--v));width:calc(132 * var(--v));z-index:2}
.pr-clap{left:0;top:calc(580 * var(--v));width:calc(118 * var(--v))}
.pr-pol2{left:0;top:calc(768 * var(--v));width:calc(105 * var(--v))}
.pr-lensl{left:0;top:calc(1225 * var(--v));width:calc(62 * var(--v))}
.pr-coffee-bot{left:0;top:calc(1380 * var(--v));width:calc(78 * var(--v));z-index:12}
.pr-pen{left:calc(988 * var(--v));top:calc(180 * var(--v));width:calc(36 * var(--v))}
.pr-lensr{left:calc(922 * var(--v));top:calc(468 * var(--v));width:calc(102 * var(--v));z-index:9}
.pr-film{left:calc(968 * var(--v));top:calc(815 * var(--v));width:calc(56 * var(--v))}
.pr-film2{left:calc(985 * var(--v));top:calc((764 + var(--wh) + var(--sh) + var(--fh)) * var(--v));width:calc(39 * var(--v))}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(12 * var(--v));font-family:var(--ui);font-weight:600;font-size:calc(15.5 * var(--v));height:calc(40 * var(--v));padding:0 calc(16 * var(--v));border-radius:calc(4 * var(--v));white-space:nowrap;transition:transform .2s ease,background-color .2s ease}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 calc(1 * var(--v)) calc(2 * var(--v)) rgba(90,30,0,.25)}
.btn-orange:hover{background:var(--orange-d);transform:translateY(-1px)}
.btn .arr{font-style:normal;font-size:1.15em;line-height:1;font-family:system-ui,sans-serif}
.btn-outline{background:rgba(243,236,221,.45);color:var(--ink);border:calc(1.5 * var(--v)) solid rgba(11,26,24,.75)}
.btn-outline:hover{background:#fff}
.play-tri{display:inline-block;width:0;height:0;border-top:calc(7 * var(--v)) solid transparent;border-bottom:calc(7 * var(--v)) solid transparent;border-left:calc(11 * var(--v)) solid var(--ink)}
.btn:focus-visible,.t-play:focus-visible,.vplay:focus-visible,.main-nav a:focus-visible,.ftr-nav a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- header ---------- */
.site-header{position:absolute;left:0;top:0;width:calc(1024 * var(--v));height:calc(96 * var(--v));z-index:5;display:flex;align-items:center;gap:calc(50 * var(--v));padding:calc(14 * var(--v)) calc(118 * var(--v));direction:rtl}
.logo{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1}
.site-header .logo{position:relative;right:auto;top:auto;flex:none}
.logo-ar{font-family:"Marhey",sans-serif;font-weight:700;font-size:calc(46 * var(--v));letter-spacing:calc(-.5 * var(--v));color:var(--ink);line-height:1}
.logo-en{font-family:var(--ui);font-weight:600;font-size:calc(11.5 * var(--v));letter-spacing:calc(8.4 * var(--v));margin-top:calc(3 * var(--v));margin-right:calc(-8 * var(--v));color:var(--ink)}
.main-nav{position:relative;display:flex;align-items:center;gap:calc(24 * var(--v));font-weight:500;font-size:calc(15.5 * var(--v));direction:rtl}
.main-nav a{position:relative;padding:calc(2 * var(--v)) 0}
.main-nav a::after{content:"";position:absolute;right:0;left:0;bottom:calc(-2 * var(--v));height:calc(2 * var(--v));background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .25s ease}
.main-nav a:hover::after{transform:scaleX(1)}
.hdr-cta{position:absolute;left:calc(182 * var(--v));top:calc(32 * var(--v));width:calc(159 * var(--v));height:calc(36 * var(--v))}
.btn-orange.hdr-cta,.hero-btns .btn-orange{background:#1F3A2F;box-shadow:0 calc(1 * var(--v)) calc(2 * var(--v)) rgba(10,26,20,.3)}
.btn-orange.hdr-cta:hover,.hero-btns .btn-orange:hover{background:#142A21}

/* ---------- hero ---------- */
.hero{position:absolute;left:0;top:0;width:calc(1024 * var(--v));height:calc(440 * var(--v));z-index:4}
.hero-photo-wrap{left:calc(25 * var(--v));top:calc(25 * var(--v));width:calc(673 * var(--v));height:calc(439 * var(--v));transform:rotate(3deg)}
.hero-photo{position:absolute;inset:0}
.hero-photo img{position:absolute;top:calc(50 * var(--v));right:calc(48 * var(--v));bottom:calc(64 * var(--v));left:calc(50 * var(--v));width:calc(100% - calc(98 * var(--v)));height:calc(100% - calc(114 * var(--v)));object-fit:cover;object-position:50% 50%}
.hero-frame{position:absolute;inset:0;border-style:solid;border-width:calc(50 * var(--v)) calc(48 * var(--v)) calc(64 * var(--v)) calc(50 * var(--v));border-image:url(../assets/hero-photo-frame.webp) 123 119 255 123 stretch;pointer-events:none}
.tape-h1{left:calc(134 * var(--v));top:calc(68 * var(--v));width:calc(38 * var(--v));height:calc(24 * var(--v));transform:rotate(-8deg)}
.tape-h2{left:calc(442 * var(--v));top:calc(80 * var(--v));width:calc(36 * var(--v));height:calc(24 * var(--v));transform:rotate(4deg)}

.hero-note-wrap{left:calc(24 * var(--v));top:calc(162 * var(--v));width:calc(152 * var(--v));height:calc(196 * var(--v));transform:rotate(-8deg);z-index:7}
.hero-note{position:absolute;inset:0;padding:calc(8 * var(--v)) calc(6 * var(--v)) 0 calc(6 * var(--v));background-color:var(--paper-note)}
.note-text{position:relative;font-family:var(--ruqaa);font-weight:700;color:var(--orange);font-size:calc(39 * var(--v));line-height:1.16;text-align:center}
.note-draw{position:absolute;left:calc(14 * var(--v));bottom:calc(2 * var(--v));width:calc(122 * var(--v));height:calc(60 * var(--v));fill:none;stroke:var(--orange);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

.hero-copy{position:absolute;right:calc(66 * var(--v));top:calc(104 * var(--v));width:calc(320 * var(--v));text-align:right}
.hero-title{font-family:var(--ruqaa);font-weight:700;color:var(--ink);line-height:1;-webkit-text-stroke:calc(1.2 * var(--v)) var(--ink);transform:rotate(-2.5deg);transform-origin:right center}
.hero-title span{display:block;white-space:nowrap}
.hero-title .l1{font-size:calc(80 * var(--v))}
.hero-title .l2{font-size:calc(62 * var(--v));margin-top:calc(10 * var(--v));transform:scaleY(1.12);transform-origin:right top}
.hero-sub{margin-top:calc(40 * var(--v));font-size:calc(17 * var(--v));line-height:1.62;font-weight:500;color:var(--ink-soft)}
.hero-underline{left:calc(690 * var(--v));top:calc(262 * var(--v));width:calc(176 * var(--v));height:calc(13 * var(--v));transform:rotate(-10deg)}
.hero-btns{position:absolute;right:calc(47 * var(--v));top:calc(370 * var(--v));display:flex;gap:calc(10 * var(--v))}
.hero-btns .btn-outline{width:calc(142 * var(--v))}
.hero-btns .btn-orange{width:calc(162 * var(--v))}

.hero-title{transform:none;-webkit-text-stroke:0;margin:calc(-10 * var(--v)) calc(-14 * var(--v)) 0 0}
.hero-title img{width:calc(312 * var(--v));height:auto;display:block;margin-left:auto}
.hero-title + .hero-sub{margin-top:0}
.hero-note-img{position:absolute;left:calc(4 * var(--v));top:calc(140 * var(--v));width:calc(190 * var(--v));height:auto;z-index:7;pointer-events:none}

/* ---------- process ---------- */
.process{position:absolute;left:0;top:calc(430 * var(--v));width:calc(1024 * var(--v));height:calc(250 * var(--v));z-index:4}
.proc-title-wrap{left:calc(718 * var(--v));top:calc(12 * var(--v));width:calc(272 * var(--v));height:calc(88 * var(--v));transform:rotate(-6deg)}
.proc-title{position:absolute;inset:0;font-family:var(--ruqaa);font-weight:700;font-size:calc(47 * var(--v));-webkit-text-stroke:calc(1.1 * var(--v)) var(--ink);line-height:1.2;display:flex;align-items:center;justify-content:center;padding-bottom:calc(8 * var(--v))}
.proc-underline{left:calc(852 * var(--v));top:calc(66 * var(--v));width:calc(104 * var(--v));height:calc(10 * var(--v));transform:rotate(-8deg)}
.step{position:absolute;inset:0;display:flex;align-items:flex-start;gap:calc(8 * var(--v));padding:calc(6 * var(--v)) 0 0 0}
.step-txt{flex:1;min-width:0;text-align:right}
.step h3{font-family:var(--ruqaa);font-weight:700;font-size:calc(28 * var(--v));line-height:1.3;white-space:normal;overflow-wrap:anywhere;-webkit-text-stroke:calc(.9 * var(--v)) var(--ink)}
.step p{white-space:pre-line;overflow-wrap:anywhere;font-size:calc(15 * var(--v));line-height:1.6;margin-top:calc(10 * var(--v));color:var(--ink-soft)}
.step-icon{height:auto;flex:none;order:2}
.step-1{left:calc(628 * var(--v));top:calc(92 * var(--v));width:calc(238 * var(--v));height:calc(146 * var(--v));transform:rotate(-1deg)}
.step-1 .step-icon{width:auto;height:calc(88 * var(--v));margin-top:calc(-12 * var(--v))}
.step-2{left:calc(403 * var(--v));top:calc(60 * var(--v));width:calc(218 * var(--v));height:calc(172 * var(--v));transform:rotate(1deg)}
.step-2 .step-icon{width:auto;height:calc(112 * var(--v));margin-top:calc(4 * var(--v))}
.step-2 .step-txt{padding-top:calc(20 * var(--v))}
.step-3{left:calc(128 * var(--v));top:calc(24 * var(--v));width:calc(272 * var(--v));height:calc(178 * var(--v));transform:rotate(-3deg)}
.step-3 .step-icon{width:calc(96 * var(--v));margin-top:0}
.tape-s2{left:calc(480 * var(--v));top:calc(70 * var(--v));width:calc(50 * var(--v));height:calc(26 * var(--v));transform:rotate(2deg)}
.tape-s3{left:calc(160 * var(--v));top:calc(26 * var(--v));width:calc(54 * var(--v));height:calc(32 * var(--v));transform:rotate(-10deg)}
.proc-arrows{position:absolute;left:0;top:0;width:calc(1024 * var(--v));height:calc(250 * var(--v));z-index:6;overflow:visible;pointer-events:none}
.proc-arrows path{fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linecap:round}

/* ---------- voices ---------- */
.voices{position:absolute;left:0;top:calc(670 * var(--v));width:calc(1024 * var(--v));height:calc(170 * var(--v));z-index:4}
.voices-head{position:absolute;right:calc(58 * var(--v));top:calc(6 * var(--v));text-align:right;z-index:2}
.sec-title{font-family:var(--ui);font-weight:700;font-size:calc(23 * var(--v));line-height:1.3}
.sec-sub{font-size:calc(14 * var(--v));font-weight:500;color:var(--ink-soft)}
.strip-wrap{left:calc(92 * var(--v));top:calc(58 * var(--v));width:calc(912 * var(--v));height:calc(108 * var(--v))}
.strip{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(75,74,49,.4) transparent;padding:calc(8 * var(--v)) calc(10 * var(--v)) calc(10 * var(--v));background-color:var(--paper-light)}
.strip::before,.strip::after{content:"";position:absolute;left:calc(14 * var(--v));right:calc(14 * var(--v));height:calc(4 * var(--v));opacity:.12;
  background:repeating-linear-gradient(90deg,var(--ink) 0 calc(6 * var(--v)),transparent calc(6 * var(--v)) calc(14 * var(--v)))}
.strip::before{top:calc(4 * var(--v))}.strip::after{bottom:calc(6 * var(--v))}
.talent{position:relative;flex:1 0 calc(148 * var(--v));border-left:calc(1 * var(--v)) solid rgba(60,45,25,.22)}
.talent:last-child{border-left:0}
.t-link{position:absolute;inset:0;z-index:1}
.talent .t-play{z-index:2}
.talent:hover img{box-shadow:0 0 0 calc(2 * var(--v)) var(--orange)}
.talent:hover .t-meta b{color:var(--orange)}
.talent img{position:absolute;left:calc(18 * var(--v));top:calc(6 * var(--v));width:calc(66 * var(--v));height:calc(66 * var(--v));border-radius:50%;object-fit:cover;box-shadow:0 0 0 calc(1 * var(--v)) rgba(255,255,255,.6)}
.t-meta{position:absolute;right:calc(20 * var(--v));top:calc(12 * var(--v));text-align:center;display:flex;flex-direction:column;gap:calc(2 * var(--v))}
.t-meta b{font-weight:700;font-size:calc(15 * var(--v))}
.t-meta span{font-size:calc(13 * var(--v));color:var(--ink-soft)}
.t-play{position:absolute;left:calc(78 * var(--v));top:calc(62 * var(--v));width:calc(24 * var(--v));height:calc(24 * var(--v));border-radius:50%;background:var(--olive)}
.t-play::before{content:"";position:absolute;top:50%;left:52%;transform:translate(-35%,-50%);border-top:calc(5 * var(--v)) solid transparent;border-bottom:calc(5 * var(--v)) solid transparent;border-left:calc(8 * var(--v)) solid #F3ECDD}
.t-play.is-playing::before{border:0;width:calc(7 * var(--v));height:calc(9 * var(--v));transform:translate(-50%,-50%);background:linear-gradient(90deg,#F3ECDD 0 35%,transparent 35% 65%,#F3ECDD 65%)}
.wave{position:absolute;left:calc(108 * var(--v));top:calc(62 * var(--v));width:calc(34 * var(--v));height:calc(24 * var(--v));display:flex;align-items:center;gap:calc(1.2 * var(--v))}
.wave i{flex:1;background:#6F6E5D;border-radius:calc(1 * var(--v));min-height:calc(2 * var(--v))}

/* ---------- works ---------- */
.works{position:absolute;left:0;top:calc(840 * var(--v));width:calc(1024 * var(--v));height:calc(var(--wh) * var(--v));z-index:4}
.works-head{position:absolute;right:calc(58 * var(--v));top:calc(2 * var(--v));text-align:right;z-index:3}
.works-head .sec-title{font-size:calc(27 * var(--v))}
.work{position:absolute;left:0;width:calc(1024 * var(--v));height:calc(230 * var(--v));top:calc((28 + var(--i) * 230) * var(--v));pointer-events:none}
.work > *{pointer-events:auto}
.w-media{position:absolute;inset:0;padding:calc(7 * var(--v));background:#F4EEE3;overflow:hidden}
.w-media img,.w-media .thumb-frame{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;left:50%;top:50%;width:calc(40 * var(--v));height:calc(40 * var(--v));margin:calc(-20 * var(--v)) 0 0 calc(-20 * var(--v));border-radius:50%;border:calc(2.5 * var(--v)) solid #fff;background:rgba(0,0,0,.35);transition:transform .2s ease,background-color .2s ease}
.vplay::before{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);border-top:calc(9 * var(--v)) solid transparent;border-bottom:calc(9 * var(--v)) solid transparent;border-left:calc(14 * var(--v)) solid #fff}
.vplay:hover{transform:scale(1.07);background:rgba(210,72,15,.6)}
.dur{position:absolute;right:calc(18 * var(--v));bottom:calc(14 * var(--v));color:#fff;font-weight:600;font-size:calc(14 * var(--v));text-shadow:0 1px 3px rgba(0,0,0,.8)}
.w-card{position:absolute;inset:0;padding:0 calc(44 * var(--v)) 0 0;text-align:right}
.w-card h3{font-family:var(--ui);font-weight:700;font-size:calc(20 * var(--v));line-height:1.3}
.w-card p{font-size:calc(14 * var(--v));line-height:1.6;margin-top:calc(6 * var(--v));color:var(--ink-soft)}
.w-num{position:absolute;left:0;top:0;font-weight:500;font-size:calc(18 * var(--v));padding-right:calc(12 * var(--v));border-right:calc(1 * var(--v)) solid rgba(11,26,24,.35);line-height:1.2}
.tags{position:absolute;right:calc(-6 * var(--v));left:calc(-6 * var(--v));bottom:calc(-8 * var(--v));display:flex;gap:calc(8 * var(--v))}
.tags li{flex:1;text-align:center;background:var(--tag);color:#394037;font-size:calc(12.5 * var(--v));font-weight:500;padding:calc(4 * var(--v)) calc(2 * var(--v));border-radius:calc(3 * var(--v));white-space:nowrap}
.work.is-odd .w-media-wrap{left:calc(97 * var(--v));top:0;width:calc(563 * var(--v));height:calc(212 * var(--v));transform:rotate(1deg)}
.work.is-odd .w-card-wrap{left:calc(663 * var(--v));top:calc(26 * var(--v));width:calc(307 * var(--v));height:calc(160 * var(--v));transform:rotate(-.4deg)}
.work.is-even .w-card-wrap{left:calc(88 * var(--v));top:calc(26 * var(--v));width:calc(307 * var(--v));height:calc(160 * var(--v));transform:rotate(.3deg)}
.work.is-even .w-media-wrap{left:calc(400 * var(--v));top:0;width:calc(585 * var(--v));height:calc(204 * var(--v));transform:rotate(.5deg)}
.work:nth-of-type(4n+3) .w-media-wrap{transform:rotate(-.4deg)}
.work:nth-of-type(4n+3) .w-card-wrap{transform:rotate(.3deg)}
.tape-w1{left:calc(205 * var(--v));top:calc(-16 * var(--v));width:calc(54 * var(--v));height:calc(30 * var(--v));transform:rotate(-6deg)}

/* ---------- services ---------- */
.svcs{position:absolute;left:0;top:calc((840 + var(--wh)) * var(--v));width:calc(1024 * var(--v));height:calc(var(--sh) * var(--v));z-index:4}
.svcs-head{position:absolute;right:calc(58 * var(--v));top:calc(10 * var(--v));text-align:right;z-index:3}
.svcs-head .sec-title{font-size:calc(27 * var(--v))}
.svc-grid{position:absolute;left:calc(84 * var(--v));right:calc(50 * var(--v));top:calc(84 * var(--v));display:grid;grid-template-columns:repeat(4,1fr);gap:calc(22 * var(--v)) calc(18 * var(--v))}
.svc-wrap{position:relative;transform:rotate(var(--r,0deg))}
.svc-wrap:nth-child(4n+1){--r:-.8deg}.svc-wrap:nth-child(4n+2){--r:.6deg}.svc-wrap:nth-child(4n+3){--r:-.4deg}.svc-wrap:nth-child(4n){--r:.9deg}
.svc{display:flex;flex-direction:column;align-items:flex-start;text-align:right;height:calc(222 * var(--v));padding:calc(6 * var(--v)) calc(4 * var(--v)) calc(4 * var(--v));transition:transform .25s ease}
.svc-wrap:hover .svc{transform:translateY(calc(-3 * var(--v))) rotate(-.5deg)}
.svc-ic{display:block;width:calc(46 * var(--v));height:calc(46 * var(--v));margin-bottom:calc(8 * var(--v))}
.svc-ic svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.svc-ic svg .acc{stroke:var(--orange)}
.svc h3{font-family:var(--ruqaa);font-weight:700;font-size:calc(23 * var(--v));line-height:1.25;-webkit-text-stroke:calc(.7 * var(--v)) var(--ink)}
.svc p{font-size:calc(13.5 * var(--v));line-height:1.65;margin-top:calc(6 * var(--v));color:var(--ink-soft)}
.svc{position:relative}
.svc-link{position:absolute;inset:calc(-10 * var(--v));z-index:2}
.svc-more{display:block;align-self:flex-end;margin-top:auto;padding-top:calc(6 * var(--v));font-size:calc(13 * var(--v));font-weight:700;color:var(--orange)}
.svc-wrap:hover .svc-more{text-decoration:underline}
.svc-wrap .tape{top:calc(-12 * var(--v));left:50%;margin-left:calc(-22 * var(--v));width:calc(44 * var(--v));height:calc(22 * var(--v));transform:rotate(-4deg)}

/* ---------- home FAQ ---------- */
.hfaq{position:absolute;left:0;top:calc((840 + var(--wh) + var(--sh)) * var(--v));width:calc(1024 * var(--v));z-index:4}
.hfaq-in{margin:0 calc(50 * var(--v)) 0 calc(84 * var(--v))}
.hfaq-head{text-align:right;margin:0 calc(6 * var(--v)) calc(16 * var(--v)) 0}
.hfaq-head .sec-title{font-size:calc(27 * var(--v))}
.hfaq-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(18 * var(--v)) calc(22 * var(--v))}
.qa{padding:calc(4 * var(--v)) calc(6 * var(--v))}
.qa:nth-child(4n+1){transform:rotate(-.4deg)}.qa:nth-child(4n+2){transform:rotate(.5deg)}.qa:nth-child(4n+3){transform:rotate(.3deg)}.qa:nth-child(4n){transform:rotate(-.5deg)}
.qa h3{font-family:var(--ui);font-weight:700;font-size:calc(16 * var(--v));line-height:1.5}
.qa h3::before{content:"";display:inline-block;width:calc(9 * var(--v));height:calc(9 * var(--v));border-radius:50%;background:var(--orange);margin-left:calc(8 * var(--v));vertical-align:middle}
.qa p{font-size:calc(13.5 * var(--v));line-height:1.75;color:var(--ink-soft);margin-top:calc(4 * var(--v))}

/* ---------- CTA ---------- */
.cta{position:absolute;left:0;top:calc((840 + var(--wh) + var(--sh) + var(--fh)) * var(--v));width:calc(1024 * var(--v));height:calc(142 * var(--v));z-index:5}
.cta-wrap{left:calc(18 * var(--v));top:0;width:calc(1006 * var(--v));height:calc(142 * var(--v));filter:drop-shadow(0 calc(2 * var(--v)) calc(3 * var(--v)) rgba(0,0,0,.35))}
.cta-band{position:absolute;inset:0;background:#130E0A;overflow:hidden}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 48%}
.cta-shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(12,9,6,.62) 0,rgba(12,9,6,.45) 40%,rgba(12,9,6,0) 62%)}
.cta-title{position:absolute;right:calc(262 * var(--v));top:calc(8 * var(--v));color:#fff;text-align:right;font-family:var(--ruqaa);font-weight:700;line-height:1.05;transform:rotate(-5deg);transform-origin:right center;-webkit-text-stroke:calc(.8 * var(--v)) #fff}
.cta-title span{display:block;white-space:nowrap}
.cta-title .c1{font-size:calc(34 * var(--v));margin-right:calc(6 * var(--v))}
.cta-title .c2{font-size:calc(39 * var(--v));margin-top:calc(4 * var(--v))}
.cta-underline{left:calc(560 * var(--v));top:calc(100 * var(--v));width:calc(140 * var(--v));height:calc(11 * var(--v));transform:rotate(-4deg)}
.cta-btn{position:absolute;left:calc(785 * var(--v));top:calc(51 * var(--v));width:calc(172 * var(--v));height:calc(42 * var(--v));font-size:calc(16 * var(--v))}

/* ---------- footer ---------- */
.site-footer{position:absolute;left:0;top:calc((970 + var(--wh) + var(--sh) + var(--fh)) * var(--v));width:calc(1024 * var(--v));height:calc(92 * var(--v));z-index:6}
.ftr-wrap{left:calc(40 * var(--v));top:0;width:calc(966 * var(--v));height:calc(94 * var(--v))}
.ftr-brand{position:absolute;right:calc(54 * var(--v));top:calc(8 * var(--v));text-align:right}
.ftr-brand .logo{position:static;width:max-content;margin-left:auto}
.ftr-brand .logo-ar{font-size:calc(31 * var(--v))}
.ftr-brand .logo-en{font-size:calc(9 * var(--v));letter-spacing:calc(6.4 * var(--v));margin-right:calc(-6 * var(--v))}
.ftr-brand p{font-size:calc(11.5 * var(--v));line-height:1.45;font-weight:500;margin-top:calc(2 * var(--v))}
.ftr-nav{position:absolute;right:calc(300 * var(--v));top:calc(38 * var(--v));display:flex;gap:calc(26 * var(--v));font-weight:600;font-size:calc(14.5 * var(--v))}
.ftr-nav a:hover{color:var(--orange)}
.ftr-nav .ftr-faq{font-size:calc(12.5 * var(--v));font-weight:500;color:var(--ink-soft);align-self:center}
.social{position:absolute;left:calc(100 * var(--v));top:calc(38 * var(--v));display:flex;gap:calc(14 * var(--v))}
.social a{width:calc(20 * var(--v));height:calc(20 * var(--v));color:var(--ink);display:block;transition:color .2s}
.social a:hover{color:var(--orange)}
.social svg{width:100%;height:100%;fill:currentColor}
.social a[data-social="instagram"] svg{fill:none}

/* ---------- inline players ---------- */
.inline-player{z-index:3;border:0;background:#000;object-fit:contain}
.is-playing > .vplay,.is-playing > .dur{display:none}
.vplay[hidden]{display:none}
.hero-play{z-index:4;width:calc(64 * var(--v));height:calc(64 * var(--v));margin:calc(-32 * var(--v)) 0 0 calc(-32 * var(--v));border-width:calc(3 * var(--v))}
.hero-play::before{border-top-width:calc(13 * var(--v));border-bottom-width:calc(13 * var(--v));border-left-width:calc(20 * var(--v))}
.hero-photo .hero-frame{z-index:5}
.t-play.is-empty{cursor:default}
/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,6,4,.88);display:flex;align-items:center;justify-content:center;padding:4vw}
.lightbox[hidden]{display:none}
.lightbox video{max-width:100%;max-height:100%}
.lb-close{position:absolute;top:16px;left:20px;color:#fff;font-size:36px;line-height:1}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* =========================================================
   Mobile — same materials, stacked flow (--v rebased to 390px)
   ========================================================= */
@media (max-width: 1023px){
  :root{--v: min(1.3px, calc(100vw / 390))}
  .page{height:auto;width:100%;padding:0 12px 30px;overflow:hidden;background:var(--paper) url(../assets/paper.webp) center/720px;background-blend-mode:multiply}
  .table-layer,.props{display:none}
  .site-header,.hero,.process,.voices,.works,.svcs,.hfaq,.cta,.site-footer{position:relative;left:auto;top:auto;width:auto;height:auto}
  .sh,.logo,.main-nav,.hdr-cta,.hero-copy,.hero-btns,.voices-head,.works-head,.ftr-brand,.ftr-nav,.social,.cta-title,.cta-btn{position:relative;left:auto;right:auto;top:auto;bottom:auto}

  .site-header{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;padding:calc(18 * var(--v)) calc(4 * var(--v)) calc(6 * var(--v));gap:calc(12 * var(--v))}
  .site-header .logo{right:auto;top:auto}
  .logo-ar{font-size:calc(40 * var(--v))}.logo-en{font-size:calc(9 * var(--v));letter-spacing:calc(6 * var(--v))}
  .main-nav{width:100%;justify-content:center;flex-wrap:wrap;gap:0 calc(10 * var(--v));font-size:calc(14 * var(--v))}
  .main-nav a,.ftr-nav a{padding:8px 2px;display:inline-block}
  .t-play{width:calc(32 * var(--v));height:calc(32 * var(--v))}
  .hdr-cta{width:auto;font-size:calc(13 * var(--v));height:calc(38 * var(--v))}

  .hero{display:flex;flex-direction:column;padding:calc(22 * var(--v)) calc(4 * var(--v)) 0}
  .hero-copy{order:1;width:auto}
  .hero-title .l1{font-size:calc(78 * var(--v))}.hero-title .l2{font-size:calc(56 * var(--v))}
  .hero-underline{left:calc(90 * var(--v));top:calc(190 * var(--v));width:calc(150 * var(--v))}
  .hero-copy .hero-sub{margin-top:calc(8 * var(--v))}
  .hero-sub{font-size:calc(15 * var(--v));margin-top:calc(30 * var(--v))}
  .hero-btns{order:2;margin-top:calc(18 * var(--v));flex-wrap:wrap;right:auto;top:auto;gap:calc(10 * var(--v))}
  .hero-btns .btn{flex:1 1 calc(140 * var(--v))}
  .hero-btns .btn{height:calc(44 * var(--v));font-size:calc(14 * var(--v));width:auto!important;padding:0 calc(18 * var(--v))}
  .hero-photo-wrap{order:3;width:auto;height:calc(250 * var(--v));margin:calc(30 * var(--v)) 0 0;transform:rotate(1.5deg)}
  .hero-note-img{position:relative;left:auto;top:auto;order:4;width:calc(130 * var(--v));margin:calc(-78 * var(--v)) auto 0 calc(-4 * var(--v));transform:rotate(-4deg)}
  .hero-title img{width:100%;max-width:calc(340 * var(--v))}
  .hero-note-wrap{order:4;width:calc(150 * var(--v));height:calc(180 * var(--v));margin:calc(-80 * var(--v)) auto 0 0;transform:rotate(-8deg)}
  .hero .tape{display:none}

  .process{display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--v));padding:calc(26 * var(--v)) 0 calc(20 * var(--v))}
  .proc-title-wrap{width:calc(290 * var(--v));height:calc(84 * var(--v))}
  .proc-underline{display:none}
  .step-wrap{width:94%;height:auto}
  .step-wrap .step{position:relative;inset:auto;align-items:center;padding:calc(22 * var(--v)) calc(22 * var(--v)) calc(18 * var(--v)) calc(16 * var(--v));gap:calc(12 * var(--v))}
  .step-1{order:1;align-self:flex-end}.step-2{order:2}.step-3{order:3;align-self:flex-start}
  .step h3{font-size:calc(28 * var(--v))}.step p{font-size:calc(14 * var(--v))}
  .step-icon{width:auto!important;height:calc(80 * var(--v))!important;margin-top:0!important}
  .process .tape,.proc-arrows{display:none}

  .voices{padding:calc(24 * var(--v)) 0}
  .voices-head{padding:0 calc(4 * var(--v))}
  .sec-title{font-size:calc(26 * var(--v))}.sec-sub{font-size:calc(14 * var(--v))}
  .strip-wrap{width:100%;height:auto;margin-top:calc(14 * var(--v))}
  .strip-wrap > .strip{position:relative;inset:auto;flex-wrap:wrap;overflow:visible}
  .talent{flex:0 0 50%;min-width:0;height:auto;display:grid;grid-template-columns:1fr auto;grid-template-areas:'meta img' 'ctl img';align-items:center;gap:calc(6 * var(--v)) calc(8 * var(--v));padding:calc(14 * var(--v)) calc(10 * var(--v));border-bottom:calc(1 * var(--v)) solid rgba(60,45,25,.14)}
  .talent:nth-child(2n){border-left:0}
  .talent img{position:static;grid-area:img;width:calc(60 * var(--v));height:calc(60 * var(--v))}
  .t-meta{position:static;grid-area:meta;text-align:right}
  .t-play{position:relative;left:auto;top:auto;grid-area:ctl;justify-self:start;z-index:2}
  .wave{left:auto;right:calc(40 * var(--v));top:auto;bottom:calc(14 * var(--v));width:calc(44 * var(--v));height:calc(22 * var(--v))}
  .talent{position:relative}

  .works{padding:calc(20 * var(--v)) 0 calc(26 * var(--v))}
  .works-head{margin-bottom:calc(10 * var(--v));padding:0 calc(4 * var(--v))}
  .works-head .sec-title{font-size:calc(30 * var(--v))}
  .work{position:relative;inset:auto;top:auto;width:auto;height:auto;display:flex;flex-direction:column;margin-top:calc(18 * var(--v))}
  .work .w-media-wrap{order:1}.work .w-card-wrap{order:2}
  .w-media-wrap{width:100%!important;height:calc(200 * var(--v))!important;left:auto!important;top:auto!important}
  .w-card-wrap{left:auto!important;top:auto!important}
  .voices-sheet{display:none}
  .cta-band img{object-fit:cover}
  .w-card-wrap{width:94%!important;height:auto!important;margin:calc(-8 * var(--v)) auto 0}
  .w-card-wrap .w-card{position:relative;inset:auto;padding:calc(20 * var(--v)) calc(18 * var(--v)) calc(16 * var(--v))!important;border-width:calc(16 * var(--v))}
  .w-num{position:absolute;left:calc(18 * var(--v))!important;top:calc(20 * var(--v))!important}
  .w-card h3{font-size:calc(22 * var(--v))}.w-card p{font-size:calc(14 * var(--v))}
  .tags{position:static;margin-top:calc(12 * var(--v));flex-wrap:wrap}
  .tags{gap:calc(6 * var(--v))}
  .tags li{flex:0 0 auto;padding:calc(4 * var(--v)) calc(12 * var(--v));font-size:calc(12.5 * var(--v))}
  .works .tape{display:none}

  .svcs{position:relative;left:auto;top:auto;width:auto;height:auto;padding:calc(22 * var(--v)) 0 calc(6 * var(--v))}
  .svcs-head{position:relative;right:auto;top:auto;padding:0 calc(4 * var(--v))}
  .svcs-head .sec-title{font-size:calc(30 * var(--v))}
  .svc-grid{position:relative;left:auto;right:auto;top:auto;margin-top:calc(16 * var(--v));display:flex;flex-wrap:wrap;justify-content:center;gap:calc(16 * var(--v)) calc(10 * var(--v))}
  .svc-grid > .svc-wrap{flex:0 0 calc((100% - calc(10 * var(--v))) / 2);min-width:0}
  .svc{height:auto;min-height:calc(190 * var(--v));border-width:calc(16 * var(--v));padding:calc(4 * var(--v)) calc(2 * var(--v))}
  .svc-ic{width:calc(40 * var(--v));height:calc(40 * var(--v))}
  .svc h3{font-size:calc(21 * var(--v))}.svc p{font-size:calc(13 * var(--v))}
  .hfaq{top:auto;width:auto;padding:calc(26 * var(--v)) 0 calc(6 * var(--v))}
  .hfaq-in{margin:0}
  .hfaq-head .sec-title{font-size:calc(30 * var(--v))}
  .hfaq-grid{grid-template-columns:1fr;gap:calc(14 * var(--v))}
  .qa{border-width:calc(16 * var(--v))}
  .qa h3{font-size:calc(16 * var(--v))}.qa p{font-size:calc(14 * var(--v))}
  .cta{margin:calc(24 * var(--v)) -12px 0;min-height:calc(300 * var(--v));display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:calc(40 * var(--v)) calc(26 * var(--v))}
  .cta-wrap{position:absolute;inset:0;width:auto;height:auto}
  .cta-shade{background:rgba(12,9,6,.6)}
  .cta-title .c1{font-size:calc(36 * var(--v))}.cta-title .c2{font-size:calc(36 * var(--v));white-space:normal}
  .cta-underline{display:none}
  .cta-btn{margin-top:calc(30 * var(--v));width:auto;height:calc(46 * var(--v));padding:0 calc(22 * var(--v))}

  .site-footer{padding:calc(34 * var(--v)) calc(16 * var(--v));display:flex;flex-direction:column;align-items:center;gap:calc(18 * var(--v));text-align:center}
  .ftr-wrap{position:absolute;inset:0 -12px;width:auto;height:auto}
  .ftr-brand{text-align:center}.ftr-brand .logo{margin:0 auto}
  .ftr-nav{flex-wrap:wrap;justify-content:center;gap:calc(10 * var(--v)) calc(20 * var(--v))}
  .social{gap:calc(22 * var(--v))}.social a{width:calc(22 * var(--v));height:calc(22 * var(--v))}
}

/* =========================================================
   Tablet (iPad portrait 761–1023px) — same stacked flow, larger unit + wider grids
   ========================================================= */
@media (min-width: 761px) and (max-width: 1023px){
  :root{--v: 1.3px}
  .page{padding:0 28px 40px}
  .hero{max-width:640px;margin:0 auto}
  .hero-photo-wrap{height:calc(360 * var(--v))}
  .process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
  .proc-title-wrap{grid-column:1/-1;justify-self:center}
  .step-wrap{width:auto!important}
  .step-wrap .step{flex-direction:column;align-items:center;text-align:center;padding:calc(20 * var(--v)) calc(14 * var(--v))!important;height:100%}
  .step-wrap .step .step-txt{text-align:center}
  .step-1,.step-2,.step-3{align-self:stretch!important}
  .talent{flex:0 0 33.333%}
  .talent:nth-child(2n){border-left:calc(1 * var(--v)) solid rgba(60,45,25,.22)}
  .talent:nth-child(3n){border-left:0}
  .work{max-width:620px;margin-left:auto;margin-right:auto}
  .w-media-wrap{height:calc(300 * var(--v))!important}
  .svc-grid > .svc-wrap{flex-basis:calc((100% - calc(20 * var(--v))) / 3)}
  .hfaq-grid{grid-template-columns:1fr 1fr}
}

/* Content below the fixed hero follows its real height. */
.media-error{display:block;font-size:12px;color:#A3321A;padding:4px}
.talent .media-error{position:absolute;bottom:0;right:4px;background:var(--paper);z-index:4}
.svc-link{inset:0}
.svc h3,.svc p,.w-card h3,.w-card p{overflow-wrap:anywhere}
.t-play{min-width:44px;min-height:44px}
@media (min-width:1024px){
 .page{height:auto;padding-top:calc(var(--intro-height,840) * var(--v));background-size:100% auto,100% auto}
 .works,.svcs,.cta,.site-footer{position:relative;left:auto;top:auto;width:100%;height:auto}
 .works{padding-top:calc(8 * var(--v));padding-bottom:calc(12 * var(--v))}
 .works-head,.svcs-head{position:relative;right:auto;top:auto;text-align:right;margin:0 calc(110 * var(--v)) calc(22 * var(--v))}
 .works-list{display:grid;gap:calc(20 * var(--v))}
 .work{position:relative;left:auto;top:auto;width:auto;height:auto;display:grid;grid-template-columns:minmax(0,563fr) minmax(0,307fr);gap:calc(3 * var(--v));direction:ltr;margin:0 calc(54 * var(--v)) 0 calc(97 * var(--v));align-items:center}
 .work.is-even{grid-template-columns:minmax(0,307fr) minmax(0,563fr)}
 .work.is-odd .w-media-wrap,.work.is-even .w-media-wrap{position:relative;left:auto;top:auto;width:100%;height:calc(212 * var(--v))}
 .work.is-odd .w-card-wrap,.work.is-even .w-card-wrap{position:relative;left:auto;top:auto;width:100%;height:auto;min-height:calc(160 * var(--v));direction:rtl}
 .w-card{position:relative;inset:auto;min-height:calc(160 * var(--v));padding:0 calc(20 * var(--v)) 0 0}
 .w-card h3{padding-left:calc(20 * var(--v))}
 .w-num{left:calc(-8 * var(--v));top:0}
 .tags{position:static;flex-wrap:wrap;margin:calc(12 * var(--v)) calc(-10 * var(--v)) calc(-4 * var(--v));gap:calc(6 * var(--v))}
 .tags li{flex:0 1 auto;white-space:normal;padding:calc(4 * var(--v)) calc(10 * var(--v))}
 .svcs{padding-top:calc(12 * var(--v));padding-bottom:calc(35 * var(--v))}
 .svc-grid{position:relative;left:auto;right:auto;top:auto;margin:0 calc(50 * var(--v)) 0 calc(84 * var(--v))}
 .svc{height:100%;min-height:calc(222 * var(--v))}
 .cta{height:calc(142 * var(--v))}
 .site-footer{height:calc(102 * var(--v))}
 .t-play{width:calc(28 * var(--v));height:calc(28 * var(--v));left:calc(72 * var(--v));top:calc(55 * var(--v))}
 .wave{left:calc(110 * var(--v))}
}

.hero-title.is-text{font-size:calc(40 * var(--v));line-height:1.25;overflow-wrap:anywhere;max-width:calc(330 * var(--v))}
.main-nav a,.ftr-nav a{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:1024px){
 .hero-btns{top:calc((370 + var(--hero-extra,0)) * var(--v))}
 .hero-sheet{height:calc((348 + var(--hero-extra,0)) * var(--v))}
 .process{top:calc((430 + var(--hero-extra,0)) * var(--v));height:calc((250 + var(--process-extra,0)) * var(--v))}
 .process .step-wrap{height:auto}
 .step-wrap .step{position:relative;inset:auto;min-height:var(--step-min)}
 .step-1{--step-min:calc(146 * var(--v))}.step-2{--step-min:calc(172 * var(--v))}.step-3{--step-min:calc(178 * var(--v))}
 .voices{top:calc((680 + var(--hero-extra,0) + var(--process-extra,0)) * var(--v))}
 .page{padding-top:calc((var(--intro-height,840) + var(--hero-extra,0) + var(--process-extra,0)) * var(--v))}
}

[data-content]{white-space:pre-line}
/* Voice previews: centred identity, separate controls, real playback position. */
.talent{display:flex;flex-direction:column;align-items:center;gap:calc(5 * var(--v));padding:calc(8 * var(--v)) calc(12 * var(--v)) calc(10 * var(--v));min-width:calc(160 * var(--v))}
.talent img{position:static;width:calc(48 * var(--v));height:calc(48 * var(--v));flex:none}
.talent .t-meta{position:static;right:auto;top:auto;width:100%;text-align:center;min-height:calc(35 * var(--v));justify-content:center;line-height:1.35}
.t-meta b{overflow-wrap:anywhere}
.t-meta span{line-height:1.3}
.t-player{position:relative;width:100%;max-width:calc(172 * var(--v));z-index:2}
.t-controls{display:flex;justify-content:center;align-items:center;gap:calc(16 * var(--v));direction:ltr}
.talent .t-play{position:relative;inset:auto;width:calc(34 * var(--v));height:calc(34 * var(--v));min-width:44px;min-height:44px;flex:none;transition:background .18s ease-out,box-shadow .18s ease-out}
.talent .t-play:hover{background:var(--green)}
.talent .t-play:active{transform:scale(.95)}
.talent .wave{position:relative;inset:auto;width:calc(58 * var(--v));height:calc(26 * var(--v));flex:none;pointer-events:none}
.talent.is-playing .t-play{background:var(--orange);box-shadow:0 0 0 calc(4 * var(--v)) rgba(210,72,15,.12)}
.talent.is-playing .wave i{background:var(--orange);animation:voice-wave .72s ease-in-out infinite alternate;animation-delay:var(--delay,0ms);transform-origin:center}
@keyframes voice-wave{0%{transform:scaleY(.35)}55%{transform:scaleY(.7)}100%{transform:scaleY(1)}}
.t-seek{display:block;position:relative;width:100%;height:26px;margin:0;appearance:none;-webkit-appearance:none;direction:ltr;background:transparent;cursor:pointer;--played:0%}
.t-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--orange) 0 var(--played),rgba(75,74,49,.23) var(--played) 100%)}
.t-seek::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--orange) 0 var(--played),rgba(75,74,49,.23) var(--played) 100%)}
.t-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-top:-3px;box-shadow:0 0 0 2px var(--paper-light)}
.t-seek::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--orange)}
.t-seek:disabled{cursor:default;opacity:.45}
.t-times{display:flex;justify-content:space-between;font-size:calc(10 * var(--v));font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.t-status{display:block;min-height:calc(15 * var(--v));text-align:center;font-size:calc(10 * var(--v));line-height:1.35;margin-top:calc(4 * var(--v));color:var(--ink-soft)}
.talent.is-playing .t-status{color:var(--orange)}
@media(max-width:1023px){.talent{display:flex;flex:0 0 50%;padding:calc(14 * var(--v)) calc(12 * var(--v));gap:calc(6 * var(--v));min-width:0}.talent img{width:calc(56 * var(--v));height:calc(56 * var(--v))}.talent .t-meta{min-height:calc(36 * var(--v));text-align:center}.t-player{max-width:calc(170 * var(--v))}.t-controls{gap:16px}.talent .wave{width:50px;height:24px}.talent .t-play{width:44px;height:44px}.t-times,.t-status{font-size:11px}.t-status{min-height:17px}}
@media(min-width:761px) and (max-width:1023px){.talent{flex-basis:33.333%}}
@media(prefers-reduced-motion:reduce){.talent.is-playing .wave i{animation:none}.talent .t-play{transition:none}}

/* Generated photographic continuation stays at its natural aspect ratio as content grows. */
@media(min-width:1024px){
 .page::before{content:"";position:absolute;top:calc(760 * var(--v));bottom:calc(180 * var(--v));left:0;right:0;z-index:-1;pointer-events:none;background:url(../assets/plate-continuation-v3.webp) center calc(80 * var(--v))/100% auto repeat-y;mask-image:linear-gradient(to bottom,transparent,#000 calc(80 * var(--v)),#000 calc(100% - 66 * var(--v)),transparent)}
}
/* One matte film window per artist. The approved image supplies both rails.
   Clip its rails at their natural proportions; extend only the black dividers,
   so adding artists never stretches the photographic film texture. */
.strip-wrap>.film-strip{
 --film-width:calc(218.5 * var(--v));--film-height:max(calc(200 * var(--v)),246px);--film-unit:calc(var(--film-width) / 358);--film-rail-unit:calc(var(--film-unit) * .82);
 display:flex;flex-wrap:nowrap;direction:rtl;position:relative;inset:auto;
 width:100%;height:calc(var(--film-height) + 8px);padding:0;gap:0;
 overflow-x:auto;overflow-y:hidden;background:transparent;
 scroll-snap-type:x proximity;overscroll-behavior-x:contain;
 scrollbar-width:thin;scrollbar-color:var(--olive) transparent;
}
.film-strip::before,.film-strip::after{content:none}
.strip.film-strip .talent{
 flex:0 0 var(--film-width);width:var(--film-width);min-width:var(--film-width);max-width:var(--film-width);
 height:var(--film-height);position:relative;display:block;padding:0;border:0;scroll-snap-align:start;
}
.film-strip .talent::before,.film-strip .talent::after{
 content:"";position:absolute;left:0;right:0;pointer-events:none;
 background-image:url(../assets/black-film-strip-v2.webp);
 background-repeat:no-repeat;background-size:calc(1536 * var(--film-rail-unit)) calc(1024 * var(--film-rail-unit));opacity:.72;
}
.film-strip .talent::before{top:0;height:calc(52 * var(--film-rail-unit));background-position:calc(-410 * var(--film-rail-unit)) calc(-365 * var(--film-rail-unit))}
.film-strip .talent::after{bottom:0;height:calc(62 * var(--film-rail-unit));background-position:calc(-410 * var(--film-rail-unit)) calc(-599 * var(--film-rail-unit))}
.t-frame{
 position:absolute;top:calc(52 * var(--film-rail-unit));bottom:calc(62 * var(--film-rail-unit));left:0;right:0;
 border-inline:calc(12 * var(--film-unit)) solid rgba(13,13,13,.72);background:transparent;
 display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:4px 10px;
}
.strip.film-strip .talent img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.strip.film-strip .talent .t-meta{min-height:30px;width:100%;gap:1px;text-align:center;line-height:1.2}
.film-strip .t-meta b{font-size:16px;line-height:1.25}
.film-strip .t-meta span{font-size:12px;line-height:1.2}
.film-strip .t-meta span:empty{display:none}
.film-strip .t-player{max-width:170px;width:100%}
.film-strip .t-controls{gap:18px}
.strip.film-strip .talent .t-play{width:44px;height:44px}
.strip.film-strip .talent .wave{width:64px;height:26px}
.film-strip .t-seek{height:20px}
.film-strip .t-times{font-size:10px}
.film-strip .t-status{position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.t-empty{display:flex;align-items:center;justify-content:center;min-height:68px;font-size:13px;color:var(--ink-soft)}
.t-empty[hidden]{display:none}
.film-strip .t-link{z-index:1}
.film-strip .t-link:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
@media(min-width:1024px){
 .voices{height:auto;padding-top:calc(6 * var(--v));padding-bottom:calc(12 * var(--v))}
 .voices-head{position:relative;right:auto;top:auto;margin:0 calc(58 * var(--v)) calc(10 * var(--v)) calc(92 * var(--v))}
 .strip-wrap{position:relative;left:auto;top:auto;width:auto;margin:0 calc(58 * var(--v)) 0 calc(92 * var(--v));height:calc(max(calc(200 * var(--v)),246px) + 8px)}
}
@media(max-width:1023px){
 .voices{padding-top:calc(18 * var(--v));padding-bottom:calc(18 * var(--v))}
 .strip-wrap>.film-strip{--film-width:220px;--film-height:246px}
}

/* Border photographs rest above the paper; the voice windows contain clean paper. */
@media(min-width:1024px){
 .props{z-index:5}
 .pr-pol2{top:calc((var(--intro-height,956) + var(--hero-extra,0) + var(--process-extra,0) + 45) * var(--v));width:calc(86 * var(--v));left:0}
 .strip-wrap>.film-strip{background:url(../assets/plate-continuation-v3.webp) center 42%/165% auto no-repeat}
}